【桃農家でもできた!!】 THE THOR シンタックスハイライト

こんにちは、ももおやじ（@Oyaji_Momo）です。

今回はTHE THORでソースコードをシンタックスハイライトする方法についてご説明します。

• シンタックスハイライトって何ですか？
• ブログでソースコードをカッコよく紹介したい
• THE THORでソースコードを紹介すると見た目がイマイチ

この記事はこんな方にオススメです。

簡単な方法でソースコードをカッコよく紹介できますよ。

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

シンタックスハイライトって何ですか？？？

簡単に言うとソースコードに色をつけることだけど、ここではブログでソースコードをカッコよく見せるってことだね

いや全くわからないんだけど…

ちょっとこれを見て

/* widgetProfile*/
.widgetProfile__snsTitle,
.widgetProfile__snsItem .widgetProfile__snsLink {
    color: #191919;
}
.widgetProfile__sns {
    background-color: #ffffff;
}

THE THORで一般的にソースコードを表示させるとこんな風に見えるんだけど、ちょっと工夫すると下のような感じになるんだよ

/* widgetProfile*/
.widgetProfile__snsTitle,
.widgetProfile__snsItem .widgetProfile__snsLink {
    color: #191919;
}
.widgetProfile__sns {
    background-color: #ffffff;
}

おぉ！
何だかよくわからないけど色付きの方がカッコよくは見えるよ！

こういうのをシンタックスハイライトって言うんだよ
コードのコピーも簡単にできるよ

今回はプラグインPrismaticを使用したシンタックスハイライトについて説明します。

プラグインを使わなくても<pre>◯◯</pre>や<pre><code>◯◯</code></pre>と記述すればコードの表示はできますが、見た目はイマイチです。

Prismaticを使うことで見た目だけでなくワンクリックでコードのコピーが可能です。

自分で設定したコードを紹介する場合にも、読者がコードを利用しやすいのでオススメです。

ぜひ試してみてください。

今回は少し長い記事になりますが、設定自体は簡単なので大丈夫です。

それでは詳しく説明していきますね。

今回はプラグインを使用して設定します。
プラグインを使用すると画面の表示速度が遅くなる可能性がありますので注意してください。

プラグインのインストールや更新前にはWordPressのバックアップがおすすめです。

関連記事

【桃農家でもできた!!】 THE THOR WordPressバックアップ

こんにちは、ももおやじ（@Oyaji_Momo）です。 今回はTHE THORでWordPressをバックアップする方法についてご説明します。 ブログのバックアップなんて考えていない 万が一WordPressのデータが[…]

シンタックスハイライトの設定

プラグイン「Prismatic」をインストールして設定します。

「Prismatic」はいろいろな設定がありますが、全て理解する必要はありません。

僕が設定した見た目で良ければ、僕の設定をそのまま真似るだけで大丈夫です。

1. WordPress管理画面「プラグイン」→「新規追加」
2. 「Prismatic」を検索
3. 「Prismatic」をインストール
4. WordPress管理画面「プラグイン」→「インストール済プラグイン」
5. 「Prismatic」の「Settings」
6. 「General」の設定→「Library」で「Prism.js」を選択し「変更を保存」
7. 「Prism.js」の設定→画像のとおり設定し「変更を保存」
8. WordPress管理画面「外観」→「カスタマイズ」
9. 「追加CSS」を選択
10. 「追加CSS」にコードを記述

Step1.Wordpress管理画面「プラグイン」→「新規追加」

Step2.「Prismatic」を検索

Step3.「Prismatic」をインストール

「Prismatic」がインストールできれば「有効化」を押します。

次に「Prismatic」の設定を行います。

Step4.Wordpress管理画面「プラグイン」→「インストール済みプラグイン」

Step5.「Prismatic」の「Settings」

Step6.「General」の設定→「Library」で「Prism.js」を選択し「変更を保存」

Step7.「Prism.js」の設定→画像のとおり設定し「変更を保存」

これで「Prismatic」の設定は完了です。

次にCSSを記述して「Prismatic」の表示を変更します。

Step8.Wordpress管理画面「外観」→「カスタマイズ」

Step9.「追加CSS」を選択

Step10.「追加CSS」にコードを記述

記述するコードはこちらです。

コピーして「追加CSS」に貼り付けます。

コードは「Copy」を押せばコピーできます。

/*Prismatic調整*/
.content pre {
	background-color: #272822;
	border-left: none;
}

これでシンタックスハイライトの設定は完了です。

それでは使用方法について見ていきましょう。

シンタックスハイライト使用方法

1. 「Add Prism.js code」を選択
2. 「Language」を選択して「Add Code Here」にコードを入力
3. 「テキストモード」で編集

Step1.「Add Prism.js code」を選択

Step2.「Language」を選択して「Add Code Here」にコードを入力

今回はCSSを入力するので「Language」は「CSS」を選択します。

「Language」は表示させるコードの種類を選択してください。

HTMLを表示させるなら「Language」は「HTML」となります。

入力が完了すれば「OK」を押します。

エディタ上ではこのように表示されます。

実際の表示を確認するとこのようになります。

これでほぼ完成ですが、せっかくなので行番号を表示させましょう。

Step3.「テキストモード」で編集

Step2で入力したコードを確認します。

このように表示されています。

ここで<pre>に「class」を追記することで行番号を表示させることができます。

入力するのは「class=”line-numbers language-○○”」です。

◯◯は表示させるコードによって変わるので<code class=”language-○○”>を確認して入力しましょう。

「class=”line-numbers language-○○”」を入力してプレビューで表示確認するとこのような表示になります。

最後に

今回はTHE THORでのシンタックスハイライトについてお話ししました。

サイドバーエリアのプロフィールをカスタマイズした時にシンタックスハイライトについて勉強したので記事にしてみました。

関連記事

【桃農家でもできた!!】 THE THOR プロフィールカスタマイズ

こんにちは、ももおやじ（@Oyaji_Momo）です。 今回はTHE THORでサイドバーエリアのプロフィールをCSSでカスタマイズする方法についてご説明します。 プロフィールをもっとシンプルにしたい THE THOR[…]

今回はプラグインを使った設定ですが、個人的にはプラグインはできるだけ使用したくないと考えています。

ただし、シンタックスハイライトにはどうしてもプラグインが必要だったので今回は使用しました。

ノーマルの<pre><code></code></pre>の表示で納得できればプラグインは使わないほうが良いと思います。

今回は「Prismatic」を使用したシンタックスハイライトでした。