仙台のワードプレス専門ホームページ制作会社

仙台(宮城)のワードプレス専門ホームページ制作会社|ジテキマーケティング

【簡単解説】ソースを記事にそのまま表示させるプラグイン「SyntaxHighlighter」の使い方マニュアルアイキャッチ画像

ワードプレス

【簡単解説】ソースを記事にそのまま表示させるプラグイン「SyntaxHighlighter」の使い方

投稿日:2017年9月3日 更新日:

ワードプレスの記事内でこのHTMLのソースをそのまま表示させたいんだけどなんか勝手に表示変わっちゃんだよな~!
ネットで色々調べたけどなんかいまいちよく分からない…。
そんな私が見つけたこのプラグインは使い方簡単なのでご紹介します。

SyntaxHighlighterとは

ウェブサイト上でソースコードを原文のままキレイに表示する事が出来るプラグインです。

ウェブサイトへのユーザーにソースコードを伝えたい時に重宝するプラグインとなっています。

サイトの上でのデザインの見栄えがよく見易く、簡単に使えますのでおすすめ出来ます。

 

SyntaxHighlighterインストール

インストールはいつものようにワードプレスのダッシュボードから
SyntaxHighlighterプラグイン使い方説明画像

  1. ワードプレスのダッシュボード外観「プラグイン」をクリック
  2. 検索窓の「SyntaxHighlighter」と入力し検索
  3. 出てきたSyntaxHighlighterプラグインを「今すぐインストール」からインストール

インストール後「有効化」をお忘れなく!

 

SyntaxHighlighter使い方

SyntaxHighlighterの使い方についでは見せ方の好みもありますのでここでは私の見せ方で説明します。

私は出来る限りシンプルにページ上でソースコードを見せたかった為出来る限りシンプルな設定にしました。

SyntaxHighlighterプラグインを使ったウェブサイト上でのシンプルなソースコードの表示例

SyntaxHighlighterのウェブサイトでのソースコードの見え方実例画像

とこのようにかなりシンプルにソースコードだけの表示の設定にしています。

 

シンプルなソースコードの表示のSyntaxHighlighter設定方法

上記のような非常にシンプルな設定はどのようにするかと言うと、

SyntaxHighlighter-Evolvedプラグインの設定方法マニュアル画像

  1. ワードプレスのダッシュボード外観「プラグイン」をクリック
  2. インストールされているプラグイン一覧から「SyntaxHighlighter-Evolvedの”設定”」をクリック

次に詳細設定画面で設定を行います。

SyntaxHighlighterプラグインの詳細設定マニュアル画像

  • SyntaxHighlighterのバージョン「バージョン2.x」を選択します(長い行を折り返す設定がバージョン2しか対応していない為)
  • ツールバーを表示する
  • インデントタブを許容するスマートタブを使う
  • 長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)

という箇所にチェックを入れます。

※ここでバージョン3を選び「長い行を折り返す」にチェックを入れなければ横スクロールバー付きのソースコードがウェブサイト上で表示出来ます。
個人的にはあまり横スクロールバーが好きではないので上記の設定にしています。

以上の設定を行うとウェブサイト上での実際の表示例にあったようなシンプルなソースコードの表示になります。

 

SyntaxHighlighterの使い方

使い方は非常に簡単!

表示したいソースコードの前後をショートコードで挟むだけ。

とこのように表示したいソースコードの前後に言語のショートコードを挟むだけです。

対応言語は、「HTML」や「CSS」、「PHP」等主要言語はもちろん「C言語」等まで対応しているので特に心配なく使えます。

 

まとめ

いかがだったでしょうか?

私もウェブサイト上でソースコードをそのまま表示するのに苦労したという事もありこのプラグインを見つけた時には非常に助かりました。

デザインの見栄えもよく、設定も簡単で使い方もシンプルですのでかなり重宝しています。

ソースコードが掲載されいるサイトはユーザーにとっても何度も訪れる価値のあるページになる可能性が高いです。

あなたもあのコードのコピーはそういえばいつもあのサイトのページからだったなぁ…なんて事ありませんか?

それほどソースコードはユーザーにとって価値のある物です。

あなたもウェブサイトでソースコードを公開したいと思った時にはぜひ使ってみて下さい。

ページのアクセスアップにつながるかもしれませんよ

 

この記事が気に入ったら
いいね ! しよう

Twitter で

-ワードプレス

Copyright© 仙台(宮城)のワードプレス専門ホームページ制作会社|ジテキマーケティング , 2019 All Rights Reserved.