doudonn WEB制作やサーバーの話とかいろいろ

「Highlighting Code Block」よりも「highlight.js」がおすすめ!という話

doudonn 更新日:
「Highlighting Code Block」よりも「highlight.js」がおすすめ!という話

コードの表示は「highlight.js」がおすすめです。
超シンプルで軽くてSEO的にも良い。

「Highlighting Code Block」が最近は人気ですが、
こちらよりもおすすめしたい。

1、highlight.jsがおすすめな理由

自分でCSSとjsを設置して使うので、カスタマイズ性が良い。
(プラグインでは無い)

プラグインの「Highlighting Code Block」は有効化すると、
全てのページにおいて専用のCSSとjsを読み込むので遅くなってしまう。
必要なページだけ読み込むようにもできますが、それでもやや重ため。
(詳細:「Highlighting Code Block」を使う記事だけCSSを読み込む方法

「highlight.js」は「js」と「css」を手動で設置するだけで使える。
容量も少なく、必要なページだけ読み込むことも簡単。
ページ表示速度も速くなりGoogleからも怒られない。

2、設置方法

簡単に説明します。

1、公式HPからダウンロードする
2、「highlight.min.js」と「styles」にあるお好きなCSSをサーバーへアップ
3、下記コードをhead内にコピペ(CSS・フォルダ名は各自変更を)

<?php if(is_single() && !empty($post->sosu)): ?>
<link rel="stylesheet" href="/highlight/agate.min.css">
<script src="/highlight/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<?php endif; ?>

各CSSのサンプルはこちら
CDNを使う場合はこちら
※CSSの量は少ないので既存のCSSの中に書いても良い

記事ページでかつ、カスタムフィールド「sosu」に値がある場合だけ表示します。
ソースコードを書く記事だけ「sosu」に1でも入れておけばいい。
このあたりはお好みで設定ください。

3、highlight.jsの良くない点

CSSデザインがどれもいまいちなよう思える。

どれもカラフルすぎる。
もっとシンプルなのが良いのですが無い。
そのため、自分でCSSをカスタマイズする必要があります。

自分もかなり変更して、Qiitaに近い色合いにしました。
CSSを見ればかなり簡単だとわかるので、是非やってみてください。
このサイトので良ければパクってください。

--

ワードプレスの関連記事

記事一覧はこちら:ワードプレス

管理人について
doudonn
名前:doudonn(どうどん)
ひたすらWEB制作な人。
一応社長です。音ゲー好き

<Twitterはこちら>
ゲーム垢
WEB制作垢
お知らせ

2022年11月30日に全記事削除しました。
まだ再開に向け作りかけ。


無駄にページ表示速度にこだわってます。

役立ちサイト
wiki
© 2022-2023 doudonn All Rights Reserved.