From 3cc4cfa3756facb0aea7fa7aaf028a387def5806 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent.io@gmail.com>
Date: Tue, 27 Apr 2021 15:36:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=E9=85=8D?=
 =?UTF-8?q?=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/code/colorful.js | 51 ++++++++++++++++++++++++++++----------------
 1 file changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/code/colorful.js b/src/code/colorful.js
index e07806d..ca4c771 100644
--- a/src/code/colorful.js
+++ b/src/code/colorful.js
@@ -9,16 +9,46 @@ const TAG_START_EXP = /<([\w\-]+)([\w\W]*?)>/g
 const TAG_END_EXP = /<\/([\w\-]+)>/g
 const TAG_ATTR_EXP = /[@a-zA-Z\-.]+=(["'])[^"]+\1|[@a-zA-Z\-.]+=[a-zA-Z0-9]+|[@a-zA-Z\-.]+/g
 const TAG_CM_EXP = /<!--([\w\W]*?)-->/g
+const SCRIPT_TAG = /(<script[^>]*?>)([\w\W]*?)(<\/script>)/g
 const KEYWOWRD1 = /\b(var|const|let|function|for|switch|with|if|else|export|import|async|await|break|continue|return|class|try|catch|throw|new|while|this|super|default|case|debugger|delete|do|goto|in|public|private|protected|package|typeof)\b/g
 const KEYWOWRD2 = /\b\s(=|-|\+|\/|\*|<|>|%)\s\b/g
 const KEYWOWRD3 = /(\+\=|-=|\/=|\*=|--|\+\+|==|===)/g
 const STR = /(['"`])(.*?)\1/g
 const NUM = /\b(\d+)\b/g
 const FN = /([\.\s])([a-zA-Z$][\da-zA-Z_]*)(\(.*?\))/g
+const CM = /(?=\s)([ ]*\/\/.*)|(^\/\/.*)/g
+
+function parseJs(code) {
+  return code
+    .replace(FN, '$1[fn]$2[/fn]$3')
+    .replace(KEYWOWRD1, '[key]$1[/key]')
+    .replace(KEYWOWRD2, '[key] $1 [/key]')
+    .replace(KEYWOWRD3, '[key]$1[/key]')
+    .replace(NUM, '[num]$1[/num]')
+    .replace(STR, (m, q, str) => {
+      return `[str]${q}${str.replace(/\[\/?num\]/g, '')}${q}[/str]`
+    })
+    .replace(CM, '[cm]$1[/cm]')
+}
+
+function rebuild(code) {
+  return code
+    .replace(/\[(\/?)tag\]/g, (m, s) => (s ? '</i>' : '<i class="r">'))
+    .replace(/\[(\/?)attr\]/g, (m, s) => (s ? '</i>' : '<i class="b">'))
+    .replace(/\[(\/?)str\]/g, (m, s) => (s ? '</i>' : '<i class="g">'))
+    .replace(/\[(\/?)key\]/g, (m, s) => (s ? '</i>' : '<i class="r">'))
+    .replace(/\[(\/?)str\]/g, (m, s) => (s ? '</i>' : '<i class="g">'))
+    .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">'))
+}
 
 export function colorHtml(code) {
   code = code
     .replace(DOCTYPE_EXP, '[tag]&lt;!DOCTYPE [attr]html[/attr]&gt;[/tag]')
+    .replace(SCRIPT_TAG, (m, tag1, txt, tag2) => {
+      return tag1 + parseJs(txt) + tag2
+    })
     .replace(TAG_START_EXP, (m, tag, attr) => {
       if (attr) {
         attr = attr.replace(TAG_ATTR_EXP, function(t) {
@@ -37,11 +67,8 @@ export function colorHtml(code) {
     .replace(TAG_END_EXP, (m, tag) => {
       return `[tag]&lt;/${tag}&gt;[/tag]`
     })
-    .replace(TAG_CM_EXP, '<i class="gr">&lt;!--$1--&gt;</i>')
-  return code
-    .replace(/\[(\/?)tag\]/g, (m, s) => (s ? '</i>' : '<i class="r">'))
-    .replace(/\[(\/?)attr\]/g, (m, s) => (s ? '</i>' : '<i class="b">'))
-    .replace(/\[(\/?)str\]/g, (m, s) => (s ? '</i>' : '<i class="g">'))
+    .replace(TAG_CM_EXP, '[cm]&lt;!--$1--&gt;[cm]')
+  return rebuild(code)
 }
 
 export function colorCss(code) {
@@ -61,17 +88,5 @@ export function colorCss(code) {
 }
 
 export function colorJs(code) {
-  code = code
-    .replace(FN, '$1[fn]$2[/fn]$3')
-    .replace(KEYWOWRD1, '[key]$1[/key]')
-    .replace(KEYWOWRD2, '[key] $1 [/key]')
-    .replace(KEYWOWRD3, '[key]$1[/key]')
-    .replace(STR, '[str]$1$2$1[/str]')
-    .replace(NUM, '[num]$1[/num]')
-
-  return code
-    .replace(/\[(\/?)key\]/g, (m, s) => (s ? '</i>' : '<i class="r">'))
-    .replace(/\[(\/?)str\]/g, (m, s) => (s ? '</i>' : '<i class="g">'))
-    .replace(/\[(\/?)num\]/g, (m, s) => (s ? '</i>' : '<i class="pp">'))
-    .replace(/\[(\/?)fn\]/g, (m, s) => (s ? '</i>' : '<i class="b">'))
+  return rebuild(parseJs(code))
 }