VS Codeの拡張機能であるMarkdown Preview Enhancedで行頭「字下げ」を入れる方法

この記事の内容について、業務や開発でお困りの場合は個別に対応できます。

目的

 VS CodeのMarkdown Preview Enhancedで行頭の字下げを行いたかったのですが、なかなか情報が見当たりませんでしたので、私のログを示します。

 マークダウンのプレビューは基本的に行頭インデントなしのパターンが多いので、結構困りませんか?私は困ったのでこれを書いてみています。さきほどまで苦戦していた!

MPEのプレビューモードから、テーマを指定する

 プレビュー画面をVS Codeから開いてください。

 その上で、Preview Theme->{指定したいモード}->{指定したいCSS}に進んでください。ここで大事なのは、指定したいCSSを覚えておくことです!(笑)

CSSの場所を突き止める

 VS Codeのインストール場所はわかりますでしょうか。私の場合は、User->.vscodeに入ってました。これはうまいことつきとめてください。

 そのあとは簡単です。

 おそらくはこの位置に入ってます。これを突き止めてください。ここまでいけば、拡張機能の保存場所まで分かっているので、そこからCSSの場所まで行きます。

 そうすると以下のようなCSSファイルがでてきます。あまり適切ではないかもですが、ここではCSSを直接編集してみます(推奨はしないですが、でもとりあえずでは十分です)。

CSSを編集する

 あとはCSSのbodyのところに以下を入れてください。

    text-indent: 2em; /* インデントを追加 */

 だいたいこんな感じになると思います。これはatom-dark.cssです。

html body {
    font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #c5c8c6;
    background-color: #1d1f21;
    overflow: initial;
    box-sizing: border-box;
    word-wrap: break-word;
    text-indent: 2em; /* インデントを追加 */
}

 ちょっと難しいのが、軽量化のために改行がなくなっているので、そこは適当にというかなんとか頑張って読んでください(笑)。以上です。

 わからないことあればコメントください!

ZIDOOKA!

この記事の内容について、対応できます

この記事に関連する技術トラブルや開発上の問題について個別対応を行っています。

個別対応は3,000円〜 内容・工数により事前にお見積りします
最後までお読みいただきありがとうございました

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

AI活用に関するポリシー

当サイトでは、記事の執筆補助にAIを活用する場合がありますが、全面的な委任は行いません。