【VSCode】MarkDownCSS CMD風

vscode

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

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

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

スポンサーリンク

設定したスタイルコード(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;  
}

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

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

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

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

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

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

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

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

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

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

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

今回は以上!

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

ではでは!