WordPressには、コード（余白やタグを考慮したコードスニペットを表示する。）ブロックが用意されており、言語を設定することもできます。
コードの表示例
// 「ブロック」とは、マークアップのまとまりを
// 説明するのに使っている抽象的な用語です。
// このまとまりを一緒に組み立てると、ページの
// コンテンツまたはレイアウトを形作れます。
registerBlockType( name, settings );<pre class="wp-block-code cs"><code>
// 「ブロック」とは、マークアップのまとまりを
// 説明するのに使っている抽象的な用語です。
// このまとまりを一緒に組み立てると、ページの
// コンテンツまたはレイアウトを形作れます。
registerBlockType( name, settings );
</code></pre>言語の選択肢
でもあれ？言語を選択しただけでは、ハイライト表示されない…
WordPressデフォルトのコードブロック設定では、言語選択すると、CSSクラス名がコードブロックに追加されるだけで、コードの色は変わりません。スタイルは自分で指定する必要があります。
特定のキーワードの出現で文字色を変える、といった複雑な制御を、CSSだけで実現するのは難しいので、JavaScriptとの組み合わせが必要になってきます。だったら、ハイライト用プラグインを入れた方が早いかもしれません。
私は追加CSSに下記だけ追加し、highlight.jsを読み込むことでハイライティングを実装しました。
/* コードブロックでは等幅フォント使用 */
body > pre.wp-block-code > code {
font-family: 'MS Gothic', 'ＭＳ ゴシック', monospace;
font-size: 9px;
}
コメント