このページの目的
highlight.js とともに highlightjs-line-numbers.js を使い、行番号を表示する。
コード
HTML
// Test
if (foo) {
echo 'Hello, World!';
}
- PHPのコードです。
CSS
table.hljs-ln {
border-width: 0;
margin-bottom: 0;
}
table.hljs-ln .hljs-ln-line {
border-width: 0;
}
table.hljs-ln .hljs-ln-line.hljs-ln-numbers {
padding-right: .5em;
}
- 行番号は table 要素を使って表示されるため、CSSの追加が必要になる。追加しないと、デフォルトのスタイルがあたってしまい、例えばコード内に枠線が表示されたりする。
JavaScript
hljs.initHighlightingOnLoad();
document.querySelectorAll('.codes-with-num').forEach(function(e, idx) {
hljs.lineNumbersBlock(e);
});
- Highlight.js をデフォルトですべての要素に適用させ、行番号は特定の要素のみに適用させる場合のコードです。
デモ
// Test
if (foo) {
echo 'Hello, World!';
}