WordPressで、Crayon Syntax Highlighterを使用せずにPHPコードを画面に表示する

hoge

WordPressサイトが最近、激重になってきたので、テコ入れ。

とりあえず、まずは、Crayon Syntax Highlighterとサヨナラすることにした。
（すっごく便利なプラグインだったんだけどね・・・重いんだよね・・・今までありがとう。さようなら。）

 

ということで、今まではCrayonさんがしていてくれていた処理を、PHPで作らねばならなくなった。

コードをそのまま画面に表示させるだけの、かなりシンプルなものだけど、色充てなんかは導入するしないはお好みで。

（なお、言語別のハイライトは便利なライブラリがある様子。導入方法はこちら。）

 

 

preやcodeタグの中身を、解析せずにそのまま画面に表示する処理

「<pre～>中身</pre>」や「<code～>中身</code>」っていうタグがあったら、中身をプログラムとして処理せずに、そのまま画面表示させる。

タグに「<pre class="hoge"」みたいにclassやidとかのプロパティが付いてる場合にも対応。

もちろん、中身に「<?php」なんて記述があっても、そのまま表示する。
（PHPプログラムとして認識せず、文字列として扱う）

 

functions.php

/**
 * preタグの時は、コード解析せずにそのまま画面に表示する
 */
 function the_content_code($text){

  // preタグ用
  $text = preg_replace_callback( '/(\<pre.*?\>)(.+?)(\<\/pre\>)/s', function ($matches) {
    // 色なしバージョン
    return $matches[1].htmlspecialchars($matches[2], ENT_QUOTES, 'UTF-8', $double_encode = false).$matches[3];
    // 色つきバージョン（PHPのみ ※<?php ?>で囲われているもののみ対象）
    // return $matches[1].highlight_string( html_entity_decode($matches[2],ENT_QUOTES,'UTF-8') ,true).$matches[3];
    // 色つきバージョン（highlight.jsを使用する場合）
    // return $matches[1]."<code>".htmlspecialchars($matches[2], ENT_QUOTES, 'UTF-8', $double_encode = false)."</code>".$matches[3];
  },  $text );

  return $text;
 }
 add_filter('the_content', 'the_content_code');

 

管理画面用に、クイックタグを追加

編集するときに、ボタンでpreやcodeタグを追加できるようにするためのもの。

これは、必須ではないのでお好みで。

functions.php

/**
 * Admin テキストエディタにクイックタグとしてpreとcodeを追加
 */
 function my_add_quicktags() {
  if (wp_script_is('quicktags')){
 ?>
 <script type="text/javascript">
  QTags.addButton( 'qt_pre', 'pre', '<pre>', '</pre>', false, '', 0 );
 </script>
 <?php
} }
add_action( 'admin_print_footer_scripts', 'my_add_quicktags' );

 

CSSで表示を整える

「white-space: pre-wrap;」はほぼ必須。後はお好みで。

CSS

pre{
  background: #eee;
  white-space: pre-wrap;
  word-break: break-word;
}

 

言語別のハイライトで体裁を整える

やってもやらなくても良いのだけど、便利なライブラリがあるから手動で入れてみた。

 

便利なライブラリ。

・【JSライブラリ】highlight.js
・【PHPライブラリ】GeSHi - Generic Syntax Highlighter

 

今回は、highlight.jsを導入。

 

footer.php

「wp_footer()」を読み込んでる場所の上あたりに記述。

JSファイルもCSSファイルも、CDNで読み込んでいる。

<?php // ソースコードのハイライト表示（highlight.js） ?>
<?php if ( is_singular( 'post' ) ): // 投稿ページの時だけ、適応 ?>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/default.min.css">
<script>
  jQuery(function($) {
    $.getScript("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js", function() {
        hljs.initHighlightingOnLoad();
    });
  }(jQuery));
</script>
<?php endif; ?>