feat: support GFM alerts & render perf

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,30 @@ blockquote {
 /* 引用段落样式 */
 blockquote_p {
 }
+/* GFM 警告块 */
+markdown-alert {
+}
+/* GFM 警告块标题 */
+markdown-alert-title {
+}
+/* GFM 警告块内容，抵消 p 默认的 margin */
+markdown-alert-content-wrapper {
+}
+/* GFM note */
+markdown-alert-title-note {
+}
+/* GFM tip */
+markdown-alert-title-tip {
+}
+/* GFM important */
+markdown-alert-title-important {
+}
+/* GFM warning */
+markdown-alert-title-warning {
+}
+/* GFM caution */
+markdown-alert-title-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

@@ -10,7 +10,7 @@ const defaultTheme: Theme = {
   },
   block: {
     // 一级标题
-    h1: {
+    'h1': {
       'display': `table`,
       'padding': `0 1em`,
       'border-bottom': `2px solid var(--md-primary-color)`,
@@ -22,7 +22,7 @@ const defaultTheme: Theme = {
     },
 
     // 二级标题
-    h2: {
+    'h2': {
       'display': `table`,
       'padding': `0 0.2em`,
       'margin': `4em auto 2em`,
@@ -34,7 +34,7 @@ const defaultTheme: Theme = {
     },
 
     // 三级标题
-    h3: {
+    'h3': {
       'padding-left': `8px`,
       'border-left': `3px solid var(--md-primary-color)`,
       'margin': `2em 8px 0.75em 0`,
@@ -45,57 +45,99 @@ const defaultTheme: Theme = {
     },
 
     // 四级标题
-    h4: {
+    'h4': {
       'margin': `2em 8px 0.5em`,
       'color': `var(--md-primary-color)`,
       'font-size': `1em`,
       'font-weight': `bold`,
     },
 
     // 五级标题
-    h5: {
+    'h5': {
       'margin': `1.5em 8px 0.5em`,
       'color': `var(--md-primary-color)`,
       'font-size': `1em`,
       'font-weight': `bold`,
     },
 
     // 六级标题
-    h6: {
+    'h6': {
       'margin': `1.5em 8px 0.5em`,
       'font-size': `1em`,
       'color': `var(--md-primary-color)`,
     },
 
     // 段落
-    p: {
+    'p': {
       'margin': `1.5em 8px`,
       'letter-spacing': `0.1em`,
       'color': `var(--el-text-color-regular)`,
       'text-align': `justify`,
     },
 
     // 引用
-    blockquote: {
+    'blockquote': {
       'font-style': `normal`,
       'border-left': `none`,
       'padding': `1em`,
       'border-radius': `8px`,
       'color': `rgba(0,0,0,0.5)`,
-      'background': `#f7f7f7`,
+      'background': `var(--blockquote-background)`,
       'margin': `2em 8px`,
     },
 
     // 引用内容
-    blockquote_p: {
+    'blockquote_p': {
       'display': `block`,
       'font-size': `1em`,
       'letter-spacing': `0.1em`,
-      'color': `rgb(80, 80, 80)`,
+      'color': `var(--el-text-color-regular)`,
+    },
+
+    // GFM 警告块
+    'markdown-alert': {
+      'font-style': `normal`,
+      'border-left': `none`,
+      'padding': `1em`,
+      'border-radius': `8px`,
+      'background': `var(--blockquote-background)`,
+      'margin': `2em 8px`,
+    },
+
+    // GFM 警告块标题
+    'markdown-alert-title': {
+      'display': `flex`,
+      'align-items': `center`,
+      'gap': `0.5em`,
+    },
+
+    // GFM 警告块内容，抵消 p 默认的 margin
+    'markdown-alert-content-wrapper': {
+      margin: `-1em -8px -1.5em;`,
+    },
+
+    'markdown-alert-title-note': {
+      color: `#478be6`,
+    },
+
+    'markdown-alert-title-tip': {
+      color: `#57ab5a`,
+    },
+
+    'markdown-alert-title-important': {
+      color: `#986ee2`,
+    },
+
+    'markdown-alert-title-warning': {
+      color: `#c69026`,
+    },
+
+    'markdown-alert-title-caution': {
+      color: `#e5534b`,
     },
 
     // 代码块
-    code_pre: {
+    'code_pre': {
       'font-size': `14px`,
       'overflow-x': `auto`,
       'border-radius': `8px`,
@@ -105,47 +147,47 @@ const defaultTheme: Theme = {
     },
 
     // 行内代码
-    code: {
+    'code': {
       'margin': 0,
       'white-space': `nowrap`,
       'font-family': `Menlo, Operator Mono, Consolas, Monaco, monospace`,
     },
 
     // 图片
-    image: {
+    'image': {
       'display': `block`,
       'width': `100% !important`,
       'margin': `0.1em auto 0.5em`,
       'border-radius': `4px`,
     },
 
     // 有序列表
-    ol: {
+    'ol': {
       'padding-left': `1em`,
       'margin-left': `0`,
       'color': `var(--el-text-color-regular)`,
     },
 
     // 无序列表
-    ul: {
+    'ul': {
       'list-style': `circle`,
       'padding-left': `1em`,
       'margin-left': `0`,
       'color': `var(--el-text-color-regular)`,
     },
 
-    footnotes: {
+    'footnotes': {
       'margin': `0.5em 8px`,
       'font-size': `80%`,
       'color': `var(--el-text-color-regular)`,
     },
 
-    figure: {
+    'figure': {
       margin: `1.5em 8px`,
       color: `var(--el-text-color-regular)`,
     },
 
-    hr: {
+    'hr': {
       'border-style': `solid`,
       'border-width': `1px 0 0`,
       'border-color': `rgba(0,0,0,0.1)`,
@@ -230,87 +272,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': {
+    },
+
+    'markdown-alert': {
+      'font-style': `italic`,
     },
 
-    code_pre: {
+    '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`,