From 1ae0a3b8f71b9e2f1cb4a857f143b4a6e73e739a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent.io@gmail.com>
Date: Thu, 13 May 2021 20:09:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=BB=84=E4=BB=B6=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0md=E9=AB=98=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/code/colorful.js | 29 +++++++++++++++++++++++++++++
 src/code/index.wc    | 15 ++++++++++++++-
 src/markd/core.js    |  7 ++++---
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/code/colorful.js b/src/code/colorful.js
index d5ef148..272f573 100644
--- a/src/code/colorful.js
+++ b/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) {
diff --git a/src/code/index.wc b/src/code/index.wc
index 765ff03..e710298 100644
--- a/src/code/index.wc
+++ b/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':
diff --git a/src/markd/core.js b/src/markd/core.js
index 4912576..2086215 100644
--- a/src/markd/core.js
+++ b/src/markd/core.js
@@ -6,8 +6,8 @@
 
 const HR_LIST = ['=', '-', '_', '*']
 const LIST_RE = /^(([\+\-\*])|(\d+\.))\s/
-const TODO_RE = /^\-\s\[(x|\s)\]\s/
-const ESCAPE_RE = /\\([-+*_`])/g
+const TODO_RE = /^[\+\-\*]\s\[(x|\s)\]\s/
+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
   }