AMPページを「highlight.php」を使って シンタックスハイライトする

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

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

2020-01-23

2020-04-05

mkdir /home/yaopi/www/wp17/wp-content/themes/twentyseventeen-child/bin

sudo nano .bashrc
export PATH="$PATH:/home/yaopi/www/wp17/wp-content/themes/twentyseventeen-child/bin“
source .bashrc

sudo su
curl -sS https://getcomposer.org/installer | php

composer のインストール結果。

whereis composer
composer -V

composer のインストール場所とバージョンの確認結果。

「composer」と入力して、composer の動作確認を行う。

cd /home/yaopi/www/wp17/wp-content/themes/twentyseventeen-child
pwd

composer require scrivo/highlight.php

highlight.phpのインストール結果。

WordPressのテーマファイル内に「vendor」というディレクトリーが作成され、この中に「highlight.php」に関するファイル一式がインストールされる。

require_once __DIR__ . '/vendor/autoload.php';
use Highlight\Highlighter;

add_filter('the_content', function($content) {
     $content = preg_replace_callback('/<pre><code(.*?)>(.+?)<\/code><\/pre>/s', function($matches) {
          $highlighter = new Highlighter();
          $input = html_entity_decode($matches[2]);
          $haveclassname = preg_match('/class=\"(.*)\"/',$matches[1],$classname);
          if ($haveclassname) {
               $output = $highlighter->highlight($classname[1],$input)->value;
               $html = '<pre><code class=”hljs '.$classname[1].'">'.$output.'</code></pre>';
          } else {
               $highlighter->setAutodetectLanguages([
               'html',
               'xml',
               'css',
               'bash',
               'http',
               'javascript',
               'nginx',
               'php',
               'perl',
               'python',
               'sql',
               'json',
               'accesslog',
               'console',
               'shell'
          ]);
          $output = $highlighter->highlightAuto($input)->value;
          $html = '<pre><code class="hljs '.$highlighter->highlightAuto($input)->language.'">'.$output.'</code></pre>';
     }
     return $html;
     }, $content);
return $content;
});

/*-----------------------------------------------------------*/
/* Tomorrow Night Blue Theme */
/*-----------------------------------------------------------*/
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */

/* Tomorrow Comment */
.hljs-comment,
.hljs-quote {
  color: #7285b7;
}

/* Tomorrow Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
  color: #ff9da4;
}

/* Tomorrow Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
  color: #ffc58f;
}

/* Tomorrow Yellow */
.hljs-attribute {
  color: #ffeead;
}

/* Tomorrow Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
  color: #d1f1a9;
}

/* Tomorrow Blue */
.hljs-title,
.hljs-section {
  color: #bbdaff;
}

/* Tomorrow Purple */
.hljs-keyword,
.hljs-selector-tag {
  color: #ebbbff;
}

.hljs {
  display: block;
  overflow-x: auto;
  background: #002451;
  color: white;
  padding: 0.5em;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}
/*-----------------------------------------------------------*/

AMPでコードハイライト（シンタックスハイライト）を適用するために、Wordpressにhighlight.phpを導入する | web net FORCE

最近AMPページへのアクセスが多いのだが、AMPページではJavascriptが使えず、そのためコードハイライトが行えて…

https://webnetforce.net/amo-syntax-highlight-with-php/

通常ページでの、ハイライト結果。シンタックスがハイライトされてはいるが、背景色が変わっていないので見にくい。

AMPページでの、ハイライト結果。全く、シンタックスがハイライトされていない。

/*-----------------------------------------------------------*/
/*      pre     highlight.php 用 スタイル調整                */
/*-----------------------------------------------------------*/
pre{
    border: none;
	background: #002451;
}
pre > code {
	overflow: auto;
	font-size: 12px;
	color: #fff !important;
}

/*-----------------------------------------------------------*/
/*         highlight.php ソースコードの表示                  */
/*-----------------------------------------------------------*/
pre {
	background: #002451;
	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;
	color: #fff;
}

通常ページでの、ハイライト結果。

AMPページでの、ハイライト結果。（通常ページとは、ハイライト表示の色が異なるが・・・。）