markdown-preview-enhancedが変わりました

markdown-preview-enhanced

以前、ブログで紹介したmarkdown-preview-enhancedが、updateして変わりました。

大きな変更で、@importとコードブロックの仕様が変わっています。

特に、コードブロックに関しては、今までの使い方によっては既存のファイルの修正が必要になるので、注意が必要です。

互換性の問題がありますが、個人的には@importの機能強化で使いやすくなったという印象です。

.jpeg(.jpg), .gif, .png, .apng, .svg, .bmp file will be treated as markdown image.
- 図としてpreview画面に表示する
.csv file will be converted to markdown table.
- テーブルとしてpreview画面に表示する
.mermaid file will be rendered by mermaid.
- 図としてpreview画面に表示する
.dot file will be rendered by viz.js (graphviz).
- 図としてpreview画面に表示する
.plantuml(.puml) file will be rendered by PlantUML.
- 図としてpreview画面に表示する
.wavedrom file will be rendered by wavedrom.
- 図としてpreview画面に表示する
.html file will be embeded directly.
- preview画面に埋め込む
.js file will be evalued in window scope. It behaves similarly as the <script>.. js code ..</script> tag.
- \<script>として埋め込む
.less and .css file will be included as style. Only local less file is currently supported.
- スタイルを適用する
.pdf file will be converted to svg files by pdf2svg and then be included.;
- 図としてpreview画面に表示する
markdown file will be parsed and embeded directly.
- preview画面に埋め込む
All other files will be rendered as code block.

埋め込みがサポートされているファイルのリストで、今回追加になったのはPDFのみ。

他は、元々markdownに埋め込むことができた。

更に、gfm形式として保存する機能があるので、githubなどにアップするときには重宝する。

@import "test.dot" {code_block: true}
@import "test.dot"

Import file as Code Chunk
- Code Chunk
- pythonとかのコードを貼り付けて、preview画面でrunボタンをクリックすると実行結果を貼り付けてくれる機能は以前からあったが、これを@importでソースコードを読み込むことで、実現できるようになった

コードブロックを表示するため、gfm標準コードブロック書式がサポートされなくなった
- 以前は、"Use standard code fencing for graphs"をオフにするとgfm標準書式で図には変換せずにコードブロックを表示できたが、オプションが廃止され、以下の記述が必須になった

x ```puml -> o ```puml {.code-block}

x ```@puml -> o ```puml

今後は、プロトタイピングは、previewしながらインラインコードブロック内でgraphvizやPlantUMLのコードを書いて、完成したら@importで別ファイルから読み込んで、再利用性を高めるのがよさそうです。

こちらの記事もどうぞ。