highlight.jsを使ってみました

こんにちは。

以前に、コード表示のハイライトのやりかたで、SyntaxHighlightを紹介しました。

しかし、表示させると重く感じたので、highlight.jsも使ってみようと思いたちました。

ライブラリの読み込みは同様にCDNを使いました。

<cdnjs>

Copy

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/styles/atelier-heath-light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/highlight.min.js"></script>

jsdelivr

Copy

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.3.1/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.3.1/build/highlight.min.js"></script>

highlight.jsだけでは行番号が表示されないため、行番号を表示するためのライブラリhighlights-line-numbers.jsも一緒に読み込みました。

<cdnjs>

Copy

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

jsdelivr

Copy

<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>

ライブラリを読み込んだだけでは利用できないので、ロードしてあげます。

Copy

<script>
hljs.initHighlightingOnLoad(); // highlight.jsの利用開始
hljs.initLineNumbersOnLoad(); // highlights-line-numbers.jsの利用開始
</script>

CSSに以下を追加しました。

Copy

.hljs.hljs-line-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: #ccf;
    border-right: 1px solid #CCF;
    vertical-align: top;
    padding-right: 20px;
    padding-left: 20px;
}
.hljs-ln-code {
    margin: 00px;
    padding: 10px;
}
table.hljs-ln {
  white-space: pre;
  border-width: 0;
  margin-bottom: 10px;
}
table.hljs-ln .hljs-ln-line {
  border-width: 0;
  padding-left: 10px;
}
table.hljs-ln .hljs-ln-line.hljs-ln-numbers {
  padding-right: .5em;
  border-right: solid 2px #ccff00;
  text-align: right;
}

このままの設定で

～

でコードを括って表示させると、ここで表示されているようになります。

SyntaxHighlight.jsを使うよりCSSの設定が必要になりますが、細かい設定がわかりやすいようになっています。