WordPress で marked.js を使ってみる

「Markdown 記法が便利らしい」…今更感がすごいものの、本サイトでも Markdown を試用してみようと思い立ちました。 機能実装のためにテーマを編集するのは作法に反するのでプラグインでなんとかやってみようと思います。 ### Jetpack を試してみる [Jetpack](https://ja.wordpress.org/plugins/jetpack/)も Markdown 変換機能があるらしいとの事で、「執筆」>「作成」>「プレーンテキストの Markdown 構文で投稿やページに書き込み」にチェックを入れた上で、 Markdown で記事を書いてみたところ・・・ HTML に変換された状態で記事が保存されてしまいます。悪くはない、悪くはないけど、なんとなくそうではない。 ### marked.js を使ってみる 表示だけ変換しようと思ったら、そうですね、 JavaScript の方が適当ですねと、ライブラリを探してみると、[marked.js](https://github.com/markedjs/marked)が良さそうだったので、いざ実装。 することは <script> タグでライブラリを読み込み、範囲を定義するだけのことなので、汎用的に実現できるプラグインを使用しました。 1. [CSS and JS Enqueuer](https://wordpress.org/support/plugin/css-and-js-enqueuer/) をインストール・有効化 1. 「外観」>「CSS, JS 読込」から設定画面へ 1. 「JS 読込」に marked.js の CDN を参照するよう記述 ` handle=js&src=//cdnjs.cloudflare.com/ajax/libs/marked/0.7.0/marked.min.js&deps=marked&ver=&in_footer=true ` 1. 「JS 拡張」に記述 “` var targetElements = document.getElementsByClassName( ‘entry-content’ ); for (i = 0; i < targetElements.length; i++) { targetElements[ i ].innerHTML = marked( targetElements[ i ].innerHTML ); } ``` ※[Twenty Nineteen](https://ja.wordpress.org/themes/twentynineteen/)テーマを使っているので、対象となる class 要素は `.entry-content` です。 1. 「wptexturize 無効化」にチェックして更新 ※チェックしないと <pre><code> を記述する際に用いるバッククオートの連続がダブルクオートに自動変換されてしまいます。