2017-11-03

Blogger highlight.js に行番号（highlightjs-line-numbers.js）

highlightjs-line-numbers.js の導入

前回導入した highlight.js に行番号を表示するため highlightjs-line-numbers.js を導入する。
highlightjs-line-numbers.js の GitHub はこちら。

highlight.js の読み込みの後に、

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.1.0/highlightjs-line-numbers.min.js"></script>

を読み込みし、
hljs.initHighlightingOnLoad(); の後に、hljs.lineNumbersBlock();を呼べばよい。（簡単！）

前回のhighlight.jsの設定とまとめると、<head> への記載は以下のようになる。

    <!-- hilight.js -->
    <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css' rel='stylesheet'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/vbnet.min.js'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/vbscript.min.js'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.1.0/highlightjs-line-numbers.min.js'/>
    <script>hljs.initHighlightingOnLoad();</script>
    <script>hljs.initLineNumbersOnLoad();</script>

CSS の調整

見栄えをよくするため、以下をCSSに追加する。

/* for block of numbers */
td.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 */
td.hljs-ln-code {
    padding-left: 10px !important;
}

Blogger テーマデザイナーの「CSS の追加」では、!important がないと有効にならなかった（行番号とコードの間隔が詰まったままになる）。

Labels: ,

No comments:

Post a Comment