開発メモ その151 Visual Studio CodeのMarkdown機能を強化

Introduction

仕事ではVisual Studio Codeを使ってMarkdownを書いています。拡張機能のmarkdown-pdfにはお世話になっております。

最近、mermaidというガントチャートやフローチャートをテキストで記述できるライブラリが気になっており、これがVisual Studio Codeで使えると聞いて興奮しています。
しかし、markdown-pdfがこれに対応していません。

では、これに対応しているpdf変換というと、Markdown Preview EnhancedというAtomでも有名な拡張になります。

shd101wyy.github.io

Markdown Preview Enhanced

https://shd101wyy.github.io/markdown-preview-enhanced/#/

Description

しかし、これはこれで結構癖があります。
PDF出力に5種類の方法がありますが、これがまぁ微妙。

• Chrome (Puppetter)
  • 一番まとも。ただし、Nodejsのインストールが必要。結果はHTML化してChromeからPDF化したのと変わらない感じ。
• phantomjs
  • 開発が終了している。出力結果はそこそこ。
• prince
  • 商用利用不可。また結果は微妙。有償の価値はない。
• eBook
  • ためしてない
• pandoc
  • cssを指定しても微妙。mermaidの結果は解釈できていない。

あと、

• Alt textの解釈がおかしい
• h1タグの直下に水平線が表示されない
• コードハイライトの背景が白くなる
  • これは印刷オプションで背景を印刷しない、にしていることが要因
• コードハイライトのブロックに境界線がない
• 表の形式が古くさい
  • ただ、Githubも表の4隅の境界線がある。違いは1行おきに背景色が変化するところ。

が気になった問題。

良い点として、

• 見出しのフォントが適度に太字
• mermaidが使える
• 改行するのに末尾に空白が不要

があります。

何はともあれ、気になった点を改善していきます。

Resolution

Alt text の解釈

諦める。使わなければ良い。仕事で使ったことはないからOK。

h1に水平線が表示されない

これはMarkdown Preview Enahancedのcssを修正することで対応。
Ctrl + Shift + Pを押下し、Markdown Preview Enhanced: Customize Cssを開きます。
そして下記のように修正を行います。

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

+  h1 {
+   padding-bottom: 0.3em;
+   line-height: 1.2;
+   border-bottom-width: 1px;
+   border-bottom-style: solid;
+  }
}

コードハイライトの背景が白くなる

前述の通り、印刷設定で背景が描画されないのが問題である。
対処として、PDFに出力するのではなく、htmlに出力し、ChromeでPDFに出力する際、背景を出力するようにすればOK

コードハイライトのブロックに境界線がない

これもMarkdown Preview Enahancedのcssを修正することで対応。
Ctrl + Shift + Pを押下し、Markdown Preview Enhanced: Customize Cssを開きます。
そして下記のように修正を行います。

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

  h1 {
    padding-bottom: 0.3em;
    line-height: 1.2;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    }

+    pre[class*="language-"] {
+     border: 1px solid #ddd;
+    }
}

Conclusion

片方だけを使うというのは駄目かな。しばらくは両方使っていきます。