VSCode 拡張 : Markdown Preview Enhanced のスタイル設定

設定ファイルのありかと種類

設定ファイル名

機能	ファイル名
Markdown CSS 設定	`style.less`

設定ファイルの場所

OS	場所
Mac	`~/Library/"Application Support"/Code/User/`
Win	TODO

シンボリックリンクにする

設定ファイルを Git 管理できるように、別ディレクトリを指す

Mac の場合

Terminal から実行

bash
mv ~/.local/state/crossnote/style.less{,.bk}
ln -s ~/Data/dotfiles/vscode-markdown-preview-enhanced-style.less ~/.local/state/crossnote/style.less

Windows の場合

コマンドプロンプトを「管理者として実行」で開いてから実行

bat
TODO

設定例

エディタ表示に合うように文字サイズの差を減らしたり、インデントを減らしたり

styles.less 設定例

styles.less

.markdown-preview.markdown-preview {
    // font
    body, h1, h2, h3, h4, h5, p, li, td, th, summary {
        font-family: var(--markdown-font-family);
        font-size: 14px;
    }

    // heading
    h1, h2, h3, h4, h5 {
        margin-top: 0.8em;
        margin-bottom: 0.5em;
        padding: 5px 5px 3px 5px
    }
    h2 {
        background-color: #eeeeee55;
        border-bottom: 1px solid gainsboro;
    }
    h3 {
        border-bottom: 1px solid gainsboro;
    }

    // paragraph
    p {
        margin-top: 0.8em;
        margin-bottom: 0.8em;
    }

    // blockquote
    blockquote {
        margin: 0.8em 0 !important;
        padding: 0.3em 0.8em !important;
        border: 0.5px solid gainsboro;
        border-left: 4px solid gainsboro;
        border-radius: 4px;
        background-color: #eeeeee55;
    }
    blockquote > :first-child {
        margin-top: 0 !important;
    }
    blockquote > :last-child {
        margin-bottom: 0 !important;
    }

    // List
    ul {
        margin-left: 0;
        padding-left: 1.3em;
        list-style-type: disc;
    }
    ol {
        margin-left: 0;
        padding-left: 1.3em;
        list-style-position: outside;
    }
    ol,
    ol ol,
    ol ol ol {
        list-style-type: decimal;
    }
    > ul,
    body > ul {
        padding-left: 1.0em;
    }
    > ol,
    body > ol {
        padding-left: 1.0em;
    }
    li.task-list-item,
    li.contains-task-list {
        list-style-type: none;
        margin-left: 0;
    }
    li.task-list-item input[type="checkbox"],
    li.contains-task-list input[type="checkbox"],
    input.task-list-item-checkbox {
        margin: 0 0.35em 0 -1.15em;
        vertical-align: middle;
        position: relative;
        top: -0.05em;
    }
    ol > li::marker {
        font-variant-numeric: tabular-nums;
    }

    // table
    table {
        padding: 0;
        margin: 0;
    }
    th {
        text-align: center !important;
        background-color: #eeeeee55;
        font-weight: normal;
    }
    th, tr, td {
        padding: 0.1em 0.8em 0.1em 0.8em;
    }
    th, td {
        white-space: nowrap;
    }

    // code block / inline code
    code { // inline code
        font-family: 'MS Gothic', 'Cica';
        font-size: 15px;
        background-color: #eeeeee55;
    }
    pre { // code block
        background-color: #eeeeee55;
        border-radius: 6px;
        padding: 0.5em 0.6em 0.5em 0.6em;
        //        up    right  down  left
    }
    li > pre {
        margin-top: 0.2em;
        margin-bottom: 0.4em;
    }
    pre code { // code block
        font-family: 'Consolas', 'Cica';
        font-size: 15px;
        background-color: transparent;
    }

    // hr
    hr {
        border: none;
        height: 2px;
        background-color: lightsteelblue;
        margin: 3em 5%;
    }

    // link
    a {
        text-decoration: underline;
    }
    a:hover {
        text-decoration: underline;
    }

    // highlight
    mark {
        background-color: #ffff0077;
    }

    // summary, detail
    details {
        margin: 0.8em 0 !important;
        padding: 0.3em 0.8em !important;
        border: 1px solid gainsboro;
        border-radius: 6px;
        background-color: #eeeeee55;

        summary {
            color: teal;
            cursor: pointer;
        }

        > summary + * {
            padding-top: 1em;
        }
    }

    // Mermaid
    .mermaid {
        font-family: 'MS Gothic', var(--markdown-font-family);
        font-size: 11px !important;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .mermaid svg,
    .mermaid text,
    .mermaid .label,
    .mermaid .label foreignObject,
    .mermaid .label foreignObject *,
    .mermaid .nodeLabel,
    .mermaid .nodeLabel *,
    .mermaid .edgeLabel,
    .mermaid .edgeLabel * {
        font-family: inherit !important;
        font-size: inherit !important;
    }
}