1. bounoki

    Posted

    bounoki
Changes in title
+VSCodeの.mdのプレビューをかっこいい見栄えにする
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,89 @@
+# はじめに
+
+VSCode + Markdownでドキュメントを殴り書いていると、どこの項目を書いているかわからなくなるときがありますよね(協調圧力)。
+VSCodeの場合、`EXPLORER Pane`に`OUTLINE`が表示されるのでそれを見ながら頑張るというのもあるのですが、書いてるときはPreview見てるので、Previewでだいたいの位置がわかってほしい。
+
+自分はPreviewに[shd101wyy.markdown-preview-enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)を使っているので、このCSS拡張をさくっと設定して、見出しに番号を振ってみます。
+
+# 手続き
+
+## markdown-preview-enhancedのインストール
+
+必要に応じて、よしなにインストール。
+ひょっとしたらデフォルトのpreviewerにcssカスタマイズできるかもしれない(未検証)けど、自分は[shd101wyy.markdown-preview-enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)を利用。
+
+## CSSのカスタマイズ
+
+`Ctrl-Shift-p` を押して `Command Palette`を表示し、`Markdown Preview Enhanced: Customize CSS`を実行。
+すると、`style.css`が開くので、以下のようなcssを記述(/\*\*以下の部分\*\*/と書いてある場所)。
+
+今回は、とりあえず`h4`までを設定。内容はざっくり以下。
+
+- h1で`chapter`のcounterをreset
+- h2の`before`で`chapter`をinclementし、`content:`で出力。
+- 以下略
+
+なお、このcssの内容はあとで同じ環境を作りやすくするために適宜更新する可能性がありますのでご了承ください。
+
+```css:style.css
+/* Please visit the URL below for more information: */
+/* https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
+
+.markdown-preview.markdown-preview {
+ // modify your style here
+ // eg: background-color: blue;
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-family: "Yu-Gothic-UI";
+ font-size: 1.2em;
+ }
+
+ body {
+ font-family: "Yu-Gothic-UI";
+ }
+ [class*="language"] {
+ font-family: "MyricaM M";
+ }
+ .task-list-item-checkbox {
+ font-family: "Yu-Gothic-UI";
+ font-size: smaller;
+ }
+ /**以下の部分**/
+ h1 {
+ counter-reset: chapter;
+ font-size: 1.8em;
+ border-style: solid;
+ border-width: 0 0 1px 0;
+ }
+ h2 {
+ counter-reset: sub-chapter;
+ font-size: 1.5em;
+ }
+ h3 {
+ counter-reset: section;
+ }
+
+ h2::before {
+ counter-increment: chapter;
+ content: counter(chapter) ". ";
+ }
+ h3::before {
+ counter-increment: sub-chapter;
+ content: counter(chapter) "." counter(sub-chapter) ". ";
+ }
+ h4::before {
+ counter-increment: section;
+ content: "(" counter(section) ")";
+ }
+}
+```
+
+## 結果
+
+こんな感じ。
+
+![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126949/8225c4a6-2d5e-0657-14d7-9061263f6e54.png)