Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

最近では、ちょっとしたメモや手順書なども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>
shellyln
GitHub: https://github.com/shellyln NPM: https://www.npmjs.com/~shellyln blog: https://shellyln.hatenablog.com/
https://shellyln.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away