highlightjs-line-numbers.jsのCSSを調整した話

Bloggerテーマのアップデートでhighlight.jsの表示おかしくなった

僕が使っているのはふじやんさん制作のF-lightと言うBloggerテーマですが、先日のアップデートで本文が中央揃えになりました。適用してみたところ、本文は中央揃えになってくれて、それは構わないのですが、ソースコードも変な位置で中央揃えになり、表示が崩れました。状況を再現した画像を貼っておきます。

highlightjs-line-numbers.jsが怪しい

以前の記事でも書きましたが、僕はソースコードを書く記事が有る場合、highlight.jsというソースコードを綺麗に表示してくれるJavaScriptで書かれたプログラムを使っています。さらに、行番号をつけてくれるhighlightjs-line-numbers.jsというプログラムも使っています。どちらも大変に便利なもので、ブログ作成に欠かせません。過去の記事で、設定を書いてあります。こちらです。

BloggerテーマはF-lightにしました | むーなかのお知らせ

Bloggerテーマ、“F-light”についてと、自分で追加したカスタマイズを記載しています。

muunaka.blogspot.com

初め、表示が乱れてしまって途方に暮れました。実際のソースコードが記載されているはずのpreの部分にCSSで指定をしても効きませんでした。

公式ページのCSS指定方法で解決

highlightjs-line-numbers.jsのGitHub公式ページには、CSSの指定方法が具体的に書いてありました。そちらの部分をそのまま貼り付けます。

Copy
/* for block of numbers */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
 
    text-align: center;
    color: #ccc;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px;
 
    /* your custom style here */
}
 
/* for block of code */
.hljs-ln-code {
    padding-left: 10px;
}

/* for block of numbers */と書いてある通り、行番号の部分はこちらで指定されます。つまり、CSSでクラス名hljs-ln-numbersが行番号に付いているため、CSSでは.hljs-ln-numbersで指定すればいいですし、実際のソースコードにはクラス名hljs-ln-codeが行番号に付いているため、CSSでは.hljs-ln-codeで指定すればいいです。僕はここに、左揃えを意味するtext-align: left;を入れました。これで元に戻りました。

Copy
.hljs-ln-code {
    padding-left: 10px;
/* これで元通り左揃えに戻る */
    text-align: left;
}

普通に指定しても効かない部分、padding

公式ページに書いてある通り、hljs-ln-codeのクラス名を付けてCSSを指定してやるのですが、装飾に必要なpaddingだけは普通に指定するだけでは装飾が効きませんでした。行番号とソースコードをどれだけ離すかを決めるわけですから、一番重要なんですが、出来ません。何でなのかは分かりません。僕の環境だけかもしれません。その場合はCSSに詳しい人には常識かもしれませんが、!importantを付けましょう。それで出来ました。

Copy
.hljs-ln-code {
    padding-left: 10px !important;
/*これを付けると優先的に効いてくれる*/
    text-align: left;
}

まとめ

highlightjs-line-numbers.jsのGitHub公式ページにCSSの設定については書いてありますが、日本語の内容はあまり無いので記載しておきました。どなたかの役に立てば幸いです。