GutenbergでCrayon Syntax Highlighterを使う方法 ※PHP7.3でエラーの件も

ホームページ作成
スポンサーリンク/Sponsored Link

[※UPDATE] PHP7.3で正規表現の挙動が変わったため、crayon_langs.class.php がエラーを吐きます。直し方を本文末尾に記載しました。

[※UPDATE 関連プラグインであるTiny MCE Advancedがアップデートしたため、記事を全面改訂しました。

WordPress 5になり、標準エディタがGutenbergになりました。

これまで、ソースコードを記事中で掲載する時、きれいにお見せするために「Crayon Syntax Highlighter」を使ってきたのですが、

Gutenbergになって、エディターの仕様がまったく変わった余波で、
Crayon Syntax Highlighterの「<>」とか「crayon」というボタンがなくなってしまい、大変困っておりました。

しかし、ちょっとしたことでこのボタンを取り戻せるので、ご紹介します。

function is_sidebar_active($index = 1) {
	global $wp_registered_sidebars;
	
	if (is_int( $index)) :
		$index = "sidebar-$index";
	else:
    $index = sanitize_title( $index );
		foreach ( (array) $wp_registered_sidebars as $key => $value ) :
			if ( sanitize_title( $value['name'] ) == $index ) :
				$index = $key;
				break;
			endif;
		endforeach;
	endif;

 

スポンサーリンク/Sponsored Link

GutenbergでCrayon Syntax Highlighterブロックを追加する方法

1 Crayon Syntax Highlighterをインストール・有効化する

インストールがまだの方は下記より入手してください。Wordpressのプラグイン検索でも出ます。

Crayon Syntax Highlighter | WordPress.org

2 Tiny MCE Advancedをインストール・有効化する

多くの方がご利用中と思いますが、こちらも下記より入手できます。Wordpressのプラグイン検索でも出ます。

Tiny MCE Advanced | WordPress.org

3 Tiny MCE Advancedの設定を確認

Tiny MCE Advancedの設定で、CrayonのボタンがClassic Editorのメニューに入っていることを確認します。

設定→TinyMCE Advanced
Classic Editor(TinyMCE)のタブを選択して・・・

以上の設定をしないと、この続きにある「Classic Paragraph」のボタンが出ません。

4 Gutenbergで「クラシックパラグラフ」ブロックを挿入する

ブロックの追加ウィンドウにある「Classic Paragraph」

下図のような状態になります。

Classic Paragraphにカーソル移動すると、メニューボタンの中に<>のマーク。これがCrayon Syntax Highlighterのボタンです。

5 以前と同じようにCrayon Syntax Highlighterが使える

あとは、このボタンから以前と同じようにCrayon Syntax Highlighterが使えます。

ここをクリックすると
以前と同じCrayon Syntax Highlighterが出てきます

もしかしたら、この方法でうまくコードが追加できないよ??という方もいるかもしれません。私もさきほどまで30分ほど悪戦苦闘しました。
Crayon Syntax Highlighterの「Add」ボタンを押すと、見かけ上コードが正しく挿入されるのですが、記事を更新すると入ってないことがあります。

そんな時は、下記のように、挿入されたコードの中に一度カーソルを置いてから投稿を更新すると、正しく表示されます。

function is_sidebar_active($index = 1) {
	global $wp_registered_sidebars;
	
	if (is_int( $index)) :
		$index = "sidebar-$index";
	else:
    $index = sanitize_title( $index );
		foreach ( (array) $wp_registered_sidebars as $key => $value ) :
			if ( sanitize_title( $value['name'] ) == $index ) :
				$index = $key;
				break;
			endif;
		endforeach;
	endif;

 

スポンサーリンク/Sponsored Link

PHP7.3でエラーが出る件の対処

先日、PHP7.3がサポートされたため切り替えると、次のようなエラーが出てサイト表示がおかしくなってしまいました。

preg_replace(): Compilation failed: invalid range in character class at offset 4

確認しますと、Crayon Syntax Highlighterの crayon_langs.class.php の中で、preg_replace()内に正規表現があり、その解釈がPHP7.2以前とPHP7.3で異なるのだそうです。

参考・
【PHP】preg_match()関数を用いた正規表現のマッチングの挙動が7.2系から7.3系で変わってる(PCREのバージョン変更) | Qiita

結論だけ申しますと、プラグインファイルの
crayon_langs.class.php 340行目 を、次のように変更します。

変更前
return preg_replace(‘/[^\w-+#]/msi’, ”, $id);

変更後
return preg_replace(‘/[^\w+#-]/msi’, ”, $id);

「-+#」を「+#-」と順番を変えるだけです。

これで、当ブログは現在PHP7.3で正常動作しています。そもそもメンテされていないプラグインなので、使い続けることに無理はあるわけですが、急場しのぎはこちらで大丈夫です。

パソコン教室・キュリオステーション志木店からのお知らせ
レッスンはオンラインで受講できます

パソコン教室・キュリオステーション志木店では、本年よりオンラインでの在宅レッスンを実施しております。
教室の全コースがオンラインで受講可能。実際にインストラクターがご対応いたします。
1時間の無料体験レッスンはいつでも予約できます。詳しくは公式ページをご覧ください。

スポンサーリンク/Sponsored Link
キュリオステーション志木店運営をフォローする

コメント

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