説明
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_print_inline_script_tag（2021年4月19日 更新）
void wp_print_inline_script_tag( string $javascript [ , array $attributes = array() ] )
インラインJavaScriptを含むscript要素を出力する。
register_rest_route（2022年8月17日 更新）
bool register_rest_route( string $namespace, string $route [ , array $args = array() [ , bool $override = false ] ] )
REST APIのルートを登録する。
wp_determine_option_autoload_value（2024年7月22日 更新）
string wp_determine_option_autoload_value( string $option, mixed $value, mixed $serialized_value, boo l |string $autoload )
自動ロードのトリガー値を取得する。
single_tag_title（2018年5月27日 更新）
string single_tag_title( [ string $prefix = '' [ , bool $display = true ] ] )
投稿タグアーカイブページの投稿タグ名を取得し、パラメータ$displayがtrueならば表示する。$displayがfalseの場合は、文字列として返す。
home_url（2023年3月31日 更新）
string home_url( [ string $path = '' [ , string $scheme = null ] ] )
現在のブログ（サイト）のホームURLを取得する。ホームURLは、管理者ページの「設定」-「一般」の「サイトのアドレス(URL)」のこと。