Urvanov Syntax Highlighterの使い方:記事内でソースコードを表示

Urvanov Syntax Highlighter

プラグインUrvanov Syntax Highlighter(旧Crayon Syntax Highlighter)の設定と使い方をまとめています。

記事内に綺麗で見やすいソースコードを表示させるプラグインです。直接記述できない文字や記号を文字実態参照に置き換える必要がないので、「HTML」「CSS」「PHP」等を解説する時に使うと便利です。preタグで囲むだけで機能しますし、ブロックエディターにも対応しています。類似のプラグインでHighlighting Code Blockもありますから、お好みで選んで下さい(僕は後者を利用しています)。

目次

設定と使い方

プラグインを有効化すると、管理画面の設定に「Crayon」が追加されます。

使い方

クラシックエディターの場合は、コードをpreタグで囲むだけで機能します。

表示項目をカスタマイズしたい時は、専用のタグボタンから挿入して下さい。

コードをpreタグで囲む

ブロックエディターの場合は、専用ブロックを追加してコードを貼り付けるだけです。

カスタマイズが不要であれば、コードブロックで挿入しても同じです。

Urvanov Syntax Highlighterブロック

表示項目をカスタマイズしたい時は、ツールバーオプションの「UrvanovSyntaxHighlighter」をクリックして各種項目を入力して下さい。プログラミング言語を表示させたり、特定の行をハイライトさせることができます。

コードを挿入する時の詳細設定

コード以外は全て任意ですから、必要であればお好みでカスタマイズして下さい。

基本設定

管理画面の設定「Crayon」から、基本設定やデザインを変更することができます。

全て任意ですが、今回は個人的に気になった設定をまとめておきます(分からない項目は初期設定推奨)。

Crayon Syntax Highlighter設定

ツールバーの表示を「常に表示」にすると、マウス操作でツールバーが上下するのを防いでくれます。

「Toolbar」の設定

行の「デフォルトで行を折り返す」にチェックを入れると、横スクロールバーが表示されなくなります。

「Lines」の設定

その他の「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」にチェックを入れると、必要な時だけCrayonのCSSとJavaScriptが読み込まれます(ページの表示速度スコアが改善される可能性がある)。

「Misc」の設定

フォントや余白の設定は、プレビューを確認しながらご自身で設定して下さい。

カスタマイズ

更に細かくデザインを変更したい時は、ベースとなるテーマを選択して「複製」をクリックします。

テーマの複製

一覧に追加されたCopyテーマを選択して、「編集」をクリックします。

複製されたテーマを選択いて編集

文字色やボーダーの色と太さを自由に変更することができます。

テーマのカスタマイズ

用意されているテーマに変更を加えたい時は、複製してから編集して下さい。

最後に

基本はプラグインを有効化してコードをpreタグで囲むだけなので使い方は簡単です。

WordPressデフォルトのコードブロックでもコードを表示できますが、行数が表示されなかったり、コピー機能がなかったり等、不便な点も多いので、ソースコードを多用している方はプラグインを使うと便利です。

細かい設定やデザインも変更できますから、Crayon Syntax Highlighterからの乗り換えだけでなく、これからコード表示系のプラグインの導入を検討されている方にもおすすめです。

シェアしてね!

この記事を書いた人

2024年3月6日に始まったGoogleのコアアップデートは4月19日に完了していました(一週間以上経ってからの告知)。昨年10月に続いて、今回の調整もアクセスマイナス。昨年同時期と比較すると、アクセスは1/2~1/3程度になってしまいました。ユーザーにとって使いやすい検索エンジンになっているのなら構わないのですが、個人的には欲しい情報がなかなか見つからない&到達するまでに時間がかかる様になった気がします。現状、回復の見込みはないので、検索エンジン以外の集客方法を模索した方がいいのかもしれません。

コメント

コメントする

アップロードファイルの最大サイズ: 30 MB。 画像, 音声, 動画, 文書, スプレッドシート, 対話型, テキスト, アーカイブ, コード, その他 をアップロードできます。 Youtube、Facebook、Twitter および他サービスへのリンクは自動的にコメント内に埋め込まれます。 ここにファイルをドロップ

目次