HOME → 3 WordPress → 04 運用とトラブル → 

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

WordPress Twenty Seventeen
pre ソースコードのハイライト
AMPページで「highlight.js」を使用する
 
「Crayon Syntax Highlighter」から「highlight.js」に乗り換えたが、AMPページでは【ソースコード】がハイライト表示されない。
 
ampページではハイライトされない
 
以下、「highlight.js」を 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」でハイライト中
 
 
参考:
 
 
 
2. AMPテンプレートの子テーマ化状況
 
子テーマの中に「amp」フォルダを作成し、編集対象のテンプレートをコピーして保存している。
子テーマの中に「amp」フォルダを作成し、編集対象のテンプレートをコピーして保存している
 
こうすることで、ダッシュボードの「外観」→「テーマエディター」で直接編集できる。
ダッシュボードの「外観」→「テーマエディター」で直接編集できる。
 
 
 
3. AMPページへの「highlight.js」の組み込み
 
ampの「html-satart.php」の <head> 内に「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;
}
/*-----------------------------------------------------------*
 
 
 
5. AMPページでのハイライト結果
 
amp画面が広い場合。
amp画面が広い場合
 
amp画面を狭くした場合。スクロールバーが表示される。
amp画面を狭くした場合
 
言語が、nginx の場合。
言語が、nginx の場合
 
 
 
6. Search Consoleの AMPでエラーが続発する
 
AMPページで、ソースコードは正しくハイライトされているが、Search Consoleの AMPでエラーが続発する。
 
「カスタム JavaScript は使用できません。」エラー。
カスタム JavaScript は使用できません。
 
「ホワイトリストに登録されたフォント プロバイダを除き、外部のスタイルシートはサポートされていません。代わりにドキュメント インライン「style amp-custom」タグを使用してください。」エラー。
ホワイトリストに登録されたフォント プロバイダを除き、外部のスタイルシートはサポートされていません。
 
止む無く【「highlight.js」の組み込み 】を中止する。
 
 
参考:
 
以上。
(2020.01.23)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください