支持 code block 解析

devlive-community · Dec 29, 2024 · 3f5f4ca · 3f5f4ca
1 parent 4010499
commit 3f5f4ca
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 6 deletions.
diff --git a/.github/workflows/pageforge-ci.yml b/.github/workflows/pageforge-ci.yml
@@ -85,7 +85,7 @@ jobs:
         run: pnpm run build || echo "No build script found"
 
   test-deploy:
-    needs: test
+    needs: test-command
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3

diff --git a/lib/dev-server.js b/lib/dev-server.js
@@ -24,6 +24,7 @@ class DevServer {
             this.config.sourcePath,       // 监听整个源文件目录
             this.config.templatePath,     // 监听整个模板目录
             this.config.assetsPath,        // 监听资源目录
+            path.join(__dirname, '..', 'templates'),
             path.join(process.cwd(), 'pageforge.yaml')
         ].filter(Boolean);  // 过滤掉 undefined 或 null 的路径
 

diff --git a/lib/extension/marked/pageforge-code-block.js b/lib/extension/marked/pageforge-code-block.js
@@ -0,0 +1,40 @@
+const {marked} = require("marked");
+const {loadComponent} = require("../../component-loader");
+
+const PageForgeCodeBlockExtension = {
+    name: 'pageforgeCodeBlock',
+    level: 'block',
+    start(src) {
+        return src.match(/^```/)?.index;
+    },
+    tokenizer(src, tokens) {
+        const rule = /^```(\w*)\n([\s\S]*?)\n```/;  // 匹配代码块语法
+        const match = rule.exec(src);
+
+        if (match) {
+            return {
+                type: 'pageforgeCodeBlock',
+                raw: match[0],
+                lang: match[1],         // 语言标识
+                text: match[2],         // 代码内容
+                tokens: []
+            };
+        }
+        return false;
+    },
+    renderer(item) {
+        return loadComponent('block-code', {
+            language: item.lang,
+            text: item.text
+        });
+    }
+};
+
+marked.use({
+    extensions: [
+        PageForgeCodeBlockExtension
+    ],
+    breaks: true
+});
+
+module.exports = PageForgeCodeBlockExtension;
diff --git a/lib/extension/marked/pageforge-inline-code.js b/lib/extension/marked/pageforge-inline-code.js
@@ -2,7 +2,7 @@ const {marked} = require("marked");
 const {loadComponent} = require("../../component-loader");
 
 const PageForgeCodeExtension = {
-    name: 'pageforgeCode',
+    name: 'pageforgeInlineCode',
     level: 'inline',
     start(src) {
         return src.match(/.*`/)?.index;  // 匹配任何以反引号结尾的内容
@@ -14,7 +14,7 @@ const PageForgeCodeExtension = {
 
         if (match && !src.startsWith('```')) {
             return {
-                type: 'pageforgeCode',
+                type: 'pageforgeInlineCode',
                 raw: match[0],
                 prefix: match[1],     // 代码前的文本
                 text: match[2],       // 代码内容
@@ -25,7 +25,7 @@ const PageForgeCodeExtension = {
         return false;
     },
     renderer(item) {
-        return item.prefix + loadComponent('code', {text: item.text}) + item.suffix;
+        return `<span class="inline-block my-1">${item.prefix}${loadComponent('inline-code', {text: item.text})}${item.suffix}</span>`;
     }
 };
 

diff --git a/lib/extension/marked/pageforge-marked.js b/lib/extension/marked/pageforge-marked.js
@@ -3,6 +3,7 @@ const {loadComponent} = require('../../component-loader');
 const PageForgeImageExtension = require('./pageforge-image');
 const PageForgeLinkExtension = require('./pageforge-link');
 const PageForgeInlineCodeExtension = require('./pageforge-inline-code');
+const PageForgeCodeBlockExtension = require('./pageforge-code-block');
 
 const renderer = {
     paragraph({tokens}) {
@@ -53,7 +54,8 @@ marked.use({
     extensions: [
         PageForgeImageExtension,
         PageForgeLinkExtension,
-        PageForgeInlineCodeExtension
+        PageForgeInlineCodeExtension,
+        PageForgeCodeBlockExtension
     ],
     renderer,
     breaks: false

diff --git a/templates/components/block-code.js b/templates/components/block-code.js
@@ -0,0 +1,8 @@
+module.exports = function template(item) {
+    const className = "block w-full bg-gray-100 text-gray-900 my-2 px-3 py-2.5 rounded font-mono leading-normal";
+    const language = item.language ? `language-${item.language}` : '';
+
+    const cleanText = item.text.trim();
+
+    return `<pre class="${className}"><code class="${language}">${cleanText}</code></pre>`;
+};
diff --git a/templates/components/code.js → templates/components/inline-code.js b/templates/components/code.js → templates/components/inline-code.js
@@ -1,6 +1,6 @@
 module.exports = function template(item) {
     return `
-        <code class="bg-gray-100 text-gray-900 px-1.5 py-0.5 rounded text-sm font-mono inline">
+        <code class="bg-gray-100 text-gray-900 px-1.5 py-0.5 rounded text-sm font-mono mx-1 inline">
             ${item.text}
         </code>
     `;