最近では、ちょっとしたメモや手順書などもMarkdownで書くことが多いかと思います。
自分のPCでは、Visual Studio Codeを愛用しているのですが、
アプリのインストール、ネット上のサービスでの編集・閲覧が憚られるマシンでの作業でもMarkdownをプレビューしながらの編集ができないかと考えました。
今回、拙作の Ménneu というライブラリーを使用します。
Ménneuは動的ドキュメントの生成を行うCLIアプリです。Markdownからhtmlへの変換も可能です。PuppeteerによるPDF化・画像化も行えます。
通常はnpmからグローバルインストールして使用しますが、今回はブラウザー用のビルドを使用し、APIから利用します。
以下の方法でメモ帳とモダンブラウザーのみで、Markdownをプレビューしながらの編集ができます。
本当にインストール・ネット接続が憚られるマシンにはGUIが動いていないし、動いていてもIEしか入っていない(Windows Serverの場合)ですね。
手順
-
menneu.min.jsをダウンロードします。 - 以下のコードを
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();
});
-
menneu.min.js、app.jsをjs/サブフォルダーに保存します。 - 以下の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
- 作成したhtmlをモダンブラウザーで開きます。
- テキストを編集したら、F5で更新します。
- ~~Firefox・~~Edgeでは、リロードで表示更新できません。
Firefoxでは、アドレスバーにEnterを入力するか、Alt + ←ショートカットで前のページに戻ってください。- Edgeでは、アドレスバーに
Enterを入力してください。 -
document.write()でページ全体を書き換えた時点でアドレスバーの表示とは別のページに遷移している、という扱いです。
- Firefoxは、下記「追記(2018/9/28)」のhtmlであれば、
F5で更新できます。
- ~~Firefox・~~Edgeでは、リロードで表示更新できません。
- 「形式：ウェブページ、完全」にて別名で保存すると、htmlに変換されて保存されます。
注意
-
scriptタグ内に書いているので、scriptの閉じタグは</script>とエスケープする必要があります。- コードブロックでは
<がそのまま出力されるので、</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>