JavaScriptで、MarkdownをHTMLに変換する

やること

テキストエリアに入力したMarkdown形式の文字列を、HTMLに変換する。

使用するライブラリ

markedjs

使い方

1. ライブラリを読み込む

CDNにJSファイルを置いてくださっているので、利用させて頂く。

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

2. 変換

変換自体は、marked.parse()でできてしまう。
後は、必要に応じたオプションを設定するくらい。

const before = '# 変換前';
const after = marked.parse(before);
console.log(after); // <h1>変換前</h1>

使用例

▼ Markdown入力欄<br />
<textarea id="demo_markdown_before"></textarea><br />
<input type="button" id="demo_markdown_parse" value="Markdown変換" /><br />
▼ 変換後<br />
<textarea id="demo_markdown_after"></textarea>
                    
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
    $(document)
        .on('click', '#demo_markdown_parse', function(){
            // オプション：文中の改行をbrタグに変換する
            marked.setOptions({breaks : true});

            // テキストエリアに入力されたMarkdown形式の内容をHTMLに変換
            const after = marked.parse($('#demo_markdown_before').val());

            // 変換したHTMLを、変換後テキストエリアに出力
            $('#demo_markdown_after').val(after);
        })
    ;
</script>

2022-07-15 09:00:00