btest’s blog

This blog is for development testing.

codeに行番号 pre、javascript、css

コピー時に改行が消える問題を修正

/* --- codeに行番号 --- */
.code-line {
  counter-increment: linenumber; /*code-lineクラスの数でカウント*/
}
.code-line:nth-child(even){
  background-color: #E8E9F2; /*偶数行のみ背景色を適用*/
}
.code-line::before {
  content: counter(linenumber); /*行番号を擬似要素として表示*/
  display:inline-block;
  color: #ccc;
  text-align: left;
  width: 30px;
  padding: 0 5px 0 0;
}
/* --- codeに行番号 --- */
var codeBlocks = document.getElementsByClassName('code');
[].forEach.call(codeBlocks, function(e) {
  if (!/lang/.test(e.className)) {
      return;
  }
  var lines = e.innerHTML.split(/\n/);
  var codeBlock = "";
  lines.forEach(function(line){
    if(line != ""){
      codeBlock += '\n<span class="code-line">' + line + '</span>'      
    }
  })
  e.innerHTML = codeBlock;
});