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

WordPress
スポンサーリンク

プログラムのコードをブログに掲載するとき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>

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)

テーマの指定は下記サイトが参考になります。

WordPress ソースコード装飾プラグイン Crayon Syntax Highlighter のテーマ一覧
WordPress で記事上にソースコード挿入した際に、美しく表示してくれるプラグイン Crayon Syntax Highlighter には様々なテーマが用意されています。その数は 58 種類にもなります。.toc_number {

この記事があなたのお役に立てれば幸いです。

コメント

タイトルとURLをコピーしました