JINカスタマイズ

【WordPress】【JIN】シンタックスハイライターって何?説明&設定方法&使い方

こんにちは😀広瀬ユキです。

今回は、シンタックスハイライターの説明と設定方法をご紹介します。

WordPress有料テーマ【JIN】を使っている方向けの記事です。

シンタックスハイライターって何?

シンタックスハイライターとは、プログラミング言語(HTML,CSS,PHPなど)を入力するときに、コードをタグごとに色分けして分かりやすくしてくれる機能のことです。

英語だと、Syntax Highlighterシンタックス ハイライターと表記します。

WordPressでは、プラグイン「Crayon Syntax Highlighter」を使うと便利ですが、JINには、その機能が標準搭載されています。

なので、プラグインを使わなくてもシンタックスハイライターが使えるんです❗自動で色分けもしてくれます。

これがシンタックスハイライター
/*背景色*/
#wrapper {
background: #aaa;/*色*/
}
/*背景色*/

 

便利な機能が自動で表示される

シンタックスハイライターの設定方法

シンタックスハイライターの設定方法をご紹介します。JINのデフォルト(初期設定)では、設定されていないので、自分で設定する必要があります。

  1. WordPressの編集画面から、「外観」→「カスタマイズ」を開きます。
  2. 画面左の「その他設定」を開きます。
  3. 「コードのシンタックスハイライターを利用する」にチェックを入れます。
  4. 「公開」を押します。

シンタックスハイライターの設定ができました‼

シンタックスハイライターの使い方

次に、シンタックスハイライターの使い方についてご紹介します。

  1. 「コードサンプルを挿入/編集」を押す
    シンタックスハイライターを有効化すると、記事の編集画面上に、「コードサンプルを挿入/編集」というボタンが出てきます。

    こんなボタン

  2. 「言語」を選択する
    「コードサンプルを挿入/編集」を開くと、下記のような画面が出てきます。左上の「言語」から、入力したい言語を選択しましょう。
  3. 「OK」を押す
    コードが入力出来たら、OKを押しましょう。

シンタックスハイライターで、コードが挿入できました❗

編集後記

使うプラグインをひとつでも減らせるのは嬉しいですね🙂

【WordPress】【JIN】ハンバーガーメニューの「MENU」の文字色と背景色のCSSカスタマイズ【WordPress】有料テーマ【JIN】スマホのハンバーガーメニューの色のCSSカスタマイズについて書きました。...
【WordPress】【JIN】ブログのデザインをカスタマイズする方法:2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法:2種類について書きました。【追加CSS】...
【WordPress】【JIN】サイトアイコン(ファビコン)を設定する方法とGoogleの変更点【WordPress】有料テーマ【JIN】サイトアイコン(ファビコン)を設定する方法の解説と2019年5月22日にGoogleが公式発表した変更点について書きました。...

☆クリックで応援お願いします☆

PVアクセスランキング にほんブログ村

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ