ブログ

シンタックスハイライトでショートコードを表示する方法【WordPressテーマJIN】

シンタックスハイライトでショートコードを表示する方法【WordpressテーマJIN】
はま次郎
はま次郎
こんにちは、「人生底上げ!」ブログを運営しているはま次郎@sokoage_life)です。 WordPressテーマ「JIN」に標準搭載のシンタックスハイライター機能を使って、ショートコードを表示する方法を紹介します。

WordPressテーマ「JIN」のシンタックスハイライト

このブログでも使っているWordPressテーマ「JIN」。有料テーマのなかでも少し高めに設定されていますが、使っていて非常に気持ちのいいクオリティです。

シンタックスハイライトとは

シンタックスハイライトとは、プログラムコード(HTMLやCSSなど)に色を付けるためのものです。

こういう感じ。

header, footer {
	position: relative;
	padding: 30px;
	padding: 30px calc(50% - 450px);
	color: white;
	text-shadow: 0 -1px 2px black;
	background: url(img/title.png) fixed;
}

 

サイトをカスタマイズするためのコードを表示したりする場合に便利ですね。

JINはシンタックスハイライト機能が標準搭載

WordPressテーマ「JIN」にはこのシンタックスハイライト機能が標準で搭載されています。無駄なプラグインを入れなくて済むので有り難いです。

JINをお使いの方は「JINテーマ搭載の「シンタックスハイライター機能」を使う方法」を参考にしながら設定してください。

JIN以外でシンタックスハイライトを利用する場合

もちろん、JIN以外のテーマでもシンタックスハイライトを利用することができます。

その場合はプラグインをインストールする必要があります。

おすすめのプラグインは「Prism.js」で、動作も非常に軽快で機能も申し分ありません。

シンタックスハイライトでショートコードを表示したい

一瞬で商品リンクが作れるRinker(リンカー)プラグインの設定!」の記事を書いていて、Rinkerのちょっとしたカスタマイズ方法を紹介しようとしました。

Rinkerのカスタマイズはショートコードに付け加える必要があって、そのままコピペできるようにショートコードをシンタックスハイライトしたかったのです。

HTLMやCSSはJINの標準搭載のシンタックスハイライトで簡単に表示できたのですが、ショートコードをそのまま入れると

 

残念ながら何も表示されないのです。

ショートコードを表示する方法

ショートコードをシンタックスハイライト表示する方法はとても簡単。

ショートコードはブラケット([])で囲むように入力しますが、さらに” [ “と” ] “で囲みます。

例えば、Rinkerの商品リンク作成のショートコード([itemlink post_id="○○"])を表示したい場合は、このように記載します。

[[itemlink post_id="○○"]]

 

ショートコードをブラケット([])で2重に囲むように入力することで、シンタックスハイライトでショートコードを表示することができるようになります。

まとめ

HTMLやCSSのコードを表示したいときは、シンタックスハイライト機能を使うと簡単に表示することができます。

WordPressのテーマ「JIN」なら標準機能として使えます。その他のテーマを使っている場合は、「Prism.js」のプラグインを使うことでシンタックスハイライトが可能になります。

ショートコードをシンタックスハイライト表示したいときは、ブラケット([])で2重に囲むように入力するようにしましょう!

年会費無料の楽天カード


楽天ポイントを貯めるなら、年会費無料の楽天カードを作りましょう。
楽天市場での買い物がポイント2倍になるだけでなく、街中でのお買い物や公共料金の支払いでも楽天ポイントがもらえます。

詳しく見る

あわせて読みたい記事