1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
  .section-title, .code-block-start { counter-reset: codeline }
  .code-block code > span:not([class]) { counter-increment: codeline }
  .code-block code > span:not([class])::before { 
    content: counter(codeline); 
    position: absolute; display: inline-block; left: -4em; z-index: 10; 
    min-width: 50px; text-align: right; vertical-align: bottom;
    
    /* ↓行番号のフォントとか色とかの指定はここ */
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace; color: grey }
  
  /* カーソル行の行番号を濃く表示する */
  .code-block code > span:not([class])::before { opacity: .5 }
  .cursor-line .code-block code > span:not([class])::before { opacity: 1; font-weight: bolder } }