必要なライブラリを読み込む CDN
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <!-- <script src="./marked.min.js"></script> --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@3.0.1/github-markdown.min.css">
これをhead タグの中に書く。
HTMLを書く
<textarea id="user_markdown" name="body"> <!-- 何か初期値入れるなら入れる --> </textarea> <div id="preview" class="markdown-body"></div> <button id="previewButton" type="button">プレビュー</button>
必要最低限書く。「class="markdown-body"」の中だけ、先程追加したスタイルが適応される。
JavaScript
<script> window.addEventListener('load', function() { // プレビューのイベント追加 let user_markdown = document.getElementById('user_markdown'); document.getElementById('previewButton').addEventListener('click', function() { preview(user_markdown.value); }); }); // MarkdownをHTMLに変換 function preview(markdown) { document.getElementById('preview').innerHTML = marked.parse(markdown); } </script>
終了。後は試してみて。
参考
※1 markedjs/marked https://github.com/markedjs/marked
※2 Markdown記法 チートシート https://gist.github.com/mignonstyle/083c9e1651d7734f84c99b8cf49d57fa
※3 Github Markdown CSSを使用する方法 https://webty.jp/staffblog/production/post-1840/