优化代码配色
parent
93a31f29f9
commit
3cc4cfa375
|
@ -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]<!DOCTYPE [attr]html[/attr]>[/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]</${tag}>[/tag]`
|
||||
})
|
||||
.replace(TAG_CM_EXP, '<i class="gr"><!--$1--></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]<!--$1-->[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))
|
||||
}
|
||||
|
|
Reference in New Issue