tmori3y2のブログ

主にWindowsのプログラムなど

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

markdown-preview-enhanced

tmori3y2.hatenablog.com

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

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

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

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

Supported file types

  • .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による外部ファイルの取り込み強化

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

画像のサイズ等を指定できるようになった

ローカルファイル以外を指定できるようになった

PDFをSVGに変換して埋め込むことが出来るようになった (ページ指定/ページ範囲指定可能)

コードブロックとして読み込み、行番号も表示できるようになった

  • Force to render Code Block
  • 個人的には、これが一押し
    • graphvizやPlantUMLのTipsの元になるファイルを作って、コードブロックの表示と図の表示を2行で書ける
@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で別ファイルから読み込んで、再利用性を高めるのがよさそうです。