[CSS Snippet] 편집모드에서 코드블록에 줄 번호 표시

편집 모드에서 코드블록에 줄 번호를 표시해주는 CSS Snippet입니다. 편집 모드에서만 가능한 CSS입니다. 읽기 모드에서 사용하시려면 Codeblock 관련 플러그인을 사용하셔야 됩니다. 

예시

CSS 코드

.HyperMD-codeblock-begin {
  counter-reset: line-numbers;
}

.HyperMD-codeblock.cm-line:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end) {
  padding-left: 3em;
  position: relative;
}

.HyperMD-codeblock.cm-line:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end)::after {
  align-items: flex-start;
  color: var(--text-faint);
  content: counter(line-numbers);
  counter-increment: line-numbers;
  display: flex;
  font-size: 0.8em;
  height: 100%;
  justify-content: flex-end;
  left: 0;
  position: absolute;
  text-align: right;
  width: 2em;
  padding-right: 0.5em;
  bottom: -2px;
  border-right: 1px solid var(--scrollbar-thumb-bg);
 white-space: nowrap;
}

.HyperMD-codeblock.cm-line.cm-active:not(.HyperMD-codeblock-begin):not(.HyperMD-codeblock-end)::after {
  color: var(--color-accent);
}

.HyperMD-codeblock .cm-foldPlaceholder::before {
  display: none;
}

관련 플러그인

편집, 읽기모드에서 코드블록을 스타일링하는 Code Styler 플러그인

코드블럭에 줄번호와 강조표시하는 Better Codeblock 플러그인

---