Merge pull request #99 from devlive-community/refactor-nodejs

fix: 修复代码片段语法高亮

Author: qianmoQ

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

@@ -55,7 +55,7 @@ const CodeBlockExtension = {
         if (match) {
             let language = match[1].toLowerCase();
 
-            // Parse showLineNumbers and title from the full match string
+            // 在函数开始就解析所有选项
             const showLineNumbers = match[0].includes('showLineNumbers') &&
                 (!match[0].includes('showLineNumbers=false'));
 
@@ -71,9 +71,18 @@ const CodeBlockExtension = {
                 'bash': 'bash',
                 'shell': 'bash',
                 'sh': 'bash',
-                'vue': 'javascript', // Add Vue support
+                'vue': 'javascript',
                 'jsx': 'jsx',
-                'tsx': 'tsx'
+                'tsx': 'tsx',
+                'java': 'java',
+                'py': 'python',
+                'python': 'python',
+                'cpp': 'cpp',
+                'c++': 'cpp',
+                'cs': 'csharp',
+                'c#': 'csharp',
+                'ts': 'typescript',
+                'typescript': 'typescript'
             };
 
             language = languageMap[language] || language;
@@ -100,6 +109,7 @@ const CodeBlockExtension = {
                 console.warn(`Failed to highlight code for language: ${language}`, e);
             }
 
+            // 返回未高亮的版本，确保所有变量都已定义
             return {
                 type: 'infosphereCodeBlock',
                 raw: match[0],

backend/middleware/socket-handler.js

@@ -144,7 +144,7 @@ function initializeSocketHandlers(io) {
 
             // 如果需要预览，渲染并返回
             if (data.needPreview) {
-                const html = `<script src='https://cdn.tailwindcss.com'></script>` + marked.parse(data.content || '')
+                const html = `<link href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-ghcolors.css" rel="stylesheet"/><script src='https://cdn.tailwindcss.com'></script>` + marked.parse(data.content || '')
                 socket.emit('document-preview-updated', {
                     documentSlug: data.documentSlug,
                     html: html

backend/routes/book.js

@@ -116,7 +116,7 @@ router.get('/reader/:username/:book_slug/:docs_slug?', asyncHandler(async (req,
 
     document.html = isEmpty(document.content)
         ? undefined
-        : `<script src='https://cdn.tailwindcss.com'></script>` + marked.parse(document.content || '')
+        : `<link href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-ghcolors.css" rel="stylesheet"/><script src='https://cdn.tailwindcss.com'></script>` + marked.parse(document.content || '')
 
     res.render('pages/document/reader', {
         book,

frontend/public/css/prism.min.css

@@ -0,0 +1,122 @@
+/**
+ * GHColors theme by Avi Aryan (http://aviaryan.in)
+ * Inspired by Github syntax coloring
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+    color: #393A34;
+    font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    font-size: .9em;
+    line-height: 1.2em;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+pre > code[class*="language-"] {
+    font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+    background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    background: #b3d4fc;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    background-color: white;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+    padding: .2em;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    background: #f8f8f8;
+    border: 1px solid #dddddd;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #999988;
+    font-style: italic;
+}
+
+.token.namespace {
+    opacity: .7;
+}
+
+.token.string,
+.token.attr-value {
+    color: #e3116c;
+}
+
+.token.punctuation,
+.token.operator {
+    color: #393A34; /* no highlight */
+}
+
+.token.entity,
+.token.url,
+.token.symbol,
+.token.number,
+.token.boolean,
+.token.variable,
+.token.constant,
+.token.property,
+.token.regex,
+.token.inserted {
+    color: #36acaa;
+}
+
+.token.atrule,
+.token.keyword,
+.token.attr-name,
+.language-autohotkey .token.selector {
+    color: #00a4db;
+}
+
+.token.function,
+.token.deleted,
+.language-autohotkey .token.tag {
+    color: #9a050f;
+}
+
+.token.tag,
+.token.selector,
+.language-autohotkey .token.keyword {
+    color: #00009f;
+}
+
+.token.important,
+.token.function,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.italic {
+    font-style: italic;
+}