Visual Studio CodeのMarkdownプレビューにCSSを適用する

本記事は旧ブログより引っ越した記事です。元の記事は2020年8月17日に作成したものなので、情報が古くなっている可能性があります。

本記事では、Visual Studio CodeでMarkdownをプレビューする際に、見やすくするためCSSを設定する方法を書きます。

記事の最後にサンプルCSSも公開します。このブログと同じようなスタイルが適用されます。

Markdown記法はこちらの参考文献で学びました。基礎からカバーされており、とりあえずこれを読んでおけばMarkdownの基本はばっちりでしょう。

ワークスペースを準備する

CSSの適用はセキュリティの観点からワークスペース内に限定されています。

ワークスペースはVisual Studio Codeでコーディングをする際の一区切りで、ワークスペース≒フォルダだと思っておいてよいと思います。

ワークスペースを開くスクリーンショット

今回は適当にDドライブ直下にMarkdownというフォルダを作成し、ワークスペースに設定しました。

このフォルダ以下に配置されるマークダウンファイルにCSSを適用することができます。

例えば、このフォルダの下にさらにフォルダを作って、その中にマークダウンファイルがあったとしても、CSSを適用可能です。

ファイル作成のスクリーンショット

下の図の赤線で引かれている部分に、自分が作成したフォルダの名前が表示されることを確認してください。

続いて、新しいファイルボタンから新規ファイルを作成し、sample.mdという名前で保存します。ファイル名は任意ですが、拡張子はマークダウンを表す.mdにしておいてください。

作成したファイルに適当にマークダウンを記述します。マークダウン記法については前述の参考文献を購入したり、Google検索したりしてください。

サンプルファイル作成のスクリーンショット

記述が終わったら、ショートカットキーCtrl+K→Vによってマークダウンのプレビューを見ることができます。CtrlキーとKキーを同時押しし、そのあとVキーのみを押します。入力モードが全角になっているとうまくいかないかもしれません。

下のスクショのように、画面がに分割され、左にマークダウン、右にプレビューが表示されます。

魔0区ダウンプレビューのスクリーンショット

このプレビューがあまり見やすくないため、次からCSSを適用することにより見やすくする方法を説明したいと思います。

CSSファイルの設定方法

ワークスペースとなっているフォルダの直下に*.cssファイルを作ります。

名前は何でもよいですが、style.cssというファイルを作成しました。

style.cssというファイルを作るスクリーンショット

このファイルにCSSを記述していけば、プレビューの見た目を変更することができます。

とりあえず、後述のサンプルCSSをコピペしておきました。

続いて、Visual Studio CodeにそのCSSを読み込ませる設定を行います。

F1キーを押し、workspaceなどと検索し、 基本設定：ワークスペース設定を開く(JSON) をクリックします。

基本設定：ワークスペース設定を開く(JSON)スクリーンショット

開いたjsonファイルを以下のように書き換えます。

{
    "markdown.styles": ["style.css"]
}

ワークスペースの設定には、JSONでない方法もあります。その場合、【設定】というタブが開くので、上にある検索窓に、markdown styleなどと打ち込み、Markdown: Stylesを探します。項目の追加と書かれたボタンを押し、style.cssと書き込めば設定できるはずです。

下のスクショのように、プレビューに対してCSSが適用されたことがわかると思います。

vscodeでCSSが適用されたプレビュー

サンプルCSS

サンプルのCSSをMITライセンスで公開します。一番上の条文を消さなければ、基本的にコピペOKです。

/* MIT LICENSE
Copyright (c) 2020 hachian
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

/*//////////////////////////////////////////////*/
/* common */
/*//////////////////////////////////////////////*/

body {
  background-color: #e5e8e8;
  color: #1b1b1b;
}

/*//////////////////////////////////////////////*/
/* title */
/*//////////////////////////////////////////////*/

h1 {
  font-size: 36px;
  font-weight: bold;
  padding: 20px 0;
}
h2 {
  font-size: 22px;
  font-weight: bold;
  background-color: #33ad9d;
  color: #e5e8e8;
  padding: 10px 15px;
  border-radius: 5px;
  margin: 40px 0 10px;
}
h3 {
  font-size: 22px;
  font-weight: bold;
  border-bottom: 3px solid #33ad9d;
  margin: 40px 0 10px;
}
h4 {
  font-size: 18px;
  font-weight: bold;
  border-left: 3px solid #33ad9d;
  margin: 40px 0 10px;
  padding: 0 0 0 10px;
}
h5 {
  font-size: 16px;
  margin: 40px 0 10px;
  font-weight: bold;
}

/*//////////////////////////////////////////////*/
/* tags */
/*//////////////////////////////////////////////*/

hr {
  height: 1px;
  background-color: #b8bfbe;
  margin: 20px 0;
}
em {
  background: linear-gradient(transparent 80%, #e7ff46 80%);
  padding: 0 5px;
  font-style: normal;
}
strong {
  background: linear-gradient(transparent 0%, #e7ff46 0%);
  padding: 0 5px;
  border-radius: 5px;
}
p code,
li code,
td code {
  font-family: "Consolas", "Courier New", monospace;
  background-color: #d0d8d7;
  font-size: 90%;
  font-style: normal;
  padding: 0 5px;
  border-radius: 3px;
  color: #1b1b1b;
}
pre {
  background-color: #272b2b !important;
}

/*//////////////////////////////////////////////*/
/* list */
/*//////////////////////////////////////////////*/

ul,
ol {
  padding: 0 0 0.5em 1.5em;
}
ul > li,
ol > li {
  position: relative;
  list-style: none;
  margin: 5px 0;
}
ul > li::after {
  display: block;
  content: "";
  position: absolute;
  top: 0.5em;
  left: -1em;
  width: 6px;
  height: 6px;
  background-color: #33ad9d;
  border-radius: 100%;
}
ul ul li::after {
  display: block;
  content: "";
  position: absolute;
  top: 0.75em;
  left: -1em;
  width: 6px;
  height: 2px;
  background-color: #33ad9d;
}
ul ul ul li::after {
  display: block;
  content: "";
  position: absolute;
  top: 0.5em;
  left: -1em;
  width: 6px;
  height: 6px;
  border-right: 2px solid #33ad9d;
  border-bottom: 2px solid #33ad9d;
  background-color: inherit;
  border-radius: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/* arrow */
ul.arrow > li::after {
  display: block;
  content: "";
  position: absolute;
  top: 0.5em;
  left: -1em;
  width: 6px;
  height: 6px;
  border-right: 2px solid #33ad9d;
  border-bottom: 2px solid #33ad9d;
  background-color: inherit;
  border-radius: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* check */
ul.check > li::after {
  display: block;
  content: "";
  position: absolute;
  top: 0.5em;
  left: -1em;
  width: 8px;
  height: 3px;
  border-left: 2px solid #33ad9d;
  border-bottom: 2px solid #33ad9d;
  background-color: inherit;
  border-radius: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* ol */
ol > li { 
  counter-increment: li;
}
ol > li::before {
  content: counter(li);
  display: block;
  position: absolute;
  top: .3em;
  left: -1em;
  color: #33ad9d;
  font-size: 14px;
  line-height: 1;
  font-weight: bold;
}

/*//////////////////////////////////////////////*/
/* table */
/*//////////////////////////////////////////////*/

table {
  border-collapse: collapse;
  border: 1px solid #b7bdbc !important;
  line-height: 1.5;
  margin: 10px 0;
  width: 100%;
}
table th {
  padding: 10px;
  font-size: 12px;
  font-weight: bold;
  vertical-align: top;
  text-align: left;
  background: #c6cbca;
  border: 1px solid #b7bdbc !important;
}
table td {
  font-size: 12px;
  padding: 10px;
  vertical-align: top;
  border: 1px solid #b7bdbc !important;
}

/* stripe */
table.stripe tr:nth-child(even) {
  background: #dcdfdf;
}

/* dark th */
table.dark th {
  color: #e5e8e8;
  background: #272b2b;
}

/*//////////////////////////////////////////////*/
/* box */
/*//////////////////////////////////////////////*/

.box_gray {
  background: #dcdfdf;
  border: 2px solid #b8bfbe;
  border-radius: 10px;
  margin: 20px 0;
  padding: 1em;
}

.box_pink {
  background: #e7d5d5;
  border: 2px solid #d47e7e;
  border-radius: 10px;
  margin: 20px 0;
  padding: 1em;
}

.box_pink ul, .box_pink ol {
  padding: 0 0 0 1.5em;
}
.box_pink ol > li::before {
  content: counter(li);
  display: block;
  position: absolute;
  top: .3em;
  left: -1em;
  color: #d47e7e;
  line-height: 1;
  font-weight: bold;
}
.box_pink ul > li::after {
  display: block;
  content: "";
  position: absolute;
  top: 0.5em;
  left: -1em;
  width: 6px;
  height: 6px;
  background-color: #d47e7e;
  border-radius: 100%;
}

.box_gray ul, .box_gray ol {
  padding: 0 0 0 1.5em;
}
.box_gray ol > li::before {
  content: counter(li);
  display: block;
  position: absolute;
  top: .3em;
  left: -1em;
  color: #b8bfbe;
  line-height: 1;
  font-weight: bold;
}
.box_gray ul > li::after {
  display: block;
  content: "";
  position: absolute;
  top: 0.5em;
  left: -1em;
  width: 6px;
  height: 6px;
  background-color: #b8bfbe;
  border-radius: 100%;
}