feat: support GFM alerts & render perf (#446)

README.md

@@ -35,6 +35,7 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
 
 - [x] 支持自定义 CSS 样式
 - [x] 支持 Markdown 所有基础语法、代码块、LaTeX 公式
+- [x] 支持 [GFM 警告块](https://github.com/orgs/community/discussions/16925)
 - [x] 支持浅色、深色两种编辑器外观
 - [x] 支持 <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd> 快速格式化文档
 - [x] 支持色盘取色，快速替换文章整体色调

src/assets/example/theme-css.txt

@@ -33,6 +33,54 @@ blockquote {
 /* 引用段落样式 */
 blockquote_p {
 }
+/* GFM note 样式 */
+blockquote_note {
+}
+/* GFM tip 样式 */
+blockquote_tip {
+}
+/* GFM important 样式 */
+blockquote_important {
+}
+/* GFM warning 样式 */
+blockquote_warning {
+}
+/* GFM caution 样式 */
+blockquote_caution {
+}
+/* GFM 通用标题 */
+blockquote_title {
+}
+/* GFM note 标题 */
+blockquote_title_note {
+}
+/* GFM tip 标题 */
+blockquote_title_tip {
+}
+/* GFM important 标题 */
+blockquote_title_important {
+}
+/* GFM warning 标题 */
+blockquote_title_warning {
+}
+/* GFM caution 标题 */
+blockquote_title_caution {
+}
+/* GFM note 段落样式 */
+blockquote_p_note {
+}
+/* GFM tip 段落样式 */
+blockquote_p_tip {
+}
+/* GFM important 段落样式 */
+blockquote_p_important {
+}
+/* GFM warning 段落样式 */
+blockquote_p_warning {
+}
+/* GFM caution 段落样式 */
+blockquote_p_caution {
+}
 /* 段落样式 */
 p {
 }

src/assets/index.css

@@ -32,6 +32,8 @@
     --input:0 0% 89.8%;
     --ring:0 0% 3.9%;
     --radius: 0.5rem;
+
+    --blockquote-background: #f7f7f7;
   }
 
   .dark {
@@ -62,6 +64,8 @@
     --border:0 0% 14.9%;
     --input:0 0% 14.9%;
     --ring:0 0% 83.1%;
+
+    --blockquote-background: #212121;
   }
 }
 

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -123,9 +123,20 @@ function copy() {
         .replace(/top:(.*?)em/g, `transform: translateY($1em)`)
         // 适配主题中的颜色变量
         .replaceAll(`var(--el-text-color-regular)`, `#3f3f3f`)
+        .replaceAll(`var(--blockquote-background)`, `#f7f7f7`)
         .replaceAll(`var(--md-primary-color)`, primaryColor.value)
         .replaceAll(/--md-primary-color:.+?;/g, ``)
+
       clipboardDiv.focus()
+
+      // edge case: 由于 svg 无法复制， 在前面插入一个空节点
+      const p = document.createElement(`p`)
+      p.style.fontSize = `0` // 设置字体大小为 0
+      p.style.lineHeight = `0` // 行高也为 0
+      p.style.margin = `0` // 避免外边距干扰
+      p.innerHTML = ` `
+      clipboardDiv.insertBefore(p, clipboardDiv.firstChild)
+
       window.getSelection()!.removeAllRanges()
       const range = document.createRange()
 

src/config/theme.ts

@@ -82,7 +82,7 @@ const defaultTheme: Theme = {
       'padding': `1em`,
       'border-radius': `8px`,
       'color': `rgba(0,0,0,0.5)`,
-      'background': `#f7f7f7`,
+      'background': `var(--blockquote-background)`,
       'margin': `2em 8px`,
     },
 
@@ -91,7 +91,65 @@ const defaultTheme: Theme = {
       'display': `block`,
       'font-size': `1em`,
       'letter-spacing': `0.1em`,
-      'color': `rgb(80, 80, 80)`,
+      'color': `var(--el-text-color-regular)`,
+    },
+
+    blockquote_note: {
+    },
+
+    blockquote_tip: {
+    },
+
+    blockquote_important: {
+    },
+
+    blockquote_warning: {
+    },
+
+    blockquote_caution: {
+    },
+
+    // GFM 警告块标题
+    blockquote_title: {
+      'display': `flex`,
+      'align-items': `center`,
+      'gap': `0.5em`,
+      'margin-bottom': `0.5em`,
+    },
+
+    blockquote_title_note: {
+      color: `#478be6`,
+    },
+
+    blockquote_title_tip: {
+      color: `#57ab5a`,
+    },
+
+    blockquote_title_important: {
+      color: `#986ee2`,
+    },
+
+    blockquote_title_warning: {
+      color: `#c69026`,
+    },
+
+    blockquote_title_caution: {
+      color: `#e5534b`,
+    },
+
+    blockquote_p_note: {
+    },
+
+    blockquote_p_tip: {
+    },
+
+    blockquote_p_important: {
+    },
+
+    blockquote_p_warning: {
+    },
+
+    blockquote_p_caution: {
     },
 
     // 代码块
@@ -230,87 +288,90 @@ const graceTheme = toMerged(defaultTheme, {
   base: {
   },
   block: {
-    h1: {
+    'h1': {
       'padding': `0.5em 1em`,
       'border-bottom': `2px solid var(--md-primary-color)`,
       'font-size': `1.4em`,
       'text-shadow': `2px 2px 4px rgba(0,0,0,0.1)`,
     },
 
-    h2: {
+    'h2': {
       'padding': `0.3em 1em`,
       'border-radius': `8px`,
       'font-size': `1.3em`,
       'box-shadow': `0 4px 6px rgba(0,0,0,0.1)`,
     },
 
-    h3: {
+    'h3': {
       'padding-left': `12px`,
       'font-size': `1.2em`,
       'border-left': `4px solid var(--md-primary-color)`,
       'border-bottom': `1px dashed var(--md-primary-color)`,
     },
 
-    h4: {
+    'h4': {
       'font-size': `1.1em`,
     },
 
-    h5: {
+    'h5': {
       'font-size': `1em`,
     },
 
-    h6: {
+    'h6': {
       'font-size': `1em`,
     },
 
-    p: {
+    'p': {
     },
 
-    blockquote: {
+    'blockquote': {
       'font-style': `italic`,
       'padding': `1em 1em 1em 2em`,
       'border-left': `4px solid var(--md-primary-color)`,
       'border-radius': `6px`,
       'color': `rgba(0,0,0,0.6)`,
-      'background': `linear-gradient(to right, #f7f7f7, #ffffff)`,
       'box-shadow': `0 4px 6px rgba(0,0,0,0.05)`,
     },
 
-    blockquote_p: {
+    'blockquote_p': {
     },
 
-    code_pre: {
+    'markdown-alert': {
+      'font-style': `italic`,
+    },
+
+    'code_pre': {
       'box-shadow': `inset 0 0 10px rgba(0,0,0,0.05)`,
     },
 
-    code: {
+    'code': {
       'white-space': `pre-wrap`,
       'font-family': `'Fira Code', Menlo, Operator Mono, Consolas, Monaco, monospace`,
     },
 
-    image: {
+    'image': {
       'border-radius': `8px`,
       'box-shadow': `0 4px 8px rgba(0,0,0,0.1)`,
     },
 
-    ol: {
+    'ol': {
       'padding-left': `1.5em`,
     },
 
-    ul: {
+    'ul': {
       'list-style': `none`,
       'padding-left': `1.5em`,
     },
 
-    footnotes: {
+    'footnotes': {
 
     },
 
-    figure: {
+    'figure': {
 
     },
 
-    hr: {
+    'hr': {
       height: `1px`,
       border: `none`,
       margin: `2em 0`,

src/stores/index.ts

@@ -143,7 +143,8 @@ export const useStore = defineStore(`store`, () => {
   // 更新编辑器
   const editorRefresh = () => {
     codeThemeChange()
-    renderer.reset({ status: isCiteStatus.value, legend: legend.value, isUseIndent: isUseIndent.value })
+    renderer.reset({ citeStatus: isCiteStatus.value, legend: legend.value, isUseIndent: isUseIndent.value })
+
     let outputTemp = marked.parse(editor.value!.getValue()) as string
 
     // 去除第一行的 margin-top
@@ -157,23 +158,27 @@ export const useStore = defineStore(`store`, () => {
       outputTemp += `
         <style>
           .hljs.code__pre > .mac-sign {
-            display: inline-block;
-          }
-
-          .hljs.code__pre {
-            padding: 0!important;
-          }
-
-          .hljs.code__pre code {
-            display: -webkit-box;
-            padding: 0.5em 1em 1em;
-            overflow-x: auto;
-            text-indent: 0;
+            display: flex;
           }
         </style>
       `
     }
 
+    outputTemp += `
+      <style>
+        .code__pre {
+          padding: 0 !important;
+        }
+
+        .hljs.code__pre code {
+          display: -webkit-box;
+          padding: 0.5em 1em 1em;
+          overflow-x: auto;
+          text-indent: 0;
+        }
+      </style>
+    `
+
     output.value = outputTemp
   }
 
@@ -184,6 +189,7 @@ export const useStore = defineStore(`store`, () => {
     renderer.setOptions({
       theme: newTheme,
     })
+
     editorRefresh()
   }
   // 初始化 CSS 编辑器
@@ -354,7 +360,7 @@ export const useStore = defineStore(`store`, () => {
       const reader = new FileReader()
       reader.readAsText(file)
       reader.onload = (event) => {
-        (editor.value!).setValue((event.target !).result as string)
+        (editor.value!).setValue((event.target!).result as string)
         ElMessage.success(`文档导入成功`)
       }
     }