自サイトにMarkdown機能を導入する(SimpleMDE&Marked.js)

この間初めてSimpleMDEを入れてみたいんですけど、とても便利だったので、以降使うとき自分で見返す用にまとめ。
JSファイルはすべてjsDelivrから読み込んでおります。

Editor : SimpleMDE
Parse : Marked.js

Add,Edit Form(SimpleMDE)

以下のコピペで導入完了

<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">  

<textarea id="MyID"></textarea>  

<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>  
<script>  
var simplemde = new SimpleMDE({ element: document.getElementById("MyID") });  
</script>

Toolbarの機能の加減やアクションなどのカスタムは以下のようにしてできます。

既存の機能をそのまま利用

var simplemde = new SimpleMDE({  
    toolbar: ["bold", "italic", "heading", "|", "quote"],  
});

アイコンなども修正

var simplemde = new SimpleMDE({  
    toolbar: [{  
            name: "bold",  
            action: SimpleMDE.toggleBold,  
            className: "fa fa-bold",  
            title: "Bold",  
        },  
        "|", // Separator  
        ...  
    ],  
});

View(Marked.js)

Documentソース的には以下のコピペで導入完了

<div id="content"></div>  

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>  
<script>  
    // 表示したい文章をマークダウン形式のまま入れる  
    var context = '# Marked in browser\n\nRendered by **marked**.';  

    // #content に内容を挿入  
    document.getElementById('content').innerHTML = marked(context);  
</script>

PHPで記入する際、保存時もしくは表示時に改行を消しておくことを推奨します。

私の場合は保存時に消してしまうと、修正時また復活させたりなどがあるため、表示する際にのみ改行を消すように設定。

// $content : DBから引っ張ってきたデータ  
var context = '<?= str_replace("\r\n", "\\n", $content)?>';

オマケ:Markdown記法

  • 強調
      **bold**  //太字 b  
      *italics*  //斜体 i  
      ~~strikethrough~~  //打消線 s  
    
  • 見出し
      # Big header  //h1  
      ## Medium header  //h2  
      ### Small header  //h3  
      #### Tiny header  //h4  
    
  • リスト

      // ul li  
      * Generic list item  
      * Generic list item  
      * Generic list item  
    
      // ol li  
      1. Numbered list item  
      2. Numbered list item  
      3. Numbered list item  
    
  • リンク
      // <a href="http://www.example.com">Text to display</a>  
      [Text to display](http://www.example.com)  
    
  • 引用
      > This is a quote.  
      > It can span multiple lines!  
    
  • テーブル
      | Column 1 | Column 2 | Column 3 |  
      | -------- | -------- | -------- |  
      | John | Doe | Male |  
      | Mary | Smith | Female |  
    
  • コード

      // 単語  
      `var example = "hello!";`  
    
      // 複数行  
      ```  
      var example = "hello!";  
      alert(example);  
      ```