Line Numbers in code blocks overlapping text

[diva-D]

I encountered an issue with the theme where the line numbers in a code block are not styled properly. They overlap the code content and don't sit properly on the left side of the code block

Steps to reproduce:

1. Open a code block in Logseq with the Bear theme applied.
2. Notice that the line numbers are not styled correctly, making it difficult to read and differentiate from the code content.

Expected Behavior:
The line numbers and code "gutter" should be properly left aligned, so they don't overlap the code content

Actual Behavior:
The line numbers appear unstyled or improperly styled, blending with the code content and causing readability issues.

Additional Information:

• Logseq version: 0.10.9
• Theme version: 0.0.37

[miaoyang129]

I encounter the same problem, have you got any solution?

[miaoyang129]

I tried to fix this problem with GPT but failed, at last I found an alternative solution: disable the code block line number. If you don't mind the absence of line number, you can add the following code to your 'custom.css':

/* --- Disable line numbers cleanly in all code blocks --- */
.extensions__code .CodeMirror-gutters,
.extensions__code .cm-gutters,
.extensions__code .CodeMirror-linenumber,
.extensions__code .cm-lineNumbers {
  display: none !important;
  width: 0 !important;
}

/* Adjust code content to fill full width */
.extensions__code .CodeMirror-lines,
.extensions__code .cm-content {
  margin-left: 0 !important;
}

After this modification, you get the following interface:

[miaoyang129]

I've fixed this problem, just edit your custom.css to the following content:

@import url('https://rcvd.github.io/logseq-bear-theme/bear.css');

/* 行号 gutter 宽度 */
.CodeMirror-gutter.CodeMirror-linenumbers { width: 30px !important; }

/* 代码内容与 gutter 对齐 */
.CodeMirror-sizer { margin-left: 30px !important; }

/* 行号元素占满 gutter，右对齐并留出与代码的间距 */
.CodeMirror-gutter-elt {
  left: 0 !important;
  width: 100% !important;
  text-align: right;
  padding-right: 8px;   /* 调整数字与代码之间的空隙 */
}

you will get the following interface: