Markdown→HTMLに変換したい

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

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

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

#1.マークダウンの入力時にプレビューが表示される
今回使用するのが「[SimpleMDE](https://simplemde.com/)」。
CDNのリンクを貼り、テキストボックスを設置。
そのテキストボックスに機能を付与するJSを書き加えれば簡単にプレビュー機能のあるマークダウンエディタが使用できます。

```html
<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>
```
これをコピペして貼るだけで、すぐにマークダウンエディタが使用できます。すごい！
<img width="1279" alt="test.png" src="https://qiita-image-store.s3.amazonaws.com/0/195419/4c18e405-4957-e693-ae6e-83c7db3db77e.png">

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

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

全てのオプションは[公式GitHub](https://github.com/sparksuite/simplemde-markdown-editor)に載っていますが、その中から使うかな…と思うものを抜粋して紹介します。

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

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

#2.HTMLを出力する
SimpleMDEだけでは、マークダウンをHTMLに変換できないです…。
なので、ここは[marked.js](https://github.com/markedjs/marked/blob/master/docs/USING_ADVANCED.md)を使用します！

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

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

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

```JS
var html = marked('# マークダウンだよ') // return '<h1>マークダウンだよ</h1>'
```
出力結果がhtmlに入るので、これを`$('#preview').html(html);`など任意の場所に挿入すれば、出力結果の見た目が反映できます。

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

```js
marked.setOptions({
    sanitize: true,
    sanitizer: escape,
    breaks : true
});
```
こちらのオプションについては[公式ドキュメント](https://github.com/markedjs/marked/blob/master/docs/USING_ADVANCED.md)に一覧が載っています。

#できあがったもの
ＣＳＳには[UIkit](https://getuikit.com/)を使用しています。

```html: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のクロスサイトスクリプティングに気をつけろ！](http://note.crohaco.net/2018/markdown-xss/)（2018.08.06）
こちらのサイトでコピペできるものが載っているので、参考にすると良いと思います。

#参考サイト
[Webサイトにマークダウンエディタを組み込みたい。そうだ！「SimpleMDE」を使おう！
](http://unitopi.com/markdown-editor/)（2016.04.12）
[JSでmarkdownからカスタマイズしたHTMLを生成する
](https://techblog.raccoon.ne.jp/archives/53498753.html)（2018.05.16）