ソースコードをハイライト表示

下のようにソースコード(HTMLタグ)をハイライト表示させる方法です。

<a href=" " target="b_blank"></a>

わたしも以前は「Syntax Highlighter」を使っていましたが、Simplicity2ではプラグイン無しで、preボタンのソースコードをハイライトしてくれます。

「カスタマイズ」の設定

管理画面>カスタマイズ から、

ソースコードを選択して、

ソースコードをハイライト表示 して、ハイライトスタイルを選択後、公開をクリックです。
ハイライトスタイルは、『highlight.js demo』をクリックすると別ページ(タブ)でサンプルが開きます。


ただ、、、これだけでは、CSSコードくらいしかフォローしてもらえません。
PHPやHTMLの場合は、タグの変換が必要です。
タグ変換してくれるエディターをお持ちの方は不要ですが、わたしのエディターはそこまでやってくれません 笑
そこで「複数の画像を横に並べる」で紹介したプラグインの『Shortcodes by Angie Makes』の再登場です。

Shortcodes by Angie Makes

編集>ビジュアル

投稿・固定ページの編集モードを一旦『ビジュアル』に切り替えます。
『Shortcodes by Angie Makes』を入れていれば、赤枠のボタンがあるので、[content]>[HTML]をクリックします。

文字列をコピペ

赤枠に変換したいPHP等の文字列を入れます。

文字列を挿入

文字列を入れました。

編集>テキスト

テキストモードで確認します。

『pre』ボタン

文字列だけを選択してpreをクリック。


と、理屈はこれだけなのですが、、、。
表示させたいソースコードがそのページに1つだけならこれでOKです。
でも、複数ある場合は、この方法で『ビジュアル』と『テキスト』を行き来すると、一部のソースコードが台無しになる場合があります。

正しい表示  <a href=" " target="b_blank"></a>
台無しの表示 <a href=  target=b_blank></a>

わたしは投稿ページに「HTML用」というページを作成して、その雛型のビジュアルモードに変換したいソースコードを入れて、テキストモードで変換されたコードをエディターにコピペで預かってもらって、本番のページにコピペするようにしています。

雛形例

[wc_html name="Custom Field Name"]

ビジュアルにしてここにHTML

[/wc_html]