fix: render codespan and front matter (#505)

* fix: render codespan

* style: update hr label

* feat: support front matter

Author: yanglbme

package-lock.json

@@ -34,6 +34,7 @@
     "csstype": "^3.1.3",
     "es-toolkit": "^1.27.0",
     "form-data": "4.0.1",
+    "front-matter": "^4.0.2",
     "highlight.js": "^11.10.0",
     "juice": "^11.0.0",
     "lucide-vue-next": "^0.462.0",

package.json

@@ -206,12 +206,14 @@ const defaultTheme: Theme = {
 
     hr: {
       'border-style': `solid`,
-      'border-width': `1px 0 0`,
+      'border-width': `2px 0 0`,
       'border-color': `rgba(0,0,0,0.1)`,
       '-webkit-transform-origin': `0 0`,
       '-webkit-transform': `scale(1, 0.5)`,
       'transform-origin': `0 0`,
       'transform': `scale(1, 0.5)`,
+      'height': `0.4em`,
+      'margin': `1.5em 0`,
     },
   },
   inline: {

src/config/theme.ts

@@ -179,7 +179,8 @@ export const useStore = defineStore(`store`, () => {
     codeThemeChange()
     renderer.reset({ citeStatus: isCiteStatus.value, legend: legend.value, isUseIndent: isUseIndent.value })
 
-    let outputTemp = marked.parse(editor.value!.getValue()) as string
+    const { markdownContent } = renderer.parseFrontMatterAndContent(editor.value!.getValue())
+    let outputTemp = marked.parse(markdownContent) as string
 
     // 去除第一行的 margin-top
     outputTemp = outputTemp.replace(/(style=".*?)"/, `$1;margin-top: 0"`)

src/stores/index.ts

@@ -2,14 +2,18 @@ import type { ExtendedProperties, IOpts, ThemeStyles } from '@/types'
 import type { PropertiesHyphen } from 'csstype'
 import type { Renderer, RendererObject, Tokens } from 'marked'
 import { cloneDeep, toMerged } from 'es-toolkit'
-import hljs from 'highlight.js'
+import frontMatter from 'front-matter'
 
+import hljs from 'highlight.js'
 import { marked } from 'marked'
 import mermaid from 'mermaid'
 import { getStyleString } from '.'
 import markedAlert from './MDAlert'
 import { MDKatex } from './MDKatex'
 
+marked.setOptions({
+  breaks: true,
+})
 marked.use(MDKatex({ nonStandard: true }))
 
 function buildTheme({ theme: _theme, fonts, size, isUseIndent }: IOpts): ThemeStyles {
@@ -107,6 +111,19 @@ export function initRenderer(opts: IOpts) {
     return getStyles(styleMapping, tag, addition)
   }
 
+  function parseFrontMatterAndContent(markdownText: string) {
+    try {
+      const parsed = frontMatter(markdownText)
+      const yamlData = parsed.attributes
+      const markdownContent = parsed.body
+      return { yamlData, markdownContent }
+    }
+    catch (error) {
+      console.error(`Error parsing front-matter:`, error)
+      return { yamlData: {}, markdownContent: markdownText }
+    }
+  }
+
   function styledContent(styleLabel: string, content: string, tagName?: string): string {
     const tag = tagName ?? styleLabel
     return `<${tag} ${styles(styleLabel)}>${content}</${tag}>`
@@ -175,7 +192,7 @@ export function initRenderer(opts: IOpts) {
       const language = hljs.getLanguage(langText) ? langText : `plaintext`
       let highlighted = hljs.highlight(text, { language }).value
       // tab to 4 spaces
-      highlighted = highlighted.replace(/\t/g, '    ')
+      highlighted = highlighted.replace(/\t/g, `    `)
       highlighted = highlighted
         .replace(/\r\n/g, `<br/>`)
         .replace(/\n/g, `<br/>`)
@@ -186,7 +203,8 @@ export function initRenderer(opts: IOpts) {
     },
 
     codespan({ text }: Tokens.Codespan): string {
-      return styledContent(`codespan`, text, `code`)
+      const escapedText = text.replace(/</g, `&lt;`).replace(/>/g, `&gt;`)
+      return styledContent(`codespan`, escapedText, `code`)
     },
 
     listitem(item: Tokens.ListItem): string {
@@ -276,6 +294,7 @@ export function initRenderer(opts: IOpts) {
     buildFootnotes,
     setOptions,
     reset,
+    parseFrontMatterAndContent,
     createContainer(content: string) {
       return styledContent(`container`, content, `section`)
     },