Go to Qiita Advent Calendar 2024 Top
LoginSignup
84
78

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

qnoteAdvent Calendar 2018

Day 4
@_carbonara_(かるぼなーら)in株式会社qnote

Markdown→HTMLに変換したい

Last updated at Posted at 2018-12-03

#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
});

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

#できあがったもの
ＣＳＳには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）

84
78
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
84
78

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?