カスタムブロックの設定方法

カスタムブロック機能を利用し、投稿画面の Markdown を高機能なものへと強化することが可能です。

1. 左サイドバーの [ブロックエディタ] - [カスタムブロック] をクリックする
2. 「カスタムブロックの管理」が開いたら[新規作成]をクリックする

   

3. 「名前」項目に「Markdown」と入力する
4. 「識別子」項目に「markdown」を入力する

   

5. 「ブロック」項目に以下の内容を入力する
   • 「＋ブロックを追加」をクリックし「テキスト（複数行）」をクリックする
   • 「クラス名」項目に「source」を入力する
   • 「ブロック要素」項目は「P」を選択する
   • 「フォーマット」項目は「なし」を選択する
   • 「ラベル」、「説明」、「規定値」、は空白でかまいません

     

6. 「カスタムスクリプト」に以下のソースコードを入力する

   <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.0/marked.min.js" integrity="sha256-POA+Q3FC8tyo/jZhQrw40H5mKcWAABdxNeUQ/uhIm4U=" crossorigin="anonymous"></script>
   <script>
   document.addEventListener("DOMContentLoaded", () => {
   if (document.body.dataset.hasCompiledHtml) {
   return;
   }
   
   const source = document.querySelector(".source").innerHTML;
   MTBlockEditorSetCompiledHtml(marked(source));
   });
   </script>
   

7. 「コンテナ要素で包む」項目の「編集した内容をDIV要素で囲む」のチェックを外す
8. 「ブロックの追加と削除」項目の「ブロックの追加と削除を許可する」のチェックを外す

   

9. 「保存」ボタンをクリックする
10. 記事・ウェブページ投稿画面で「フォーマット: ブロックエディタ」を選択し「＋ブロックを追加」で「Markdown」をクリックする

    

11. Markdown 記法で入力しカーソルを外すとプレビューされ、以下画像のように表示されます。