Markdown 解析功能优化

blossom-editor/src/renderer/src/assets/utils/hljsTest.ts

@@ -0,0 +1,25 @@
+import { log } from 'console'
+import hljs from 'highlight.js'
+
+hljs.addPlugin({
+  'after:highlight': (el) => {
+    console.log(el);
+    
+    let result = '<ol>'
+    let snsArr: string[] = el.value.split(/[\n\r]+/)
+    snsArr.forEach((item: string) => {
+      result += `<li>${item}</li>`
+    })
+    el.value = result += '</ol>'
+  }
+})
+
+const html = hljs.highlight(
+  `public void main () {
+  li
+  神经
+}`,
+  { language: 'java' }
+).value
+
+console.log(html)

blossom-editor/src/renderer/src/views/article/scripts/codemirror.ts

@@ -432,7 +432,7 @@ export class CmWrapper {
   /** 在当前位置增加表格 */
   private static commandTable = (editor: EditorView) => { this.insertBlockCommand(editor, `\n|||\n|---|---|\n|||\n`) }
   /** 在当前位置增加多行代码块 */
-  private static commandPre = (editor: EditorView) => { this.insertBlockCommand(editor, `\n\`\`\`java\n\n\`\`\`\n`) }
+  private static commandPre = (editor: EditorView) => { this.insertBlockCommand(editor, `\n\`\`\`\n\n\`\`\`\n`) }
   /** 在当前位置增加单选框 */
   private static commandCheckBox = (editor: EditorView) => { this.insertBlockCommand(editor, `\n- [ ] \n`) }
   /** 在当前位置增加分割线 */

blossom-editor/src/renderer/src/views/article/scripts/markedjs.ts

@@ -1,7 +1,7 @@
 import { isBlank, isNotBlank } from '@renderer/assets/utils/obj'
 import { escape2Html } from '@renderer/assets/utils/util'
 import { marked, Marked } from 'marked'
-import { markedHighlight } from "marked-highlight"
+import { markedHighlight } from 'marked-highlight'
 import hljs from 'highlight.js'
 import katex from 'katex'
 import 'katex/dist/katex.min.css'
@@ -15,24 +15,23 @@ mermaid.initialize({
   theme: 'base',
   startOnLoad: false,
   securityLevel: 'loose',
-  'themeVariables': {
-    'fontFamily': 'inherit',
+  themeVariables: {
+    fontFamily: 'inherit',
     // 主要配色
-    'primaryColor': '#cfbef1',
-    'primaryTextColor': '#606266',
-    'primaryBorderColor': '#A67AFF',
+    primaryColor: '#cfbef1',
+    primaryTextColor: '#606266',
+    primaryBorderColor: '#A67AFF',
     // 第二颜色
-    'secondaryColor': '#efc75e',
-    'secondaryTextColor': '#606266',
+    secondaryColor: '#efc75e',
+    secondaryTextColor: '#606266',
     // 第三颜色
-    'tertiaryColor': '#C4DFFF',
-    'tertiaryTextColor': '#606266',
+    tertiaryColor: '#C4DFFF',
+    tertiaryTextColor: '#606266',
     // 连线的颜色
-    'lineColor': '#A0A0A0',
+    lineColor: '#A0A0A0'
   }
-});
-mermaid.parseError = (_err, _hash) => {
-}
+})
+mermaid.parseError = (_err, _hash) => {}
 
 /**
  * 标记标识
@@ -51,14 +50,32 @@ marked.use({
   headerIds: false
 })
 
-// 高亮拓展
-marked.use(markedHighlight({
+// 行号插件, 对 mermaid 等有些许影响
+// hljs.addPlugin({
+//   'after:highlight': (el) => {
+//     console.log(el.language)
+//     if (el.language == 'mermaid' || el.language == 'katex') {
+//       return
+//     }
+//     let result = '<ol>'
+//     let snsArr: string[] = el.value.split(/[\n\r]+/)
+//     snsArr.forEach((item: string) => {
+//       result += `<li>${item}</li>`
+//     })
+//     el.value = result += '</ol>'
+//   }
+// })
+
+let hljsConfig = {
   langPrefix: 'hljs language-',
   highlight(code, lang) {
     const language = hljs.getLanguage(lang) ? lang : 'shell'
     return hljs.highlight(code, { language }).value
   }
-}))
+}
+
+// 高亮拓展
+marked.use(markedHighlight(hljsConfig))
 
 //
 
@@ -80,7 +97,6 @@ export const tokenizerCodespan = (src: string): any => {
 
 //#region ----------------------------------------< renderer >--------------------------------------
 
-
 /**
  * 标题解析为 TOC 集合, 增加锚点跳转
  * @param text  标题内容
@@ -91,7 +107,6 @@ export const renderHeading = (text: any, level: number) => {
   return `<h${realLevel} id="${realLevel}-${text}">${text}</h${realLevel}>`
 }
 
-
 /**
  * 表格 header/body
  */
@@ -163,14 +178,21 @@ export const renderBlockquote = (quote: string) => {
  * @param isEscaped
  * @param mermaidCallback 替换 html 结果中的 mermaid 内容
  */
-export const renderCode = (code: string, language: string | undefined, _isEscaped: boolean, mermaidCallback?: (eleid: string, svg: string) => void) => {
+export const renderCode = (
+  code: string,
+  language: string | undefined,
+  _isEscaped: boolean,
+  mermaidCallback?: (eleid: string, svg: string) => void
+) => {
   if (language == undefined) {
     language = 'text'
   }
   if (language === 'mermaid' && isNotBlank(code)) {
     const eleid = 'mermaid-' + Date.now() + '-' + Math.round(Math.random() * 1000)
     const escape = escape2Html(code) as string
-    mermaid.parse(escape).then(syntax => {
+    mermaid
+      .parse(escape)
+      .then((syntax) => {
         let canSyntax: boolean | void = syntax
         if (canSyntax) {
           mermaid.render(eleid + '-svg', escape).then((resp) => {
@@ -182,7 +204,8 @@ export const renderCode = (code: string, language: string | undefined, _isEscape
             }
           })
         }
-    }).catch(error => {
+      })
+      .catch((error) => {
         console.error('mermaid 格式校验失败:错误信息如下:\n', error)
         let html = `<div class='bl-preview-analysis-fail-block'>
           <div class="fail-title">Mermaid 语法解析失败!</div><br/>
@@ -363,13 +386,7 @@ export const renderLink = (href: string | null, title: string | null, text: stri
 
 //#region ----------------------------------------< simpleMarked >--------------------------------------
 const simpleMarked = new Marked({ mangle: false, headerIds: false })
-simpleMarked.use(markedHighlight({
-  langPrefix: 'hljs language-',
-  highlight(code, lang) {
-    const language = hljs.getLanguage(lang) ? lang : 'shell'
-    return hljs.highlight(code, { language }).value
-  }
-}))
+simpleMarked.use(markedHighlight(hljsConfig))
 
 const simpleRenderer = {
   code(code: string, language: string | undefined, _isEscaped: boolean): string {
@@ -386,11 +403,15 @@ const simpleRenderer = {
     }
     return `<pre><code class="hljs language-${language}">${code}</code></pre>`
   },
-  codespan(src: string): string { return renderCodespan(src) },
+  codespan(src: string): string {
+    return renderCodespan(src)
+  }
 }
 
 const tokenizer = {
-  codespan(src: string): any { return tokenizerCodespan(src) }
+  codespan(src: string): any {
+    return tokenizerCodespan(src)
+  }
 }
 
 //@ts-ignore
@@ -400,6 +421,4 @@ simpleMarked.use({ tokenizer: tokenizer, renderer: simpleRenderer })
 
 export default marked
 
-export {
-  simpleMarked
-}
+export { simpleMarked }