WordPress技術ブログは、毎週月曜日の午前7時に更新!最新の情報をお見逃しなく!

【!】使用不可

SyntaxHighlighter Evolvedでコードをきれいに表示

ワードプレスでホームページの作り方やプログラミング学習のサイトを作りたい。そんな場合に便利なプラグインをご紹介します。

ワードプレスでソースコード表示するには?

ワードプレスの記事内にソースコードを記載しても、思った通りに表示されなかったり、なんだか分かりにくく感じてしまったりします。そんな時におすすめなプラグインが「SyntaxHighlighter Evolved」です。

SyntaxHighlighter Evolvedなら、簡単な操作で記事内にコードを表示させることが出来ます。それも、表示されたコードはコードエディタで表示するときのように、構文強調表示に対応していて読みやすくなっています。

SyntaxHighlighter Evolvedのインストール

ワードプレスの管理画面で、プラグインの追加画面を開きます。左上の検索フォームでキーワードに「SyntaxHighlighter Evolved」と検索します。検索結果が表示されたら、[今すぐインストール]ボタンをクリックしてインストールし、次に有効化をします。

これでSyntaxHighlighter Evolvedのインストールは完了です。

SyntaxHighlighter Evolvedの使い方

次は実際にSyntaxHighlighter Evolvedを使ってコードを表示させてみましょう。

記事の中にPHPというプログラミング言語のコードを記載しました。

このままプレビューをすると、ソースコードの部分がごっそり抜けた状態で表示されてしまいます。

そこで、今度はSyntaxHighlighter Evolvedの機能を使ってコードを表示させてみます。コードの部分を[言語][/言語]で囲みます。

この状態で保存をし、表示をするとPHPのコードも構文がきれいに装飾された状態で表示されています。これならプログラミング初心者の人も読みやすいですね。

今回はPHPでしたが、htmlやCSSなど様々な言語がサポートされています。

さらに詳しい詳しい使い方

SyntaxHighlighter Evolvedでは、特定の行をハイライトをハイライトしたり、デフォルトでコードを表示する部分を閉じた状態にするなどの表示方法のカスタマイズをすることができます。詳しくは、ダッシュボードの設定-SyntaxHighlighterで表示されるページの下方に確認できます。

ワードプレスの記事にソースコードを乗せる機会がある場合は、簡単にきれいに表示ができる「SyntaxHighlighter Evolved」を使ってみてください。

復旧作業を代行します
復旧作業を代行します。「エラーの原因がわからない」「サイトがおかしい」「ハッキングされたかも...」このような場合の復旧作業を弊社で代行いたします。まずはお困りごとをお聞かせください。お問い合わせ・お見積りは無料です。今すぐお問い合わせをする。
ABOUT ME
数藤圭介
株式会社ネクストアクション代表取締役、WEBディレクター、ワードプレス運営アドバイザー、ビデオグラファー。趣味:小旅行、ギター、硬式テニス