WordPressを使ってプログラムコードを記載する時、色がつくと非常に見やすくなります。導入自体は難しくはないのですが、ファイルをダウンロードして、テーマファイルにアップロードして、リンクを貼って…という具合に、地味に面倒な作業だったりします。そこで当サイトでも使っているfunctions.phpにコピペで出来るコードをご紹介します。

コード

以下のコードをfunctions.phpにコピペしてください。

function prettyprint_addCode(){
  //投稿タイプpostの時
  if( 'post' === get_post_type() ){
    //コードを追加
    echo <<< EOM
    <style>pre{max-width:748px;font-family:Consolas,"Courier New",Courier,Monaco,monospace;line-height:1.3;font-size:0.9rem;font-weight:normal;padding:1.5rem;margin:2rem 0;-webkit-user-select:all;-moz-user-select:all;user-select:all;overflow-x:auto;}.prettyprint ol.linenums>li{list-style-type:decimal;line-height:1.3;}</style>
    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=none&skin=sons-of-obsidian"></script>

    EOM;
  }
}
function prettyprint_addclass( $content ) {
  //投稿タイプpostの時
  if( 'post' === get_post_type() ){
    //prettyprint用：preタグにクラス付与
    return str_replace( '<pre>', '<pre class="prettyprint linenums">', $content );
  }else{
    //何もしないで返す
    return $content;
  }
}
add_action( 'wp_footer', 'prettyprint_addCode');
add_filter( 'the_content', 'prettyprint_addclass');

コード解説

• prettyprint_addCodeでは、通常投稿（post）の時に、prettify.jsとスタイルのコードを追加しています。
• prettyprint_addclassでは、通常投稿（post）のコンテンツを表示する際、preタグに対してprettyprintとlinenumsのクラスを付与する処理をしています。

カスタマイズ

• 見た目を変えたいときは、prettyprint_addCodeのstyleをいじってください。ただし、prettyprintで設定されたスタイルもありますので、行間や余白程度にしておくと良いでしょう。
• CSSはstyle.cssに書きたい場合は、該当箇所を削除して別途記載してください。今回は簡単にコピペできる事を重視して、スタイルを直接記述しています。
• prettyprintのテーマを変更したい場合は、skin=sons-of-obsidian　の箇所をお好きなテーマ名に変更してください。