AMPに「highlight.js」シンタックスハイライトを適用する - アラコキからの Raspberry Pi 電子工作

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

「Crayon Syntax Highlighter」から「highlight.js」に乗り換えたが、AMPページでは【ソースコード】がハイライト表示されない。

以下、「highlight.js」を AMPページに組み込んだ記録。

　目　次

1.　WordPressでの AMP環境
2.　AMPテンプレートの子テーマ化状況
3.　AMPページへの「highlight.js」の組み込み
4.　AMPページでのCSSの調整
5.　AMPページでのハイライト結果
6.　Search Consoleの AMPでエラーが続発する

1. WordPressでの AMP環境

Webサーバーのバージョン。

Raspbian ： Buster with desktop Release date:2019-09-26
Nginx ： Stable version 1.16.1
PHP ： 7.3.12 - 2019.11.28
MariaDB ： 10.3.17

WordPressとAMP。

WordPress 5.3.2 (Twenty Seventeen child テーマ)
AMPプラグイン：バージョン 1.4.2
→　Website Mode：Reader で稼働中

Syntax Highlighter。

Syntax Highlighter：「highlight.js」でハイライト中

参考：

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

WordPress Twenty Seventeen Crayon Syntax Highlighterから highlight.jsへの移行「Crayon Syntax Highlig

2020-01-17

2020-09-01

2. AMPテンプレートの子テーマ化状況

子テーマの中に「amp」フォルダを作成し、編集対象のテンプレートをコピーして保存している。

こうすることで、ダッシュボードの「外観」→「テーマエディター」で直接編集できる。

3. AMPページへの「highlight.js」の組み込み

ampの「html-satart.php」の <head> 内に「highlight.js」の読み込みを追記する。

「highlight.js」の読み込み要領。

<!doctype html>
<html amp <?php echo AMP_HTML_Utils::build_attributes_string( $this->get( 'html_tag_attributes' ) ); // WPCS: XSS ok. ?>>
<head>
	<meta charset="utf-8">
	
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<?php do_action( 'amp_post_template_head', $this ); ?>
	<style amp-custom>
		<?php $this->load_parts( array( 'style' ) ); ?>
		<?php do_action( 'amp_post_template_css', $this ); ?>
	</style>
	
	<!--「highlight.js」を使う使う"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>
	
</head>

4. AMPページでのCSSの調整

通常ページの時と同じように、ソースコードに広い枠が表示されるので、CSSで調整する。ampの「style.php」に下記スタイルを追記した。

/*-----------------------------------------------------------*/
/*                 ソースコードの表示                          */
/*-----------------------------------------------------------*/
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;
}
pre > code {
    overflow: auto;
}
/*-----------------------------------------------------------*