htmlタグからのCrayon Syntax Highligherの使い方

プログラムのコードをブログに掲載するときSyntax Highlight系のプラグインはとても便利ですよね。以前はwp-syntaxというプラグインを使っていましたが、かなり前から更新が途絶えているようだったので、Crayon Syntax Higlighterというプラグインに乗り換えました。

よく紹介されている Crayon Syntax Higlighter の使い方
HTML編集のプロバディに入力したい！
preタグ入力する場合の注意点
まとめ

よく紹介されている Crayon Syntax Higlighter の使い方

WordPressのプラグインからCrayon Syntax Higlighterを導入して使い方をネットで調べてみると、投稿エディタからコード入力のフォームを呼び出して使うというものでした。

しかし最近、wordpressの投稿エディタがGutenberg（グーテンベルグ）という新しいシステムに代わり、Crayon Syntax Higlighterが使いにくくなっているという記事も多くありました。

HTML編集のプロバディに入力したい！

Crayon Syntax Higlighterのヘルプを見てみると(英語)入力フォームの他にもいくつかの使い方があるようでしたが、作者が推奨している方法はHTMLのpreタグでコードを囲う方法でした。

プロバディの指定はpreタグのclass要素に記入するようです。使い方の例としては下記の通り

<pre class=”lang:vb theme:cg-cookie start-line:8″>vbのコードを記述する </pre>

Public Function GetAge(ByVal Birthday As Date, ByVal Hiduke As Date) As Long
    GetAge = DateDiff("yyyy", Birthday, Hiduke) + _
             (Format(Birthday, "mm/dd") > Format(Hiduke, "mm/dd"))
End Function

preタグ入力する場合の注意点

投稿エディタ GutenbergではHTML編集を指定してpreタグを入力
class要素に記入する場合は、lang:html　のようにコロンを使用する
プロバディを複数指定する場合は半角スペースで区切る
余計な部分に半角スペースを入れない（例　〇lang:html ×lang: html）

まとめ

多くのブログサイトで紹介されているCrayon Syntax Higlighter の使い方は、投稿エディタから専用の入力フォームを呼び出して利用するものですが、新しい投稿エディタ Gutenberg（グーテンベルグ）では、 Crayon Syntax Higlighter 専用の入力フォームを呼び出すボタンが表示されないので不便です。

しかし、Gutenberg（グーテンベルグ）のHTML編集で下記のように直接preタグを書き込んでしまえば簡単です。

<pre class=”lang:vb theme:cg-cookie start-line:8″>コード記述 </pre>