GitHubのREADME.md風のMarkdownを実装する

必要なライブラリを読み込む 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/