[VSCode]MarkDownCSS CMD風

エディター
2021.08.01

私のサイトに来てくれる方の大半がMarkDownのスタイル設定を調べに来ているので
サンプル的にスタイル設定をお見せするのもアリかなと思い今回の記事を投稿しました

スタイルの設定方法はこちらをご覧ください↓

[VSCode]Markdown PreviewをCSSで読みやすくする方法 part2
VSCodeのMarkdownPreviewって、便利だけどちょっと読みにくい時ってありますよね。見出しとか見分けがつかなかったりします。Markdownにスタイル（css）を適用して視認性を上げることで、より作業を効率化してみてはいかがで...
habataki-blog.com

ページのトップで表示しているスタイルが今回のサンプルになります
コマンドプロンプト風にしてみました下線は何となく追加してます

設定したスタイルコード（CSS）

早速スタイルのコードはこちらです↓


/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */ 

.mume.markdown-preview {
  background-color: rgb(30,30,30);
}

.markdown-preview.markdown-preview {
  * {
    color: lawngreen;
  }

  p {
    font-family:'Courier New', Courier, monospace;
    font-weight: bold;
  }

  h1 {
    padding: 0.1em 0em;
    border-bottom: solid 1px grey;
    &:before {
      content: 'H1> ';
    }
  }
  h2 {
    padding: 0.1em 0em;
    border-bottom: solid 1px grey;
    &:before {
      content: 'H2> ';
    }
  }
  h3 {
    padding: 0.1em 0em;
    border-bottom: solid 1px grey;
    &:before {
      content: 'H3> ';
    }
  }
  h4 {
    padding: 0.1em 0em;
    border-bottom: solid 1px grey;
    &:before {
      content: 'H4> ';
    }
  }
  h5 {
    padding: 0.1em 0em;
    border-bottom: solid 1px grey;
    &:before {
      content: 'H5> ';
    }
  }
  h6 {
    padding: 0.1em 0em;
    border-bottom: solid 1px grey;
    &:before {
      content: 'H6> ';
    }
  }

  // modify your style here
  // eg: background-color: blue;  
}

ポイントその１　メインの背景色を設定できる

.mume.markdown-preview {
  background-color: rgb(30,30,30);
}

マークダウンプレビューでは mume.markdown-preview というclassが設定されている
divタグがベースになっています
なので、背景色を設定する場合は上記のようにすれば可能です

最初は body {} で書いてたんですけどね。。全然効きませんでした！

はい、サクサクいきましょ

ポイントその２　段落部分の文章は<p>タグ

これは一般的なのかな？
私は最初わからず。。。下記の要領で設定できました

  p {
    font-family:'Courier New', Courier, monospace;
    font-weight: bold;
  }

ポイントその３　:before も使える

疑似要素である:beforeも使えるので、加飾の幅が広がりますね
今回はコマンドプロンプト風を目指したので、「＞」を頭に入れました
また、見出し階層をわかりやすくするためにフォルダっぽく「H１＞」という感じにしてみました

  h1 {
    padding: 0.1em 0em;
    border-bottom: solid 1px grey;
    &:before {
      content: 'H1> ';
    }
  }

今回は以上！

また思いついたら投稿しますー

ではでは！