この記事は最後に更新してから1年以上経過しています。
説明
VSCodeに「Markdown PDF」という拡張機能をインストールし、シーケンス図をPDFファイルとしてエクスポートした際、中間ファイルとしてHTMLファイルが生成されていた。このHTMLファイルを見た際、この仕組みはWordPressのcodeブロックでも利用できるのではと思い挑戦した。
Mermaid
Mermaidはシーケンス図やクラス図といった図表を生成するツールである。通常はMarkdown文書のコードブロックを利用しており、「Markdown PDF」が生成したHTMLファイルでは次のような内容になっていた（抜粋）。
<code class="language-mermaid"><div class="mermaid">sequenceDiagram
actor line_1 as new_lifeline
participant line_2 as new_lifeline
line_1 ->> line_2: message
</div></code></pre>
同じ内容をWordPressのcodeブロックに挿入した場合は、次のようなHTMLが生成される。
<pre class="wp-block-code"><code>sequenceDiagram
actor line_1 as new_lifeline
participant line_2 as new_lifeline
line_1 ->> line_2: message
</code></pre>
要素の構成は少し変わってしまうが、code要素のclass属性に"mermaid"を追加できれば、なんとかなりそうな雰囲気だ。幸いなことに、ブロックエディターの「高度な設定」「追加CSSクラス」に指定した内容はpre要素のclass属性に反映されるので、今回はこの仕組みを活用することにした。
render_block_core/codeフィルター
今回はcode要素のclass属性に"mermaid"を追加する方法としてrender_block_core/codeフィルターを使う。render_block_core/〇〇フィルターは、投稿データ内の〇〇ブロックがHTMLコードとして出力される前に呼び出される便利なフィルターである。
add_filter( 'render_block_core/code', 'render_block_core_code_mermaid', 10, 2 );
function render_block_core_code_mermaid( $block_content, $block ) {
$class_string = $block['attrs']['className'] ?? '';
if ( preg_match( '/\blanguage\-mermaid\b/', $class_string ) ) {
$tags = new \WP_HTML_Tag_Processor( $block_content );
if ( $tags->next_tag( 'code' ) ) {
$tags->add_class( 'mermaid' );
}
return $tags->get_updated_html();
}
return $block_content;
}
上記では、「追加CSSクラス」に'language-mermaid'が指定された際、code要素のclass属性に'mermaid'を追加している。
次にenqueue_block_assetsアクションを使ってMermaidのJavaScriptを読み込むようにする。
add_action( 'enqueue_block_assets', 'enqueue_block_assets_mermaid' );
function enqueue_block_assets_mermaid() {
wp_enqueue_script(
'unpkg-com-mermaid',
'https://unpkg.com/mermaid/dist/mermaid.min.js'
);
}
上記のURLは「Markdown PDF」がデフォルトで使用しているものになり、バージョンを記述する形式にはなるが、CDNも用意されている。
https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js上記を適用し、投稿を表示してみる。
codeブロックの部分は、編集時に入力したテキストではなく、Mermaidによって生成されたシーケンス図（SVG）に変更された。
Mermaidは今回紹介したシーケンス図のほか、ガントチャートや円グラフといった図表をサポートしている。Mermaid記法（構文）を覚える必要はあるが、独自ブロックを作ることなく、それらの図表が使えるようになるのはとても助かる。
最終更新 : 2025年03月15日 14:06
お勧め
wp_add_post_tags（2012年7月5日 更新）
mixed wp_add_post_tags( [ int $post_id = 0 [ , string $tags = '' ] ] )
投稿情報に投稿タグを追加する。
get_tags（2018年5月27日 更新）
array get_tags( [ mixed $args = '' ] )
条件を指定してタグ情報を検索し、マッチしたすべてのタグ情報を取得する。
wp_array_slice_assoc（2022年2月2日 更新）
array wp_array_slice_assoc( array $array, array $keys )
キーを指定して配列の一部を抽出する。
get_post_permalink（2022年11月6日 更新）
string | false get_post_permalink( [ int | WP_Post $id$post = 0 [ , bool $leavename = false [ , bool $sample = false ] ] ] )
カスタム投稿タイプの投稿ページのパーマリンクを取得する。
remove_query_arg（2024年3月21日 更新）
string remove_query_arg( string | string[] $key [ , bool | string $query = false ] )
クエリーURIからパラメータ（キー名=値）を削除する。