ソースコードボックスをQiita風のシンタックスハイライトにしてみた

どうも、タカフです。

このブログでは、役に立つコードをシンプルに記事にしていくのをコンセプトとしているのですが、そのコード表示に関して、SANGOのデフォルトのソースコードのスタイルはシンタックスハイライト機能も無いこともあり、あまり好きではありませんでした。

なのでSANGOから小テーマを作成して（小テーマを作成する方法はこちら）、自分でカスタマイズしてみました。

目指すはQiita風ソースコードボックスです。Qiitaのソースコードボックスってとても見やすいと思います。ソースコードをみんなで共有することをコンセプトにしているのですから見やすくしていることに注力しているのがわかります。

ここは巨人の肩に乗る気持ちでQiita風ソースコードボックスにしてみます。

まずは小テーマ作成

テーマに直接手を加えると、テーマアップデートしたときにその変更が消えてしまいます。なのでWordPressでは親テーマの機能・デザインを継承した小テーマという機能があります。

作り方は小テーマ作成の方法を参照してください。

highlight.jsのインストール

シンタックスハイライトの機能をつけたかったので、highlight.jsをインストールしてみました。

functions.phpにhighlight.jsを読み込む記述をして（これがQiita風ソースコードボックスの成果物です↓笑）

functions.php

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/css/sango-child.css', ['parent-style'] );
    
    // highlight.jsの読み込み
    wp_enqueue_script( 'highlight.js', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js', [], '9.12.0', true );
    wp_enqueue_script( "script.js", get_stylesheet_directory_uri() . '/script.js', '', [], '1.0', true );
}

script.jsでhighlight.jsを有効になるようにしました。

script.js

hljs.initHighlightingOnLoad();

親テーマのcssの上書き

SANGOでもhighlight.jsでも<pre><code>に対してスタイルがあたっているので、小テーマでhighlight.jsのスタイルを強くあたるように書く必要がありました。
cssの優先順位を利用して書いたのが以下のcssです。

sango-child.scss

@charset "utf-8";

#container{
  // highlight.jsを使いたいけど、SANGOの既存スタイルと被るので#container内にして強くする
  @import "vs2015.scss";  // highlight.jsのカラーを持ってきてその上で上書きする
  pre{
    padding: 0;
    white-space: pre;
    -moz-tab-size: 2 ;	/* Firefox用 */
    tab-size: 2 ;
  }
  code{
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
    border-radius: 0;
  }
  .hljs{
    padding: 1em 32px;
  }
  
  // SANGOが .entry-content にpaddingをとっているので、Qiita風にするためにmarginで広げる
  pre{  // これは、width: 480px以下
    margin-left: -15px;
    margin-right: -15px;
  }
  @media only screen and (min-width: 481px){
    pre{
      margin-left: -25px;
      margin-right: -25px;
    }
  }
  @media only screen and (min-width: 768px){
    pre{
      margin-left: -25px;
      margin-right: -25px;
    }
  }
  @media only screen and (min-width: 1030px){
    pre{
      margin-left: -40px;
      margin-right: -40px;
    }
  }
}

今回はただのこだわりたいが為のすごくニッチな記事となってしまいました。

現場からは以上です。