JavaScript
Markdown
editor

アプリをインストールせずに、オフラインでMarkdownをhtmlに変換してみる

最近では、ちょっとしたメモや手順書などもMarkdownで書くことが多いかと思います。

自分のPCでは、Visual Studio Codeを愛用しているのですが、

アプリのインストール、ネット上のサービスでの編集・閲覧が憚られるマシンでの作業でもMarkdownをプレビューしながらの編集ができないかと考えました。

今回、拙作の Ménneu というライブラリーを使用します。

Ménneuは動的ドキュメントの生成を行うCLIアプリです。Markdownからhtmlへの変換も可能です。PuppeteerによるPDF化・画像化も行えます。

通常はnpmからグローバルインストールして使用しますが、今回はブラウザー用のビルドを使用し、APIから利用します。

以下の方法でメモ帳とモダンブラウザーのみで、Markdownをプレビューしながらの編集ができます。

本当にインストール・ネット接続が憚られるマシンにはGUIが動いていないし、動いていてもIEしか入っていない(Windows Serverの場合)ですね。


手順



  1. menneu.min.jsダウンロードします。

  2. 以下のコードを app.js として保存します。

const start = (async () => {

const buf = await menneu.render(document.getElementById('md').innerHTML, {}, {
rawInput: true,
inputFormat: 'md',
outputFormat: 'html',
title: 'Markdown example',
markdownBodyStyle: 'font-family: "Yu Gothic Medium", YuGothic, meiryo, helvetica, arial, sans-serif;',
});
document.write(buf.toString());
document.close();
});



  1. menneu.min.jsapp.jsjs/ サブフォルダーに保存します。

  2. 以下のhtmlファイルを作成します。

<!DOCTYPE html><head><meta charset="UTF-8">

<script src="js/app.js"></script>
<script src="js/menneu.min.js" async onload="start()"></script>
</head><body><h1>Please wait...</h1><script id="md" type="text/markdown">

ここにMarkdownを記述します。
# Hello!
## h2
### h3

</script></body>

以下のフォルダー構成になります。

articles/

├── js/
│ ├── app.js
│ └── menneu.min.js
├── article1.html
│ ...
└── articleN.html


  1. 作成したhtmlをモダンブラウザーで開きます。

  2. テキストを編集したら、F5で更新します。



    • Firefox・Edgeでは、リロードで表示更新できません。


      • Firefoxでは、アドレスバーにEnterを入力するか、Alt + ←ショートカットで前のページに戻ってください。

      • Edgeでは、アドレスバーにEnterを入力してください。


      • document.write()でページ全体を書き換えた時点でアドレスバーの表示とは別のページに遷移している、という扱いです。



    • Firefoxは、下記「追記(2018/9/28)」のhtmlであれば、F5で更新できます。



  3. 「形式:ウェブページ、完全」にて別名で保存すると、htmlに変換されて保存されます。


注意



  • scriptタグ内に書いているので、scriptの閉じタグは&lt;/script>とエスケープする必要があります。


    • コードブロックでは&lt;がそのまま出力されるので、</script>を表現できません。



      • code タグと実体参照を使用することはできますが、Markdownの変換時に構文解析されないので、class="language-xxx"を付けてもハイライトされません。





以上です。


追記 (2018/9/29)

validなhtmlに拘らなければ、htmlは少し短くできます。

<meta charset="UTF-8"><script id="md" type="text/markdown">

# Hello!

</script><script src="js/app.js"></script>
<script src="js/menneu.min.js" onload="start()"></script>


CDNから利用できるようになりました (2018/10/16更新)

以下のhtmlでリポジトリからファイルをダウンロードせずにお試しできます。


Notebook.html

<!DOCTYPE html><head><meta charset="UTF-8"></head><body><script type="text/markdown">

# Hello!

</script>
<script src="https://cdn.jsdelivr.net/npm/menneu-md-notebook@0.0.2/articles/js/mkd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/menneu-md-notebook@0.0.2/articles/js/menneu.min.js" onload="start({title: 'My Notebook 1'})"></script>
</body>