プログラムのコードをブログに掲載するときSyntax Highlight系のプラグインはとても便利ですよね。以前はwp-syntaxというプラグインを使っていましたが、かなり前から更新が途絶えているようだったので、Crayon Syntax Higlighterというプラグインに乗り換えました。
よく紹介されている 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>
- テーマ（背景色） theme:テーマ名
- ソースコード種別の指定 lang:ソースの言語
- 行番号の開始番号 start-line:開始させる行番号（規定値は1)
- 強調表示の行番号 mark:行番号(例mark:3,5-8)
- 表示範囲の指定 range:表示させる行番号(例range:3,5-8)
テーマの指定は下記サイトが参考になります。
この記事があなたのお役に立てれば幸いです。
コメント