[WordPress] コードをハイライト hightlight.js

ハイライト

当サイトでは、ソースコードをただテキストで書くのではなく、ハイライト表示にして色付きで見やすくしています。

<p>こんな感じにHighlight.jsを使用しています。</p>

長年、WP Code Highlight.jsブラプインを使用していたのですが、すっと更新されておらず作動しなくなってしまいました。

新規でハイライト(シンタックスハイライト)をHighlight.js を使用し、プラグイン無しで使う方法と、WP CodeHighlight.jsプラグインからの乗り換え方法をご紹介します。

Highlight.jsの入手

Highlight.js にアクセスし、[Get versionXX.X]ボタンを押して設定します。

CDN版でも良いのですが、優れているが故に重たくなるので、必要最小限の機能に絞ります。

ハイライト

チェックを外してカスタマイズ。そして[download]します。zipを解凍すると、沢山のファイルがありますが、highlight.min.jsとCSS1つだけでOKです。

CSSは、デモページ から好きな色を選び、解凍フォルダの中のstyleの中から該当するファイルを探しだしておきます。

Highlight.jsの設置

headにファイルをリンクします。function.phpからheaderに出力しても良いですし、簡単にheader.phpに直接リンクしてもOKです。最後の一行は必須の様です。

CDNの場合

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

カスタマイズしたファイルの場合

先ほどの2つのファイルを子テーマの中に置きます。私の場合は「highlight」フォルダを作成しました。

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/highlight/atom-one-dark.min.css">
<script src="<?php echo get_stylesheet_directory_uri(); ?>/highlight/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

書き方

<pre><code>と</code></pre>で囲みます

WP Code Highlight.jsからの修正

先にも書きましたが、WP Code Highlight.jsからの乗り換えです。投稿が沢山あり、もやは手動で修正する事は考えたくも無い状態です。

WP Code Highlight.jsは、[code][/code]で囲むので、<pre><code>と</code></pre>に修正しなければなりません。

一括置換

Search Regexという、データベースから書き換えが出来るプラグインがあります。しかし、[カッコ] にオプションが割り当てられている為、[code]が使えません。

以前、ご紹介した Database Search and Replace Script in PHP を使用しました。

[code]と[/code]を2回に分けて書き換えをしたのですが、2回目[/code]のdry runでAjaxがどうとかってエラーが出ました。javascript??関連なの??と思いながら、使用しているプラグインを「無効化」しても上手く行かなくて、何かと問題を起こすサーバーの「WAF」の設定をOFFにすれば良いのではないかとロリポップ にアクセスし、やってみました。案の定、上手く行きました。

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


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