Cosense Toolbox
行番号表示するuserCSS
テーマ変更#行番号#エディタ#CSS counter

行番号表示するuserCSS

エディタの各行に行番号がつきます。エディタのように何行目を見ているかがひと目で分かり、長いページでも位置を把握しやすくなります。今カーソルがある行の番号は太字で強調されるので、編集中の場所も迷いません。

入れるだけで自動的に有効になります（※幅の広い画面向け。スマホなど狭い画面では表示されません）。

デモ

疑似Cosenseページ・ライブプレビュー

インストール

設定ページの code:style.css に貼る
@import url('/api/code/cosense-toolbox/行番号表示するuserCSS/style.css');
ソースコード全文を見る（CSS）
/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
  .lines {
    counter-reset: line;
  }

  /* タイトルから数えるときは :not(.line-title) を消してね */
  .line:not(.line-title) {
    counter-increment: line;
  }

  /* タイトルから数えるときは :not(.line-title) を消してね */
  .app:not(.presentation) .line:not(.line-title)::before {
    content: counter(line);
    position: absolute;
    display: inline-block;
    left: -110px;
    z-index: 10;
    min-width: 50px;
    text-align: right;
    vertical-align: middle;

    /* 行番号のフォントとか色とかの指定はここ */
    font-family: monospace;
    color: grey;
  }

  /* カーソル行の行番号を濃く表示する */
  .line:not(.line-title)::before {
    opacity: 0.5;
  }
  .line.cursor-line:not(.line-title)::before {
    opacity: 1;
    font-weight: bolder;
  }
}
元のCosenseページを見る ↗