スポンサーリンク
明日を、もっと、ハッピーに!『ショップジャパン』
スポンサーリンク
TV通販公式サイト ビートップス(B-tops)

WordPressの記事にソースコードを載せるなら Urvanov Syntax Highlighter

WordPress

WordPress 5.7の記事にソースコードを載せるなら、Urvanov Syntax Highlighterプラグインを使うのがベスト。

今回、下記のWordPressプラグインを試してみましたが、Urvanov Syntax Highlighter が一番使い勝手が良く、機能も充実していました。

  • Urvanov Syntax Highlighter
  • SyntaxHighlighter Code Block
  • Highlighting Code Block
  • Code Syntax Block
  • Enlighter
  • HTML Editor Syntax Highlighter
  • Crayon Syntax Highlighter

Urvanov Syntax Highlighter をインストールした環境は下記になります。

  • WordPress:WordPress 5.7.1
  • テーマ:Cocoon Child
  • Urvanov Syntax Highlighter:2.8.23

ただ、Cocoonテーマを使用していて、尚且つ「Cocoon設定 > 高速化」の「HTMLを縮小化する」「JavaScriptを縮小化する」を設定していると、Urvanov Syntax Highlighter で不具合が発生するので要注意。「Cocoon設定 > 高速化」の「HTMLを縮小化する」「JavaScriptを縮小化する」はOFFにする必要があります。

「Cocoon設定 > サイト高速化」の「HTMLを縮小化する」「JavaScriptを縮小化する」をONに設定している状態で、Urvanov Syntax Highlighter をインストール/有効化し、Urvanov Syntax Highlighter を初期設定のまま、記事にUrvanov Syntax Highlighter欄を追加した場合、ソースコードを範囲選択しコピーしようとした際、範囲選択していても範囲選択エリアの色が変わらずハマりました。
下記画像はソースコードを全選択し、右クリックした状態。

「Cocoon設定 > サイト高速化」の「HTMLを縮小化する」「JavaScriptを縮小化する」をOFFに設定し、ソースコードを全選択し、右クリックした状態。

Urvanov Syntax Highlighter は機能豊富で、デフォルト設定のままだとソースコード表示がゴチャゴチャしてしまうので、下記機能をOFFにするのをお勧めしたい。

  • ツールバーの表示:表示しない
  • コード行を縞模様で表示する:OFF
  • デフォルトで行番号を表示:OFF

Urvanov Syntax Highlighter の設定画面は、インストール済みプラグインの一覧画面から遷移出来ます。

設定変更後のソースコード表示は下記になります。

Urvanov Syntax Highlighter は寄付を求めているので、余裕のある人は寄付をしてあげてほしい。


コメント

スポンサーリンク
明日を、もっと、ハッピーに!『ショップジャパン』
スポンサーリンク
自然派スキンケア・エイジングケアの通販サイト【豆腐の盛田屋】
タイトルとURLをコピーしました