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

Markdown→HTMLに変換したい

More than 1 year has passed since last update.

Markdownで書いたものを変換したい!

私の遊んでいるオンラインゲームのコミュニティサイトに日記機能があります。
これまた古きブログサイトのような形で、使いづらいので私は使ったことがないのですが…。
何を思ったか、マークダウンで書いたものをそのサイトの形式に変換できたら、楽に記事がかけるのでは!?と思い立ちました。

これは現在も調整中なのですが…。
その途中でマークダウン→HTMLに変換するサイトが簡単にできたので、こんなに簡単にできるよ!と紹介しようかと思います。

機能は2つ!

  1. マークダウンの入力時にプレビューが表示される
  2. HTMLを出力する

1.マークダウンの入力時にプレビューが表示される

今回使用するのが「SimpleMDE」。
CDNのリンクを貼り、テキストボックスを設置。
そのテキストボックスに機能を付与するJSを書き加えれば簡単にプレビュー機能のあるマークダウンエディタが使用できます。

<textarea id="editor" name="markdown" rows="8" cols="40"></textarea>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script>
    var simplemde = new SimpleMDE({ element: document.getElementById("editor") });
</script>

これをコピペして貼るだけで、すぐにマークダウンエディタが使用できます。すごい!
test.png

ちょっとしたカスタマイズもできる

スペルチェックができたり、テキストエリアに入力した文字を即時反映したり、ちょっとしたカスタマイズができます!

var simplemde = new SimpleMDE({
                    element: document.getElementById("editor"),
                    spellChecker: false
                });

全てのオプションは公式GitHubに載っていますが、その中から使うかな…と思うものを抜粋して紹介します。

オプション名 初期値 内容
element なし 使用するテキストエリアのDOM要素。デフォルトでは、ページ上の最初のテキストエリアになります。
forceSync false SimpleMDEで行われたテキストの変更が、元のテキストエリアに即座に保存されます。
false状態だと、テキストエリア自体に入力したテキストは反映されていませんので、フォームで送信する場合などはtrueにしましょう。
spellChecker true スペルチェッカー機能です。英語のスペルチェックになるため、日本語はことごとくエラー扱いにされます。

他にも、ブロックスタイル(**でboldになるなど)に使う文字を変更できたりするなどがあるので、公式を見るといいと思います。

2.HTMLを出力する

SimpleMDEだけでは、マークダウンをHTMLに変換できないです…。
なので、ここはmarked.jsを使用します!

marked.jsを使用するには以下の一行を追加するだけです。

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

これでmarked.jsが使用できるようになりました。
この状態でmarked();を呼べば、マークダウンを変換・HTMLで出力してくれます。

var html = marked('# マークダウンだよ') // return '<h1>マークダウンだよ</h1>'

出力結果がhtmlに入るので、これを$('#preview').html(html);など任意の場所に挿入すれば、出力結果の見た目が反映できます。

オプションが設定できる

marked.jsもオプションが設定できます。

marked.setOptions({
    sanitize: true,
    sanitizer: escape,
    breaks : true
});

こちらのオプションについては公式ドキュメントに一覧が載っています。

できあがったもの

CSSにはUIkitを使用しています。

markdown.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/uikit.min.css" />
    <!--[if lt IE 9]>
    <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="196x196" href="">
    <link rel="apple-touch-icon" sizes="152x152" href="">
</head>
<body>
    <header class="uk-container uk-container-expand uk-margin-small-top"><h1 class="uk-text-center">Markdown→HTML変換</h1></header>
    <div class="editor uk-container uk-margin-small">
        <h2>Markdownの入力フォーム</h2>
        <form id="editor-form" class="">
            <textarea id="editor" name="markdown" rows="8" cols="40"></textarea>
        </form>
        <button type="button" onclick="draw_preview()" class="uk-button uk-button-default uk-margin-auto">Preview</button>

        <h2>HTMLに変換した結果</h2>
        <div class="col-md-12 ml-auto mr-auto text-left" style="border: 3px solid #ebebeb;">
            <div class="preview" id="marked-preview"></div>
        </div>

        <h2>変換結果コピペエリア</h2>
        <textarea onclick="this.select();" id="result" class="uk-textarea" name="result" rows="8" cols="100" readonly></textarea>
    </div>
    <footer>
        <p class="uk-text-center">Copyright 2018 konightch All Rights Reserved.</p>
    </footer>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/uikit.min.js"></script>
    <script>
        var simplemde = new SimpleMDE({ element: document.getElementById("editor"), forceSync: true, spellChecker: false });
    </script>
    <script>
        marked.setOptions({
            sanitize: true,
            sanitizer: escape,
            breaks : true
        });

        function draw_preview() {
            var markdown = document.getElementById("editor").value;
            var html = marked(markdown);
            $('#marked-preview').html(html);

            $('#result').val(html);
        }
    </script>
</body>
</html>

まとめ

ほとんど自分で触ることなく、MarkdownからHTMLに変換するサイトができました!
特に、SimpleMDEはマークダウンに詳しくない人でも簡単に入力できそうなので、ちょっとしたメモ書きツールとかに導入してもいいかなと思います。

おまけ

一般に公開するシステムに組み込むなどの場合は、XSS対策をした方が万全です。
マークダウンのXSS対策に関しては、
Markdownのクロスサイトスクリプティングに気をつけろ!(2018.08.06)
こちらのサイトでコピペできるものが載っているので、参考にすると良いと思います。

参考サイト

Webサイトにマークダウンエディタを組み込みたい。そうだ!「SimpleMDE」を使おう!
(2016.04.12)
JSでmarkdownからカスタマイズしたHTMLを生成する
(2018.05.16)

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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