Skip to main content

スタイル. markdown. プレビュー画面（デフォルトの）. 表示カスタマイズ

やりたいこと​

  • Markdown Preview の表示カスタマイズしたい
  • h1, h2, .. に背景色をうっすらつけたい
  • h1, h2, .. の文字サイズを大きすぎないサイズにしたい

問題点​

  • 拡張機能の Markdown Preview Enhanced が使えない環境だ
    • バージョン問題か、セキュリティ設定の問題か
    • 使えるなら そっちに移行したほうが何かと便利
  • デフォルトのプレビューの設定はぐぐると
    • markdown.styles 項目の設定方法が見つかるが
    • css ファイルの置き場所が VSCode を開いている ディレクトリ内でないと読めないとか
    • ~ 直下ならいけるという話も見つかったが、試してうまく行ってない

解決方法​

  • 直下に本体にある設定ファイルをいじってしまった (乱暴)
    • C:\Program Files\Microsoft VS Code\resources\app\extensions\markdown-language-features\media\markdown.css
  • Mac 版の(またはバージョン違いの) このファイルがどこにあるか不明だが、Mac では Markdown Preview Enhanced 使えているからまあいいか
css
body {
    font-family: Consolas, MS Gothic;
    font-size: 12px;
    line-height: 20px;
}
code {
    font-family: Consolas, MS Gothic;
    font-size: 12px;
    line-height: 16px;
}
.vscode-light pre {
    background-color: whitesmoke;
    margin-left: 10px;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 12px;
    font-weight: bold;
}
h1 {
    color: gray;
}
h2 {
    background-color: whitesmoke;
    padding: 2px 6px;
    border-bottom: solid 1px lightgray;
}
h3 {
    border-bottom: solid 1px lightgray;
}
table, tr, td {
    border: 1px solid lightgray im !important;
}
table > thead > tr > th {
    text-align: center !important;
    border: 1px solid lightgray i !important;
    background-color: #fdfdfd;
    font-weight: normal;
}
ul, ol {
    margin-bottom: 10px;
}
li {
    margin-bottom: 3px;
}
Last updated on