開発メモ その153 Visual Studio CodeのMarkdown機能を強化 その3

Introduction

前回の続き。

taktak.jp

開発メモ その152 Visual Studio CodeのMarkdown機能を強化 その2 · A certain engineer "COMPLEX"

https://taktak.jp/2018/11/13/3836

Introduction前回の続き。 どうもMarkdown Preview Enhancedでもヘッダー、フッターの調節ができる模様。よく考えたら、markdown-pdfと同じpuppeteerを使っているのだから当然と言えば当然なのかな? ResolutionPuppe…

仕事で前回書いたことを適用して、まだ改善できるな、と思い調べてみました。

Resolution

フォント変更 (コードハイライトのブロック含む)

箇条書き、コードハイライト、シーケンス図のActor(mermaid)に対応させます。

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;

-  h1, h2, h3, h4, h5, h6, p {
-    font-family: 'ヒラギノ丸ゴ ProN W4', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ　Ｐゴシック', 'MS PGothic', sans-serif;
-  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  pre,
+  li,
+  text.messageText,
+  tspan {
+    font-family: 'ヒラギノ丸ゴ ProN W4', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ　Ｐゴシック', 'MS PGothic', sans-serif;
+  }
}

コードハイライトのブロックを折り返す

CSSをカスタマイズします。

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;
+  pre {
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
}