WordPressには、コード(余白やタグを考慮したコードスニペットを表示する。)ブロックが用意されており、言語を設定することもできます。
コードの表示例
// 「ブロック」とは、マークアップのまとまりを
// 説明するのに使っている抽象的な用語です。
// このまとまりを一緒に組み立てると、ページの
// コンテンツまたはレイアウトを形作れます。
registerBlockType( name, settings );
<pre class="wp-block-code cs"><code>
// 「ブロック」とは、マークアップのまとまりを
// 説明するのに使っている抽象的な用語です。
// このまとまりを一緒に組み立てると、ページの
// コンテンツまたはレイアウトを形作れます。
registerBlockType( name, settings );
</code></pre>
言語の選択肢
<pre class="wp-block-code html"><code>
<select class="components-select-control__input">
<option value="">言語選択</option>
<option value="nohighlight">ハイライト表示しない</option>
<option value="plaintext">プレーンテキスト</option>
<option value="bash">Bash</option>
<option value="basic">Basic</option>
<option value="cs">C#</option>
<option value="cpp">C++</option>
<option value="css">CSS</option>
<option value="d">D</option>
<option value="dos">DOS</option>
<option value="delphi">Delphi</option>
<option value="go">Go</option>
<option value="html">HTML</option>
<option value="haml">Haml</option>
<option value="json">JSON</option>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="less">Less</option>
<option value="markdown">Markdown</option>
<option value="objectivec">Objective C</option>
<option value="php">PHP</option>
<option value="perl">Perl</option>
<option value="python">Python</option>
<option value="r">R</option>
<option value="ruby">Ruby</option>
<option value="rust">Rust</option>
<option value="scss">SCSS</option>
<option value="sql">SQL</option>
<option value="swift">Swift</option>
<option value="vbscript">VBScript</option>
<option value="xml">XML</option>
</select>
</code></pre>
でもあれ?言語を選択しただけでは、ハイライト表示されない…
WordPressデフォルトのコードブロック設定では、言語選択すると、CSSクラス名がコードブロックに追加されるだけで、コードの色は変わりません。スタイルは自分でコーディングしないといけないようです。
特定のキーワードの出現で文字色を変える、といった複雑な制御を、CSSだけで実現するのは難しいので、JavaScriptとの組み合わせが必要になってきます。だったら、ハイライト用プラグインを入れた方が早いかもしれません。
私は追加CSSに下記だけ追加しました。
/* コードブロックでは等幅フォント使用 */
body > pre.wp-block-code > code {
font-family: 'MS Gothic', 'MS ゴシック', monospace;
font-size: 9px;
}
コメント