代码组件增加md高亮

src/code/colorful.js

@@ -17,6 +17,15 @@ const STR = /(['"`])(.*?)\1/g
 const NUM = /\b(\d+)\b/g
 const FN = /([\.\s])([a-zA-Z$][\da-zA-Z_]*)(\(.*?\))/g
 const CM = /(?=\s)([ ]*\/\/.*)|(^\/\/.*)/g
+const INLINE = {
+  code: /`([^`]*?[^`\\\s])`/g,
+  strong: [/__([\s\S]*?[^\s\\])__(?!_)/g, /\*\*([\s\S]*?[^\s\\])\*\*(?!\*)/g],
+  em: [/_([\s\S]*?[^\s\\])_(?!_)/g, /\*([\s\S]*?[^\s\\*])\*(?!\*)/g],
+  del: /~~([\s\S]*?[^\s\\~])~~/g,
+  qlink: /\[([^\]]*?)\]\[(\d*?)\]/g, // 引用链接
+  img: /\!\[([^\]]*?)\]\(([^)]*?)\)/g,
+  a: /\[([^\]]*?)\]\(([^)]*?)(\s+"([\s\S]*?)")*?\)/g
+}
 
 function parseJs(code) {
   return code
@@ -41,6 +50,26 @@ function rebuild(code) {
     .replace(/\[(\/?)num\]/g, (m, s) => (s ? '</i>' : '<i class="pp">'))
     .replace(/\[(\/?)fn\]/g, (m, s) => (s ? '</i>' : '<i class="b">'))
     .replace(/\[(\/?)cm\]/g, (m, s) => (s ? '</i>' : '<i class="gr">'))
+    .replace(/\[(\/?)bold\]/g, (m, s) => (s ? '</i>' : '<i class="bold">'))
+    .replace(/\[(\/?)link\]/g, (m, s) => (s ? '</i>' : '<i class="link">'))
+}
+
+export function colorMd(code) {
+  code = code
+    .replace(INLINE.strong[0], '[cm]__[/cm]<strong>$1</strong>[cm]__[/cm]')
+    .replace(INLINE.strong[1], '[cm]**[/cm]<strong>$1</strong>[cm]**[/cm]')
+    .replace(INLINE.em[0], '[cm]_[/cm]<em>$1</em>[cm]_[/cm]')
+    .replace(INLINE.em[1], '[cm]*[/cm]<em>$1</em>[cm]*[/cm]')
+    .replace(INLINE.del, '[cm]~~[/cm]<del>$1</del>[cm]~~[/cm]')
+    .replace(INLINE.qlink, '[[attr]$1[/attr]]([link]$2[/link])')
+    .replace(INLINE.img, '![[attr]$1[/attr]]([link]$2[/link])')
+    .replace(INLINE.a, (m1, txt, link, m2, attr = '') => {
+      if (attr) {
+        attr = ` "[tag]${attr}[/tag]"`
+      }
+      return `[[attr]${txt}[/attr]]([link]${link}[/link]${attr})`
+    })
+  return rebuild(code)
 }
 
 export function colorHtml(code) {

src/code/index.wc

@@ -129,6 +129,14 @@
       .pp {
         color: #6a1ea8;
       }
+      .bold {
+        font-weight: bold;
+      }
+      .link {
+        font-style: italic;
+        text-decoration: underline;
+        color: var(--color-grey-2);
+      }
     }
   }
 }
@@ -170,7 +178,7 @@
 import '../scroll/index'
 import '../layer/index'
 import $ from '../utils'
-import { colorHtml, colorCss, colorJs } from './colorful'
+import { colorHtml, colorCss, colorJs, colorMd } from './colorful'
 
 export default class Code {
   props = {
@@ -220,6 +228,11 @@ export default class Code {
         txt = colorCss(txt)
         break
 
+      case 'md':
+      case 'markdown':
+        txt = colorMd(txt)
+        break
+
       case 'js':
       case 'ts':
       case 'javascript':

src/markd/core.js

@@ -6,8 +6,8 @@
 
 const HR_LIST = ['=', '-', '_', '*']
 const LIST_RE = /^(([\+\-\*])|(\d+\.))\s/
-const TODO_RE = /^\-\s\[(x|\s)\]\s/
+const TODO_RE = /^[\+\-\*]\s\[(x|\s)\]\s/
-const ESCAPE_RE = /\\([-+*_`])/g
+const ESCAPE_RE = /\\([-+*_`\]\[\(\)])/g
 const QLINK_RE = /^\[(\d+)\]: ([\S]+)\s*?((['"])[\s\S]*?\4)?\s*?$/
 const TAG_RE = /<([\w\-]+)([\w\W]*?)>/g
 const ATTR_RE = /\s*?on[a-zA-Z]+="[^"]*?"\s*?/g
@@ -66,6 +66,7 @@ const Helper = {
   },
   isQLink(str) {
     if (QLINK_RE.test(str)) {
+      // l: link,  t: title, $1: index
       return { [RegExp.$1]: { l: RegExp.$2, t: RegExp.$3 } }
     }
     return false
@@ -150,7 +151,7 @@ const Decoder = {
       var stat = todoChecked === 1 ? 'checked' : ''
       var txt = todoChecked === 1 ? `<del>${word}</del>` : word
 
-      return `<section><wc-checkbox-item readonly ${stat}>${txt}</wc-checkbox-item></section>`
+      return `<section><wc-checkbox readonly ${stat}>${txt}</wc-checkbox></section>`
     }
     return false
   }