A certain engineer "COMPLEX"

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

Introduction


前回の続き。

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

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

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 Pゴシック', '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 Pゴシック', '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;
+ }
}

コメントを残す

メールアドレスが公開されることはありません。

%d人のブロガーが「いいね」をつけました。