From 3f5f4ca7f1fbdd221ce78e19bb2ae147dbcdabde Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 29 Dec 2024 17:34:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=20code=20block=20=E8=A7=A3?=
 =?UTF-8?q?=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/pageforge-ci.yml            |  2 +-
 lib/dev-server.js                             |  1 +
 lib/extension/marked/pageforge-code-block.js  | 40 +++++++++++++++++++
 lib/extension/marked/pageforge-inline-code.js |  6 +--
 lib/extension/marked/pageforge-marked.js      |  4 +-
 templates/components/block-code.js            |  8 ++++
 .../components/{code.js => inline-code.js}    |  2 +-
 7 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 lib/extension/marked/pageforge-code-block.js
 create mode 100644 templates/components/block-code.js
 rename templates/components/{code.js => inline-code.js} (82%)

diff --git a/.github/workflows/pageforge-ci.yml b/.github/workflows/pageforge-ci.yml
index 36e96c7..709bd12 100644
--- 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
index 58a402a..8544f96 100644
--- 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
new file mode 100644
index 0000000..eda3073
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/lib/extension/marked/pageforge-inline-code.js b/lib/extension/marked/pageforge-inline-code.js
index d84306b..cd14e17 100644
--- 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
index f3f21bf..8b9132d 100644
--- 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
new file mode 100644
index 0000000..585ea6c
--- /dev/null
+++ 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>`;
+};
\ No newline at end of file
diff --git a/templates/components/code.js b/templates/components/inline-code.js
similarity index 82%
rename from templates/components/code.js
rename to templates/components/inline-code.js
index e90f1c2..904fdb5 100644
--- a/templates/components/code.js
+++ b/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>
     `;