2021年12月31日、今年最後の日ということで重い腰を上げて投稿したいと思います。
ブログを始めてプログラミング系の記事を書いている人は、誰しもが「ブログに載せたソースコードをQiitaみたいな感じにシンタックスハイライトしてみたい！」と憧れたことでしょう。
Qiitaのハイライトはとても読みやすく、目に優しいですから真似したくなるのは納得です。
ですがそんなに都合よくQiita風にできるものはありません。ネットで探しても古いものだったり…設定が反映されなくて使えないものだったり…そんなに似てなかったりします…
＼だったら自分で設定しちゃいましょう！／
ということで、WordPressのソースコードをQiitaっぽく自分なりに設定してみました！
次の画像は、独自にQiita風に設定したコード(HCB)と、実際のQiitaにあるコード(Qiita)の写真です。
HCBとは、Highlighting Code Blockという今回使用したプラグインのことです。
スライドボタンを押すと比較ができます。
完全再現とまではいきませんが、かなりQiitaライクなシンタックスハイライトになっていると思います。
ということで、私が実際に設定したQiita風のシンタックスハイライトをご紹介します。
行った実行環境は以下の通りです。
- OS：macOS Monterey 12.0.1
- テーマ：LION MEDIA
- サーバー：ConoHa Wing
- HCBバージョン：1.4.1
- WordPressバージョン：5.8.1
では早速やっていきましょう！
1. Highlighting Code Blockプラグインをインストール
まずは手順通りにHighligting Code Blockをインストールしていきます。
- WordPressのダッシュボード画面 → プラグイン→ 新規追加ボタンを押します。
- プラグインの検索で【Highlighting Code Block】を入力してEnterを押します。
- 下の画像のプラグインをインストールし、有効化(Activate)を押して有効にしてください。
画像の右上部分のように、有効となったらOKです。
もし検索しても見つからない場合は、こちらの公式リンクからインストールしてください。
Highlighting Code Block – プラグイン – WordPress.org
これでプラグインのインストールは完了です！
次にHighlighting Code Blockの設定を行いましょう。
2. Highlighting Code Blockの設定
次にHighlighting Code Blockを行っていきます。
- 設定→[HCB]設定を押して、Highlighting Code Blockの設定画面に移動します。
- 以下の画像のように設定します。
「コードの”font-family”」には以下の文言を全部コピペして入力してください。
これで設定は完了です。
最後にメインとなるCSSの設定を行いましょう。
3. 独自にCSSを設定する
初期設定だとQiita風には程遠いです。なのでここからは、独自に設定したCSSを追加してQiita風に近づけていきましょう。
ダッシュボードから外観→カスタマイズ→追加CSSに、以下のCSSをコピペします。
.token.keyword,
.token.keyword.def,
.token.keyword.this{
color: #ebd247;
}
.token,
.token.constant,
.token.property,
.token.keyword[content*="import"]{
color: #e3e3e3;
}
.token.selector,
.token.class-name,
.token.function{
color: #8bdf4c;
}
.token.atrule,
.token.attr-value,
.token.string,
.token.attr-name {
color: #41b7d7;
}
.token.keyword,
.token.keyword.def,
.token.keyword.this{
color: #ebd247;
}
.token.important,
.token.comment,
.token.delimiter.important{
color: #9dabae;
}
.token.operator,
.token .tag{
color: #ff8095;
}
.token.builtin,
.token.italic,
.token.keyword.def{
font-style: normal;
}
.token.boolean,
.token.builtin{
color: inherit;
}
/* HTML独自の設定 */
.language-html .token.attr-name{
color: #8bdf4c;
}
.language-html .token.tag .token.tag,
.language-html .token.tag .token.punctuation{
color: #ff8095;
}
.language-html .token.tag .token.attr-value *{
color: #41b7d7;
}
/* CSS独自の設定 */
.language-css{
color: #ebd247!important;
}
.language-css .token.property{
color: #e3e3e3
}
/* JavaScript独自の設定 */
.language-javascript,
.language-javascript .token.constant
{
color: #8bdf4c!important;
}
/* PHP独自の設定 */
.language-php .token.package,
.language-php .token.package *{
color: #8bdf4c!important;
}もし設定した際に「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」というエラーが出る場合は、【/**/】で囲んでいるコメント部分を削除して登録してください。
このCSSではそれぞれの言語に合わせて調節を行なっている箇所があります。
気に入らないところがあれば、表示しているページのHTMLを自分好みにカスタマイズしてみてください。
4. 実際にWordPressでコードを書いてみてみよう
では早速、記事の中にコードを書いて確認してみましょう。
投稿画面から「ブロックを追加する」を押して、Highlighing Code Blockと検索します。
(スペルミスでtが抜けています。注意してください。)
すると、赤で囲まれた下記のようなアイコンがでてきます。こちらの赤い線で囲われたボタンをクリックするとブロックが追加されます。
クリックするとブロックが表示され、コードを追加することができます。
Highlighing Code Blockのブロックには– Lang Select – というプログラミング言語を設定できる箇所があります。
ここに記載したコードのプログラミング言語を選択しないと、プレーンテキストとして読み込まれてしまいますので注意してください。
もし該当する言語がない場合は、目次の2. Highlighing Code Blockにある、設定の部分にて使用する言語を追加することで選択可能になります。
下の記事では実際にQiita風に仕上げたソースコードが記載されていますので、どうぞ参考としてご覧下さい。
まとめ
いかがだったでしょうか？
冒頭にも言った通り、かなりQiita風にすることができましたがHighlighting Code Block独自のソース判別方法があったので、完全再現とはいきませんでした。
使用する言語によって微調整が必要なのも少し使いづらい点ですね。
でも僕的にはかなり見やすくできたと思うので満足です。
これを参考にして、自身でカスタマイズをしてより良いシンタックスハイライトを作成してみてはいかがでしょうか！
それでは皆さん、良いお年をお過ごしください！