feat: add line numbers for code blocks (#984)

Author: YangFong

apps/web/src/components/CodemirrorEditor/RightSlider.vue

@@ -160,6 +160,25 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
           </Button>
         </div>
       </div>
+      <div class="space-y-2">
+        <h2>代码块行号</h2>
+        <div class="grid grid-cols-5 justify-items-center gap-2">
+          <Button
+            class="w-full" variant="outline" :class="{
+              'border-black dark:border-white border-2': store.isShowLineNumber,
+            }" @click="!store.isShowLineNumber && store.showLineNumberChanged()"
+          >
+            开启
+          </Button>
+          <Button
+            class="w-full" variant="outline" :class="{
+              'border-black dark:border-white border-2': !store.isShowLineNumber,
+            }" @click="store.isShowLineNumber && store.showLineNumberChanged()"
+          >
+            关闭
+          </Button>
+        </div>
+      </div>
       <div class="space-y-2">
         <h2>AI 工具箱</h2>
         <div class="grid grid-cols-5 justify-items-center gap-2">

apps/web/src/stores/index.ts

@@ -57,6 +57,10 @@ export const useStore = defineStore(`store`, () => {
   const isMacCodeBlock = useStorage(`isMacCodeBlock`, defaultStyleConfig.isMacCodeBlock)
   const toggleMacCodeBlock = useToggle(isMacCodeBlock)
 
+  // 是否开启代码块行号显示
+  const isShowLineNumber = useStorage(`isShowLineNumber`, defaultStyleConfig.isShowLineNumber)
+  const toggleShowLineNumber = useToggle(isShowLineNumber)
+
   // 是否在左侧编辑
   const isEditOnLeft = useStorage(`isEditOnLeft`, true)
   const toggleEditOnLeft = useToggle(isEditOnLeft)
@@ -348,6 +352,7 @@ export const useStore = defineStore(`store`, () => {
     isUseIndent: isUseIndent.value,
     isUseJustify: isUseJustify.value,
     isMacCodeBlock: isMacCodeBlock.value,
+    isShowLineNumber: isShowLineNumber.value,
   })
 
   const readingTime = reactive({
@@ -373,6 +378,7 @@ export const useStore = defineStore(`store`, () => {
       isUseJustify: isUseJustify.value,
       countStatus: isCountStatus.value,
       isMacCodeBlock: isMacCodeBlock.value,
+      isShowLineNumber: isShowLineNumber.value,
     })
 
     const raw = editor.value!.getValue()
@@ -470,6 +476,7 @@ export const useStore = defineStore(`store`, () => {
   const resetStyle = () => {
     isCiteStatus.value = defaultStyleConfig.isCiteStatus
     isMacCodeBlock.value = defaultStyleConfig.isMacCodeBlock
+    isShowLineNumber.value = defaultStyleConfig.isShowLineNumber
     isCountStatus.value = defaultStyleConfig.isCountStatus
 
     theme.value = defaultStyleConfig.theme
@@ -571,6 +578,10 @@ export const useStore = defineStore(`store`, () => {
     toggleMacCodeBlock()
   })
 
+  const showLineNumberChanged = withAfterRefresh(() => {
+    toggleShowLineNumber()
+  })
+
   const citeStatusChanged = withAfterRefresh(() => {
     toggleCiteStatus()
   })
@@ -691,6 +702,7 @@ export const useStore = defineStore(`store`, () => {
     toggleEditOnLeft,
 
     isMacCodeBlock,
+    isShowLineNumber,
     isCiteStatus,
     citeStatusChanged,
     showAIToolbox,
@@ -725,6 +737,7 @@ export const useStore = defineStore(`store`, () => {
     codeBlockThemeChanged,
     legendChanged,
     macCodeBlockChanged,
+    showLineNumberChanged,
 
     formatContent,
     exportEditorContent2HTML,
@@ -819,6 +832,7 @@ export function getAllStoreStates() {
     isDark: store.isDark,
     isEditOnLeft: store.isEditOnLeft,
     isMacCodeBlock: store.isMacCodeBlock,
+    isShowLineNumber: store.isShowLineNumber,
     isCiteStatus: store.isCiteStatus,
     showAIToolbox: store.showAIToolbox,
     isCountStatus: store.isCountStatus,

packages/core/src/renderer/renderer-impl.ts

@@ -252,24 +252,40 @@ export function initRenderer(opts: IOpts): RendererAPI {
       const langText = lang.split(` `)[0]
       const language = hljs.getLanguage(langText) ? langText : `plaintext`
 
-      let highlighted = hljs.highlight(text, { language }).value
-
-      // 处理两个完整 span 标签之间的空格
-      highlighted = highlighted.replace(/(<span[^>]*>[^<]*<\/span>)(\s+)(<span[^>]*>[^<]*<\/span>)/g, (_, span1, spaces, span2) => {
-        return span1 + span2.replace(/^(<span[^>]*>)/, `$1${spaces}`)
-      })
-
-      // 处理 span 标签开始前的空格
-      highlighted = highlighted.replace(/(\s+)(<span[^>]*>)/g, (_, spaces, span) => {
-        return span.replace(/^(<span[^>]*>)/, `$1${spaces}`)
-      })
-
-      // tab to 4 spaces
-      highlighted = highlighted.replace(/\t/g, `    `)
-      highlighted = highlighted
-        .replace(/\r\n/g, `<br/>`)
-        .replace(/\n/g, `<br/>`)
-        .replace(/(>[^<]+)|(^[^<]+)/g, str => str.replace(/\s/g, `&nbsp;`))
+      let highlighted = ``
+
+      if (opts.isShowLineNumber) {
+        const rawLines = text.replace(/\r\n/g, `\n`).split(`\n`)
+
+        const highlightedLines = rawLines.map((lineRaw) => {
+          let lineHtml = hljs.highlight(lineRaw, { language }).value
+          lineHtml = lineHtml.replace(/(<span[^>]*>[^<]*<\/span>)(\s+)(<span[^>]*>[^<]*<\/span>)/g, (_, span1, spaces, span2) => span1 + span2.replace(/^(<span[^>]*>)/, `$1${spaces}`))
+          lineHtml = lineHtml.replace(/(\s+)(<span[^>]*>)/g, (_, spaces, span) => span.replace(/^(<span[^>]*>)/, `$1${spaces}`))
+          lineHtml = lineHtml.replace(/\t/g, `    `)
+          lineHtml = lineHtml.replace(/(>[^<]+)|(^[^<]+)/g, str => str.replace(/\s/g, `&nbsp;`))
+          return lineHtml === `` ? `&nbsp;` : lineHtml
+        })
+
+        const lineNumbersHtml = highlightedLines.map((_, idx) => `<section style="padding:0 10px 0 0;line-height:1.75">${idx + 1}</section>`).join(``)
+        const codeInnerHtml = highlightedLines.join(`<br/>`)
+        const codeLinesHtml = `<div style="white-space:pre;min-width:max-content;line-height:1.75">${codeInnerHtml}</div>`
+        const lineNumberColumnStyles = `text-align:right;padding:8px 0;border-right:1px solid rgba(0,0,0,0.04);user-select:none;background:var(--code-bg,transparent);`
+
+        highlighted = `
+          <section style="display:flex;align-items:flex-start;overflow-x:hidden;overflow-y:auto;width:100%;max-width:100%;padding:0;box-sizing:border-box">
+            <section class="line-numbers" style="${lineNumberColumnStyles}">${lineNumbersHtml}</section>
+            <section class="code-scroll" style="flex:1 1 auto;overflow-x:auto;overflow-y:visible;padding:8px;min-width:0;box-sizing:border-box">${codeLinesHtml}</section>
+          </section>
+        `
+      }
+      else {
+        highlighted = hljs.highlight(text, { language }).value
+        highlighted = highlighted.replace(/(<span[^>]*>[^<]*<\/span>)(\s+)(<span[^>]*>[^<]*<\/span>)/g, (_, span1, spaces, span2) => span1 + span2.replace(/^(<span[^>]*>)/, `$1${spaces}`))
+        highlighted = highlighted.replace(/(\s+)(<span[^>]*>)/g, (_, spaces, span) => span.replace(/^(<span[^>]*>)/, `$1${spaces}`))
+        highlighted = highlighted.replace(/\t/g, `    `)
+        highlighted = highlighted.replace(/\r\n/g, `<br/>`).replace(/\n/g, `<br/>`).replace(/(>[^<]+)|(^[^<]+)/g, str => str.replace(/\s/g, `&nbsp;`))
+      }
+
       const span = `<span class="mac-sign" style="padding: 10px 14px 0;">${macCodeSvg}</span>`
       const code = `<code class="language-${lang}" ${styles(`code`)}>${highlighted}</code>`
       return `<pre class="hljs code__pre" ${styles(`code_pre`)}>${span}${code}</pre>`

packages/shared/src/configs/store.ts

@@ -3,6 +3,7 @@ export const storeLabels: Record<string, string> = {
   isDark: `深色模式`,
   isEditOnLeft: `左侧编辑`,
   isMacCodeBlock: `Mac 代码块`,
+  isShowLineNumber: `代码块行号`,
   isCiteStatus: `微信外链接底部引用状态`,
   isCountStatus: `字数统计状态`,
   isUseIndent: `使用缩进`,

packages/shared/src/configs/style.ts

@@ -232,6 +232,7 @@ export const legendOptions: IConfigOption[] = [
 export const defaultStyleConfig = {
   isCiteStatus: false,
   isMacCodeBlock: true,
+  isShowLineNumber: false,
   isCountStatus: false,
   theme: themeOptions[0].value,
   fontFamily: fontFamilyOptions[0].value,

packages/shared/src/types/common.ts

@@ -32,6 +32,7 @@ export interface IOpts {
   citeStatus?: boolean
   countStatus?: boolean
   isMacCodeBlock?: boolean
+  isShowLineNumber?: boolean
 }
 
 export type ThemeStyles = Record<Block | Inline, ExtendedProperties>