WEB制作MenuSidebar«Prev»NextSearchエノハ亭LINKBBSSITEMAPRSSFeedlyホーム>WEB制作>Luxeritas(ルクセリタス)「highlight.js」をLuxeritasに設置し、ソースコードを表示する2017年10月14日TwitterFacebookGoogle+LinkedInPocketWORDPRESS及びその各テーマをカスタマイズする記事やメモを残すためには、主にJavaScript、CSS、HTML、PHPなどのソースコードを表示する必要があります。Highlighter」他の評価を見るとどうもかなり重くなるとのこと。Advanced」というプラグインで投稿記事を書いているので、ソースコードを簡単に表示することならできましたが、少しいやかなり「味気ない」表示...。そこで簡単、軽いをテーマに探していると「Highlight.js」で表示させる方法があるとのこと。この「Highlight.js」はJavaScript、CSS、HTML、PHP他のソースコードを見やすくハイライトしてくれるライブラリで、今回はLuxeritas(ルクセリタス)に導入・設置してみました。※まずはWORDPRESSのローカル環境で試してみた方が安全です。※作業の順番的には、試しの投稿ページにコードを挿入しておき、コピペで確認していく方法が良いと思います。スポンサーリンク「Highlight.js」を使うための記述をしておく基本的な記述として次のものが必要となります。<pre><code>コードを入力</code></pre>となります。プラグインの「AddQuicktag」などを使っていると便利かと思います。Advanced」でソースコードをポチ(これでcodeタグが入る)~テキストに切り替えて<pre>タグを追加していますwwLuxeritasの子テーマに「Highlight.js」をコピペする必要なファイルをダウンロードする方法もありますが、面倒だし簡単・軽量をモットーにした方法をメモしておきます。※ここでは、ハイライトの表示がdefaultのままなのでそのままでよければコピペでよいですが、ハイライトする文字色や背景を少しカスタマイズする場合は次の段落も参考にしてください。highlight.jsの公式サイトにアクセスします。上記画面Hostedの、「cdnjs」か「jsdelivr」のどちらか一つのコードをコピペします。src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script><script>hljs.initHighlightingOnLoad();</script>こちらをLuxeritas子テーマの編集→アクセス解析に貼り付けます※注意※どちらの方法でもLuxeritasの子テーマにコピペですが、最終行に<script>hljs.initHighlightingOnLoad();</script>この一文を追加するのを忘れずに!ただ、これは表示がデフォルトのままなので、背景が灰色になるだけです。別にいいやと思うならこれで大丈夫ですが、もう少し色づけしたいなら次の項目を参照してください。ハイライトする文字色や背景を少しカスタマイズしたい場合ちょっと灰色だけって言うのはなぁ...、と私も思いましたので少し変更してみます。「Highlight.js」のデモページ、にて良さげなスタイルシートを探します。使うものが決まったら、こちらのページにてCSSの存在を確認し、default.min.cssの部分を、お好みのものに交換して子テーマにコピペします。src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script><script>hljs.initHighlightingOnLoad();</script>今回は「jsdelivr」を使い、以下の通りatelier-savanna-light.min.cssに変更して</body>直前に挿入してみましたが、気に入らなければ別のに変えていく予定ですwまとめまぁ全部のページに入り込むので、記事が多くなったり重くなったら外してあっさり表記にしておきます。Highlighter」などのプラグインを使ってソースを表示していた場合は全記事にて変更が必要となります。谷澤憧渓よろしければシェアお願いしますTwitterFacebookGoogle+LinkedInPocketURL正規化(WWWの有無、SSL対応)のため、htaccessに記述する内容のメモNextLuxeritasによるサイト表示の高速化をツールで検証Prev関連記事Luxeritas(ルクセリタス)移行に合せたWordPressプラグインの変更と設定WORDPRESSにはできるだけプラグインを使わない方針で運用しています。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。