説明
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
お勧め
has_category（2012年1月17日 更新）
bool has_category( [ mixed $category = '' [ , mixed $post = null ] ] )
投稿記事がカテゴリーに属しているか調べる。
comments_template（2018年5月27日 更新）
void comments_template( string $file = '/comments.php' , bool $separate_comments = false )
投稿ページ（post）または単一ページ（page）のコメント情報を取得し、コメント表示・投稿用のテンプレートファイルを読み込んで表示する。
is_taxonomy_hierarchical（2018年5月27日 更新）
bool is_taxonomy_hierarchical( string $taxonomy )
タクソノミーに階層（親子）関係があるか調べる。
send_confirmation_on_profile_email（2018年5月27日 更新）
void send_confirmation_on_profile_email()
メールアドレス変更を確認するメールを送信する。
get_the_modified_time（2023年9月20日 更新）
string | int | false get_the_modified_time( [ string $format = '' [ , int | WP_Post $post = null ] ] )
パラメータ$formatで指定したフォーマットで投稿の更新時刻を取得する。