プラグイン不要～
ショートコードをシンタックスハイライトさせる方法
ショートコードを記事に表示させる簡単な方法とは。

テキストエディタの機能としてブログで活躍してくれる
「シンタックスハイライト」（Syntax highlighting）。

ソースコードを綺麗に表示する為に
シンタックスハイライト系のプラグイン使用している方も多いと思います。

プラグインを使用している場合だと、ショートコードをシンタックスハイライト表示する事が可能ですが、
プラグインを使用していない場合、普通に書くとショートコードが機能してしまいます。

ショートコードを実行させず表示させる場合にはちょっとした工夫が必要です。

シンタックスハイライト系のプラグインを使用している方には不要な案内記事になりますが、
もしも今後プラグインに依存しない、「Google Code Prettify」や「highlight.js」等の
使用を検討されている場合や、これらのものに切り替えを行う場合又は、何も使用しない場合には、
過去に、ショートコードをハイライトさせている記事が無いか? 非表示になっていないか?
を、確認してみて下さい。

ショートコードの内容に因っては記事丸ごと真っ白なページになってしまう可能性があります。
(この記事はそれを回避する為の方法を書いています。)

シンタックスハイライト系のプラグインCrayon Syntax Highlighter停止でエラー!

シンタックスハイライト系のプラグインでポピュラーなものは、
「Crayon Syntax Highlighter」や「SyntaxHighlighter Evolved」と言ったものがあり、
エディタのようにソースコードを表示でき、見た目も綺麗です。

みてみたの場合は前者の「Crayon Syntax Highlighter」をインストールし、
サイトのイメージカラーに添う様な表示設定していたので、
かなり気に入っていまして「見栄え重視」で使っていました。

こんな感じ。

ショートコードも「Crayon Syntax Highlighter」だとこんな感じに普通に表示可能。

結局は2016年6月に行ったWordPressの移設(お引越し)の際に
「Crayon Syntax Highlighter」とはお別れしたのですが、(詳細は以下にて↓↓↓)
https://mitemita.com/be-tricky_crayon-syntax-highlighter

その際、一部の記事で書いていたショートコードの記事を全て書き直す必要がありました。

移設前の旧サーバーで「Crayon Syntax Highlighter」を停止すると、
幾つかの記事でアイキャッチ画像から下部の記事が、丸ごと真っ白なページになっていたからです。

では、どのような場合にページが表示されなくなったか?ですが、主な原因は2つ。

Crayon Syntax Highlighterのタグの記述に依るもの

Crayon Syntax Highlighterでコードを入力する際に表示されるポップアップウィンドウ。
この窓の右上に「1文章として表示」というチェック項目があります。

これを使用した場合にテキストエディター内に挿入されるタグは、<pre></pre>ではなく
“<span class=”lang:default decode:true crayon-inline ” > </span>“です。

このタグを書いてしまっていた記事が非表示になりました。

回避方法

この場合には、ソースコードを表示させる為のタグ<pre></pre>に書き換えます。

このタグに書き換える事で
「Google Code Prettify」や「highlight.js」でも正常に表示される様になりますし、
これらのシンタックスハイライターを使用せずとも<pre></pre>内のコードが表示出来る様になります。

ショートコードそのものの記述に依るもの

さて、今回の記事の核心部分です😅

みてみたでは、
ダウンロード数をカウントし管理する Simple Download Monitorというプラグインを使用しており、
ダウンロードボタンを表示させる為のショートコードや
ダウンロードカテゴリーの項目を表示する為のショートコードを
レクチャーページ(使い方指南記事)にCrayon Syntax Highlighterで書いていました。

その殆どのレクチャーページがCrayon Syntax Highlighterを停止すると、
真っ白なページになっていました。

回避方法

この場合は、<pre></pre>を使用せずに、以下の様に書く事で回避できます。

[ここにショートコードを書く]

ショートコードを［角括弧］ [ ]で囲ってやります。 [[ ]]の様に二重に書けばOKです。

【例1】→  [sdm-download id="4604" fancy="0" button_text="クリックしてね"] と表示させる場合

[[sdm-download id="4604" fancy="0" button_text="クリックしてね"]]

と書きます。

つまり、ショートコード開始に“[“ と書き足し、
コード終わりに“]“を書き足してやります。

この様に書けばショートコードを実行する事無く、無効化することが出来、
ショートコードをそのまま記事に表示させる事が可能になります。

更に上記で表示している【例1】の様に<pre></pre>タグでシンタックス表示する場合

【例2】→  <pre>[[sdm-download id="4604" fancy="0" button_text="クリックしてね"]]</pre>
と表示させる場合

<pre>[[sdm-download id="4604" fancy="0" button_text="クリックしてね"]]</pre>

と［角括弧］を二重に書けばOKです。

ショートコード開始に“[[“ と書き足し、
コード終わりに“]]“を書き足してやります。

そのまま記事表示するだけなら…HTMLエンティティ化すればもっと簡単??

単純に、テキストエディタ内で、
コードをエンティティ化すれば良いのでは?と思われる方もいるかも知れません。

HTMLエンティティ
表示コード	数値	名称
[	[	開く角括弧
]	]	閉じる角括弧

[Shortcode] と表示したい場合に &#91;Shortcode&#93; と書く事で
記事にショートコードがそのまま表示されますし、<pre>タグを付ければシンタックス表示も可能。

…ですが、プラグインが独自のショートコードを持つ場合は、
そのプラグインの内容に因って、エンティティ化しても、実際の機能がページに出てしまう場合もある為、
簡単に “[ ]“コードを書き足す方法をおススメします。

シンタックスハイライトをCrayonからSimplicity標準装備のhighlight.jsに

私が愛用させて頂いているWordPressのテーマ「Simplicity」には、ver.2.1.6から、
「ソースコードをハイライト表示する機能」が装備されています。
http://wp-simplicity.com/simplicity2-1-6/
多機能プラグインパック Celtispackにも、
「Google Code Prettify を使用したコードのシンタックスハイライト表示」
という機能が備わっているので、何れかを使用させて頂こうと悩んだのですが、
Simplicityで起用されている highlight.js の方がデザインが豊富でしたので、
「Atelier Lakeside Light」をチョイスして使っています。

Crayonの様に重いと感じた事もありませんし、とっても良い感じです。😋

Simplicity使いの方で未だ使用されていない方は、是非お試しあれ😄

勿論、「Google Code Prettify」や「highlight.js」等を使用しなくても、
上記で記した方法でショートコードを実行せずに表示する事は可能です😀

まとめ

プラグイン「Crayon Syntax Highlighter」を停止する時、
“<span class=”lang:default decode:true crayon-inline ” > </span>“と
書いたままにしているとエラー(頁が白紙)になる

エラー(頁が白紙)回避の為には、
“<span class=”lang:default decode:true crayon-inline ” > </span>“を
ソースコードを表示させる為のタグ<pre></pre>に書き換える。

シンタックスハイライト系のプラグインを停止する場合は、
<pre></pre>を使用せず、ショートコードを角括弧[ ] で括る。

上記を<pre></pre>タグでシンタックス表示する場合は、
［角括弧］を二重に書く。

少しの工夫での事なのですが、私がネット初心者の頃に
「どうやって表示させてるんだろう??」と疑問に思っていた様に
以外と知らない方も多いのではないかしら?と思いましたので記事にしてみました。😐

ご閲覧頂き有難うございます。お役に立てば幸いです。