Syntax Highlighterを「Crayon」から「highlight.js」に乗り換える

　シンタックスハイライト 【 syntax highlighting 】
シンタックスハイライトとは、あらかじめ指定された文中の特定の記号やキーワード（文法、表記法、構文規則 ＝【 syntax 】 ）を、他とは異なる色で表示（ 【 highlight 】 ）すること。

①．「PageSpeed Insights」での計測で、「ウェブフォント読み込み中のテキストの表示」の中に【crayon-syntax-highlighter のフォント monaco】が表示される。

WordPress タイトルだけ表示されて記事の内容が表示されない

WordPress Twenty Seventeen 記事の内容が表示されないページが発生 Crayon Syntax Highlighter のバグ   Webサーバーをバージョンアップし、

2019-07-13

2023-10-07

表示される最新バージョン欄をクリックする。

ダウンロードのトップ画面が表示される。

下にスクロールすると、使用したい言語が選択できる画面になる。

表示したいソースコードの言語にチェックを入れ、「Download」ボタンを押してダウンロードする。

ダウンロードされた「highlight.zip」を解凍し、「highlight.pack.js」と「styles」フォルダ内の【css】を一つ選んで、サーバーにアップロードする。

子テーマのフォルダに、「highlight」フォルダをアップロードした。

<!--「highlight.js」を使う -->
<link rel="stylesheet" href="./wp-content/themes/twentyseventeen-child/highlight/styles/default.css">
<script src="./wp-content/themes/twentyseventeen-child/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

「atelier-dune-dark.css」の場合。

「monokai.css」の場合。

当サイトでは、「tomorrow-night-blue.css」を採用した。

pre要素に背景色や枠線が指定されている場合、ソースコードの枠表示が二重になる。

/*-----------------------------------------------------------*/
/*                Highlight.jsのスタイル調整                  */
/*-----------------------------------------------------------*/
pre{
    border: none;
}
pre > code {
    overflow: auto;
    margin: -1.4em;
    padding: -1.4em;
}
/*-----------------------------------------------------------*/

これで、枠が表示されなくなった。

<pre><code>1行目は改行せずに書く。
言語の設定は自動。
</code></pre>

言語設定が自動とはいえ、下記例のようにハイライトされない場合があり、ソースコードの言語を指定をすると適切にハイライトされる。

言語の指定要領。

<pre><code class="xml">
<pre><code class="css">
<pre><code class="bash">
<pre><code class="http">
<pre><code class="javascript">
<pre><code class="nginx">
<pre><code class="php">
<pre><code class="perl">
<pre><code class="python">
<pre><code class="sql">
<pre><code class="json">
<pre><code class="accesslog">
<pre><code class="console">

※1：ソースコードは、「HTML実体参照変換」を行う必要がある。

※2：ショートコードは、2重カッコにしなければならない。

※3：ampページではハイライトされないので、別途対策が必要。

/*-----------------------------------------------------------*/
pre {
	background: #e0ffff;
	border: solid 1px;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}
/*-----------------------------------------------------------*/

cssを設定した結果。

AMPに「highlight.js」シンタックスハイライトを適用する

WordPress Twenty Seventeen pre ソースコードのハイライト AMPページで「highlight.js」を使用する   「Crayon Syntax Highligh

2020-01-23

2020-04-05

①．「PageSpeed Insights」の計測で、「ウェブフォント読み込み中のテキストの表示」の中から【crayon-syntax-highlighter のフォント monaco】が消えた。

②．「改善できる項目」の「レンダリングを妨げるリソースの除外」の中に、「highlight.js」の css と js が表示されるようになる。

<link rel="preload" href="./wp-content/themes/twentyseventeen-child/highlight/styles/tomorrow-night-blue.css" as="style" onload="this.rel='stylesheet'">

<script async src="./wp-content/themes/twentyseventeen-child/highlight/highlight.pack.js"></script>

<script>window.addEventListener("load", function() { hljs.initHighlighting() });</script>

対策結果：「レンダリングを妨げるリソースの除外」の中から消えた。