MATLABのLiveScriptは、Jupyterのようにコードとテキストを混合記述し、それを文書として表示する技術です。MATLABにはLiveScriptをTeXファイルとしてエクスポートする機能がありますが、さらにこのTeXファイルをmarkdown形式に変換するMATLABスクリプトがgithubに公開されています。
このスクリプトをフォークし、WordPress対応機能を追加しました。これによって、LiveScriptをWordPressで公開できるようになりました。生成されたMarkdownをGutenbergエディタに張り付け、さらに少々手を加えることで以下のようにテキスト、コード、図、さらには数式までレンダリングして公開できます。
準備
WordPressにはWP QuickLaTeXをインストールしてください。調べた限りでは、このプラグインがインストールしやすく、かつ、インライン形式、ディスプレイ形式への対応も容易でした。このプラグインを入れておくことで、数式を綺麗に表示できます。
WP QuickLaTeXの設定で、Image formatを希望する形式に変更します。私の場合、これがデフォルトのままだと数式が表示されませんでした。
手順
最初にリポジトリからコードをコピーしてfunctionディレクトリの中身をMATLABのワークスペースに置きます（WordPress対応は本家のリポジトリにプル・リクエストを出しています。マージされるかもしれません）。
次に自分が公開したいLiveScriptファイルfoo.mlxをMATLABのエクスポート機能を使ってTeXとして出力します。この辺の詳細はREADME_JPを参照してください。変換後のファイル名はfoo.texです。このとき、foo_imagesというディレクトリが作られ、LiveScriptのイメージが納められます。
TeXへの変換が完了したら、次にlivescript2markdownを使ってmarkdown形式に変換します。引数としてformat=wpquicklatexとして与えます。
latex2markdown('README_JP','format','wpquicklatex','outputfilename','WplatexDraft');
上記のコマンドを実行すると、WplatexDraft.mdという名前のファイルが生成されます。あとはファイルの内容をGutenbergエディターに張り付けてください。markdownテキストがGutenbergのブロックに自動変換されます。
図形の貼り付け
次に、リンク切れになっている図形の部分に、先のfoo_imagesの中のファイルをドラッグ＆ドロップしていきます。リンク切れ部分にファイル名が表示されていますので、同じ名前のファイルをドロップしましょう。
CODEブロックの言語指定
私はシンタックス・カラーリングにEnlighterプラグインを使用していますが、現状ではこのプラグインは以下のような言語指定を無視しているようです。MATLABの指定は無視され、言語はGnerric Highlightingとなります。
```MATLAB:Code % MATLAB code x = linspace(0,2*pi,100); y = sin(x) ```
無視されているものを弄り回しても仕方ないので、言語指定はQiita形式のまま残しています。将来的にEnlighterが何らかのアクションを起こしたら、それに合わせた変更をコミットするかもしれません。
まとめ
livescript2markdownをWordPress対応に変更しました。これで手元で実験した結果を張り付けることが楽になることを期待しています。最後に、このエントリに続いてlivescript2markdownのサンプルとして同梱されているREADME_JP.mlxを変換したものを公開します。
追記：EnlighterはFenced Code BlockをGutenbergに張り付けて言語まで指定することを想定していないとのことです。数年先はわかりませんが、当面はGeneric Highlightingで我慢しておくのが合理的のようです。