MarkdownをMarkdown Preview Enhancedでいい感じのHTMLにする

はじめに

MarkdownをVS Codeの拡張機能のMarkdown Preview Enhancedで簡単にいい感じのHTMLにする方法を説明します。

Markdownの書き方の情報は多いですが、Markdownはそのままでは開けないため、実際にはHTMLなどに変換する必要がありますが、「変換」の情報が少ないので調べてまとめました。

Pandocでも同じ事が出来ます。

Markdown Preview Enhanced

Markdownをいい感じにプレビューしたり、図表を表示できるVS Codeの拡張機能です。

使い方

CSSを作成してHTMLにします。

ディレクトリ

ディレクトリを作成しておきます。

dir
└─docs
        file.md

CSSファイルの作成

1. Ctrl-Shift-p を押す。

2. Command PaletteにMarkdown Preview Enhanced: Customize CSSを入力する。

3. Markdown Preview Enhanced: Customize CSS (WorkSpace) をクリックする。
   

4. .crossnoteディレクトリとstyle.lessなどのファイルが生成されます。

dir
├─.crossnote  ←  生成されたディレクトリ
│      config.js
│      head.html
│      parser.js
│      style.less
│
└─docs
        file.md

style.lessにcssを書く

動作確認用のcssを作成します。
.markdown-preview.markdown-preview {}の中にcssを書きます。

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

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;

  h1 {
    color: red;
  }
}

プレビューをする

右クリックしてMarkdown Preview Enhanced: Open Preview to the Sideをクリックします。

プレビューが表示されます。
h1が赤色になっています。

htmlに変換する

プレビュー画面で右クリック→Export→HTML→HTML (offlilne)をクリックします。

htmlが生成されます。

dir
├─.crossnote
│      config.js
│      head.html
│      parser.js
│      style.less
│
└─docs
        file.md
        file.html  ← 生成されたHTMLファイル

おまけ - AIでCSSを作成する -

CSSを自分で作るのは大変なので、AIで適当に作成させます。

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

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;

  font-family: "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.8;
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
  color: #333;

  /* h1〜h3 のデザイン */
  h1 {
    font-size: 2em;
    border-bottom: 3px solid #4a90e2;
    padding-bottom: 6px;
    margin-top: 2em;
    color: #2c3e50;
  }

  h2 {
    font-size: 1.6em;
    border-left: 6px solid #4a90e2;
    padding-left: 10px;
    margin-top: 2em;
    color: #34495e;
  }

  h3 {
    font-size: 1.3em;
    margin-top: 1.5em;
    color: #4a4a4a;
  }

  /* 段落 */
  p {
    margin: 1em 0;
  }

  /* 箇条書き */
  ul,
  ol {
    margin: 1em 0 1em 1.5em;
  }

  /* コードブロック */
  pre {
    background: #f7f7f7;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    border: 1px solid #ddd;
  }

  code {
    background: #f0f0f0;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: "Consolas", "Menlo", monospace;
  }

  /* テーブル */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
  }

  th,
  td {
    border: 1px solid #ccc;
    padding: 8px 12px;
  }

  th {
    background: #f0f4f8;
    font-weight: bold;
  }

  /* 引用 */
  blockquote {
    border-left: 4px solid #4a90e2;
    padding-left: 12px;
    color: #555;
    margin: 1.5em 0;
    background: #f9f9f9;
  }
}

生成されたhtmlファイル

まとめ

• Markdown Preview Enhancedを使えばMarkdownをHTMLに変換できる
• CSSが使えるのでいい感じのHTMLが出来る
• CSSはAIでもそれなりのものが出来るので、CSSを知らなくても何とかなる

参考

Markdown Preview Enhancedのヘルプ

CSSの編集の方法