Markdown:レイアウト・フォントを変更したい

Visual Studio CodeでMarkdownのドキュメントを書いているが、プレビューした際のレイアウトをもう少し何とかしたい。
あとフォントも変更したい。(エンマークがバックスラッシュになってしまうので)


CSSファイルの作成

cssファイルを作成する。
全体のフォント変更は "body {font-family: ・・・;}" で指定すれば良いと思う。
本文をもう少し右側にインデントしたいのだが、これは "p {text-indent: 1em;}" みたいな感じで調整できる。
## や ### のヘッダの上にマージを少し入れたいが、これは "h2, h3 { margin-top: 1em;}" みたいな感じでいいかな。

このファイルを ワークスペース配下のフォルダにおく。
※ユーザー全体の設定はできないらしいので、プロジェクトをワークスペースとして保存しておく。

CSSファイルの適用

[ファイル] - [ユーザー設定] - [設定]
設定画面が開いたら、画面上部に ユーザー と ワークスペース の切り替えがあるので [ワークスペース] を選択
設定リストの中から [拡張機能] - [Markdown] を選択
この中に "Markdown": Styles" という設定があるので [項目の追加] をクリックし、CSSファイルのパスを入力
絶対パスは指定できないようなので、相対パス(./res/md.css など)で書くこと。

これでプレビューを開きなおせば、CSSが反映した状態で表示される。

参考

作成したcssファイル
このファイルをプロジェクトルートの /res/md.css として保存。
body {
  font-family: "游ゴシック","メイリオ";
}

p {
  text-indent: 1em;
}

h2, h3 {
  margin-top: 1em;
}

-- 以上 --


Visual Stuido Code, VSCode, Markdown

0 件のコメント:

その他の記事