“Crayon Syntax Highlighter”を使って、ソースコードをソースコードのまま表示★

"Crayon Syntax Highlighter"を使って、ソースコードをソースコードのまま表示★
スポンサーリンク

ソースコードをソースコードのまま表示★

HTMLやCSSで作成したソースコードを、「ソースコードのまま」表示したい!
そのような時に大変便利なWordPressのプラグインがあります。

その名は、“Crayon Syntax Highlighter”

今回は、
“Crayon Syntax Highlighter”を使って、ソースコードをソースコードのまま表示★
というテーマで投稿してみたいと思います。

ソースコードをソースコードのまま表示するHTMLタグ

もともとHTML5には、ソースコードを表示することが出来るタグが用意されています。
そのタグはこちらです。

<pre><code>~</code></pre>

<pre>~</pre>で囲まれた範囲のソースは半角スペース・改行などがそのまま表示されるため、<pre>タグは、HTMLソースやプログラムのソースコードをそのまま表示したり、アスキーアートを表示する場合などに使用されます。

ただし、<pre>~</pre>の中でもタグは解釈されるため、HTMLソースをそのまま表示したい場合には、< と > を、&lt; と &gt; に置き換える必要があります。また、HTML構文の中では、<pre>の開始タグの直後の改行は取り除かれるので注意してください。

プログラムのソースコードを表す場合には、<pre>と<code>を組み合わせて使用するのが一般的です。

例えば、YouTubeの動画を共有したい場合を考えてみます。
「YouTube→共有→埋め込み」で取得したソースコードをそのままサイトにコピペすると以下のように動画が埋め込まれます。

※<center></center>で囲みました。


よく眠れそうな音楽ですね。

それでは、こちらの動画のソースコードをサイトに投稿したい場合はどのようにしたら良いでしょうか? このような時に使うのが、<pre><code>~</code></pre>です。

ただし、ソースコードがオシャレに表示されるようにしたい!という場合は、CSSを使って調整する必要があります。

“Crayon Syntax Highlighter”を使う。

CSSを使わずにオシャレにソースコードをサイトに掲載したい!
そのような際に便利なWordPressのプラグインがあります。

そのプラグインは、“Crayon Syntax Highlighter”

ソースコードをこのように表示させることが出来ます。


それっぽい感じになり、ソースコードのコピー&ペーストももちろん可能です。

ただ注意が必要なのは、WordPressのビジュアルエディタでの表示が下記のようになることです。

"Crayon Syntax Highlighter"を使って、ソースコードをソースコードのまま表示★

これは不具合ではなく、プレビュー等で開くと、オシャレな感じの表示に変わります。
簡単にオシャレな感じでソースコードをサイトに掲載することができる
“Crayon Syntax Highlighter”
おすすめです。

“Crayon Syntax Highlighter”を使うには?

1. バックアップを取る。

プラグインを追加する前にはバックアップを取ることをおすすめします。

▼バックアップの取り方は、こちらの投稿の中ほどをご参照ください。

【Akismetにプラスで!】WordPressのスパムコメントを防ぐプラグイン。
WordPressのスパムコメントを防ぐプラグイン。 WordPressにログインすると多数のスパムコメントが・・・ よくある光景...

2. プラグインをインストール。

WordPressのプラグイン一覧から、“Crayon Syntax Highlighter”と検索しましょう。
インストールが完了したら、有効化してください。
設定は特に必要ありません。

3. WordPressの記事投稿画面をテキストモードで開く。

4. “crayon”タグをクリック。

"Crayon Syntax Highlighter"を使って、ソースコードをソースコードのまま表示★

5. 画像のマーカーしたところのように入力。

Titleに入力した内容が、ソースコードのところにオンマウスした際に表示されます。

"Crayon Syntax Highlighter"を使って、ソースコードをソースコードのまま表示★

“Theme”“Sublime Text”を選択していますが、その他にもいろいろと選ぶことが可能です。

最後に右上の“Add”をクリック。

6. 完成!

簡単ですね!

まとめ

今回は、
“Crayon Syntax Highlighter”を使って、ソースコードをソースコードのまま表示★
というテーマで投稿しました。

<pre><code>~</pre></code>のタグを使わず、CSSも使わず、< と > を、&lt; と &gt; に置き換えなくてもソースコードがそのまま表示されるように投稿することができる大変便利なプラグイン、“Crayon Syntax Highlighter”

試してみてください★