
ビジュアルエディタでJINのショートコードを挿入しようとして思った事。
毎回確認するのがめんどくさくて、先日全部表示したものをまとめました。

そして、次につまづいた事。
こういうやつです。

実はこの表示の仕方に苦戦しました。
同じく悩んでいる方いませんか?
なんと、JINだったら簡単に解決できますよ(^-^)
Contents
ショートコードを表示前の設定
シンタックスハイライター機能追加
シンタックスハイライター機能って知ってますか?
プログラムコードに色を付けて、表示してくれます。
ここまでたどり着くのに時間を要しました。
JINのサイトでちゃんと説明してくれてました。
JINテーマ搭載の「シンタックスハイライター機能」を使う方法
JINのサイトと説明が重複しますがスムーズに進めるために、画像も入れておきます。
まずビジュアルエディター上に「コードサンプルを挿入/編集」というアイコンを表示させなければいけません。

①ダッシュボードの「サイトをカスタマイズ」をクリック。

②「その他設定を」をクリック。

③「コードのシンタックスハイライターを利用する」にチェック。

はい、これでOKです。
シンタックスハイライター機能を使って表示してみる
では、実際やってみましょう。
※ショートコード →アイコン→チェックとクリックした時に表示される[jin_icon_check color="#e9546b" size="18px"]
を記事内に表示させたかったわたしの例です。
①「コードサンプルを挿入/編集」をクリック。

②この画面になるので、ショートコードを入力(貼り付け)してOKをクリック。
※この時ショートコード をさらに角括弧[ ]で囲むのを忘れないでください。


③するとビジュアルエディタ上と記事内の表示はこうなります。
[[jin_icon_check color="#e9546b" size="18px"]]

はい、できました(^-^)
JINショートコード に色を付けないで記事内に表示させる
シンタックスハイライターを使用しない
「コードサンプルを挿入/編集」を押さずに、そのままショートコード を表示させたら角括弧[ ]で囲むだけです。
そうすると、下記のように記事内に表示されます。
色が付いてないですね。
[jin_icon_check color="#e9546b" size="18px"]角括弧に気づかず延々とググりまくったわたしの話
ググって調べた方法で何回やってもショートコード がコードのまま表示されず、解決するまでにすごく時間がかかりました。
でもこれでまた一つ覚えたのでレベルアップです。
まだまだ勉強しないとですね。
また何か発見したら 記事にします。