通常、ワードプレス( WordPress 5 )のビジュアルエディターで各ブロックに記載したテキスト(コード)は実行されてしまい、そのコード自身を表示することはできません。それを表示させたいこともありますよね。それには「 SyntaxHighlighter Evolved(シンタックスハイライター エボルブ)」のプラグインを利用するのが手っ取り早くてまた非常に便利です。

ワードプレスでソースコードをそのまま表示させる方法 SyntaxHighlighter Evolved

1.SyntaxHighlighter Evolved のインストール

シンタックスハイライターをインストールするには、ワードプレスダッシュボードの「プラグイン」>「新規追加」から「SyntaxHighlighter Evolved」と入力して下記を検索してください。

「今すぐインストール」をクリックしてインストールし、インストールされたら「有効化」をクリックして有効化します。

2.SyntaxHighlighter Evolvedの設定

設定画面を表示するにはダッシュボードの「設定」>「SyntaxHighlighter」をクリックします。

私は上記の設定で利用しています。デフォルトの設定ですが特に問題ありません。

3.SyntaxHighlighter Evolvedの利用方法

シンタックスハイライターを使うには、プラグインをインストールすると自動で、ワードプレスのブロック追加のフォーマットの項目に「Syntaxhighlighter Code」が追加されているので、それを利用します。

1)シンタックスハイライターのブロックを追加

ワードプレスの投稿ページで、「+」(ブロックの追加)をクリックします。
フォーマットの「Syntaxhighlighter Code」をクリックします。

上記をクリックするとコードの入力枠ができるので、そちらに表示させたいコードを入力します。

画面の右ペインのブロックの設定で「Code Language」を選びます。その設定に合わせたハイライトが入ってコードが表示されます。

基本は以上です。

(1) ライン番号の設定

細かい設定として、ライン番号の連番を変更したい場合は、「First Line」を入力すると設定されます。

(2) ハイライトラインの設定

ハイライト表示するラインを設定できます。「Highlight Lines」にライン番号を入力します。複数設定したい場合は「1,5」や「10-20」のように入力します。

2)ワンポイントアドバイス:ショートコードはさらにカッコでくくる

ショートコード[○○○][/○○○]を表示させたいときは、「[[○○○][/○○○]]」のように、さらに先頭と最後にカッコを追加しくくります。

ワードプレスセキュリティ強化 無料プラグイン All In One WP Security

ワードプレスのセキュリティを強化するプラグインは数多くありますが、そのうちのひとつに「All In One WP Security...
jetpack-contact-form-logo01

Jetpackのコンタクトフォームを設置する方法 初心者図解

WordPress(ワードプレス)のコンタクトフォームとしては、「Contact Form...
wordpress-speedup-shortpixel-logo

ワードプレスの高速化2019 Autoptimize + ShortPixel Image Optimizer

ワードプレスの高速化のためのプラグインにはいろいろありますが、今回ご紹介する「Autoptimize」に「ShortPixel...

Google reCAPTCHA ワードプレスのスパムコメント対策

今回はWordpress(ワードプレス)のスパムコメント対策に Google reCAPTCHA...

Pin It on Pinterest