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 がないと有効にならなかった（行番号とコードの間隔が詰まったままになる）。
No comments:
Post a Comment