支持配置显示行号

Author: qianmoQ

docs/content/usage/code.md

@@ -0,0 +1,37 @@
+---
+title: CodeBlock
+icon: code
+---
+
+PageForge 支持使用代码块，用户可以自定义代码块的样式，以便更好地展示代码的语法和格式。
+
+## 基本语法
+
+---
+
+以下是一个简单的示例：
+
+```java
+public class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+
+## 配置行号
+
+---
+
+> 默认情况下，代码块不会显示行号，但可以通过配置 `showLineNumbers` 或者 `showLineNumbers=true` 参数来启用行号显示。格式为 
+> **```java showLineNumbers** 
+> 或者
+> **```java showLineNumbers=true**
+
+```java showLineNumbers
+public class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```

docs/pageforge.yaml

@@ -29,6 +29,7 @@ i18n:
       Setup: Setup
       Usage: Usage Docs
       EjsTemplate: EJS Template
+      CodeBlock: Code Block
       ReleaseNotes: Release Notes
   zh-CN:
     name: 中文
@@ -38,6 +39,7 @@ i18n:
       Setup: 设置
       Usage: 使用文档
       EjsTemplate: EJS 模板
+      CodeBlock: 代码块
       ReleaseNotes: 发布日志
 
 footer:
@@ -92,6 +94,7 @@ nav:
       - /usage/alert
       - /usage/tab
       - /usage/ejs
+      - /usage/code
   - ReleaseNotes:
       - /release/2025.1.0
       - /release/1.0.0

lib/extension/marked/pageforge-code-block.js

@@ -48,12 +48,13 @@ const PageForgeCodeBlockExtension = {
         return src.match(/^```/)?.index;
     },
     tokenizer(src, tokens) {
-        const rule = /^```(\w*)\n([\s\S]*?)\n```/;
+        const rule = /^```(\w*)(?:\s+showLineNumbers(?:=(true|false))?)?\n([\s\S]*?)\n```/;
         const match = rule.exec(src);
 
         if (match) {
             let language = match[1].toLowerCase();
-            const code = match[2].replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            const showLineNumbers = match[2] === undefined && match[0].includes('showLineNumbers') ? true : match[2] === 'true';
+            const code = match[3].trim().replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
             // 处理特殊语言映射
             const languageMap = {
@@ -76,10 +77,12 @@ const PageForgeCodeBlockExtension = {
                         raw: match[0],
                         lang: language,
                         text: highlightedCode,
+                        showLineNumbers,
                         tokens: []
                     };
                 }
-            } catch (e) {
+            }
+            catch (e) {
                 console.warn(`Failed to highlight code for language: ${language}`, e);
             }
 
@@ -88,6 +91,7 @@ const PageForgeCodeBlockExtension = {
                 raw: match[0],
                 lang: language,
                 text: code,
+                showLineNumbers,
                 tokens: []
             };
         }
@@ -96,7 +100,8 @@ const PageForgeCodeBlockExtension = {
     renderer(item) {
         return loadComponent('block-code', {
             language: item.lang,
-            text: item.text
+            text: item.text,
+            showLineNumbers: item.showLineNumbers
         });
     }
 };

templates/components/block-code.js

@@ -3,10 +3,17 @@ module.exports = function template(item) {
     const language = item.language ? `language-${item.language}` : '';
     const languageLabel = item.language ? `<div class="!absolute !right-2 !top-2 !text-sm !text-gray-500 !dark:text-gray-400 !bg-gray-100 !dark:bg-gray-800 !z-10">${item.language}</div>` : '';
 
+    const lines = item.text.split('\n');
+    const lineNumbers = lines.map((_, i) => `<span class="!block !w-8 !pr-2 !text-right !text-gray-500 !select-none">${i + 1}</span>`).join('');
+    const lineNumbersDiv = item.showLineNumbers ? `<div class="!py-2.5 !bg-gray-200 !dark:bg-gray-700">${lineNumbers}</div>` : '';
+
     return `<div class="${wrapperClass}">
         ${languageLabel}
-        <div class="!overflow-x-auto">
-            <pre class="!px-3 !py-2.5 !m-0"><code class="${language}">${item.text}</code></pre>
+        <div class="!overflow-x-auto !flex">
+            ${lineNumbersDiv}
+            <div class="!flex-1">
+                <pre class="!px-3 !py-2.5 !m-0"><code class="${language}">${item.text}</code></pre>
+            </div>
         </div>
     </div>`;
 };