优化代码配色
parent
93a31f29f9
commit
3cc4cfa375
|
@ -9,16 +9,46 @@ const TAG_START_EXP = /<([\w\-]+)([\w\W]*?)>/g
|
||||||
const TAG_END_EXP = /<\/([\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_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 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 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 KEYWOWRD2 = /\b\s(=|-|\+|\/|\*|<|>|%)\s\b/g
|
||||||
const KEYWOWRD3 = /(\+\=|-=|\/=|\*=|--|\+\+|==|===)/g
|
const KEYWOWRD3 = /(\+\=|-=|\/=|\*=|--|\+\+|==|===)/g
|
||||||
const STR = /(['"`])(.*?)\1/g
|
const STR = /(['"`])(.*?)\1/g
|
||||||
const NUM = /\b(\d+)\b/g
|
const NUM = /\b(\d+)\b/g
|
||||||
const FN = /([\.\s])([a-zA-Z$][\da-zA-Z_]*)(\(.*?\))/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) {
|
export function colorHtml(code) {
|
||||||
code = code
|
code = code
|
||||||
.replace(DOCTYPE_EXP, '[tag]<!DOCTYPE [attr]html[/attr]>[/tag]')
|
.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) => {
|
.replace(TAG_START_EXP, (m, tag, attr) => {
|
||||||
if (attr) {
|
if (attr) {
|
||||||
attr = attr.replace(TAG_ATTR_EXP, function(t) {
|
attr = attr.replace(TAG_ATTR_EXP, function(t) {
|
||||||
|
@ -37,11 +67,8 @@ export function colorHtml(code) {
|
||||||
.replace(TAG_END_EXP, (m, tag) => {
|
.replace(TAG_END_EXP, (m, tag) => {
|
||||||
return `[tag]</${tag}>[/tag]`
|
return `[tag]</${tag}>[/tag]`
|
||||||
})
|
})
|
||||||
.replace(TAG_CM_EXP, '<i class="gr"><!--$1--></i>')
|
.replace(TAG_CM_EXP, '[cm]<!--$1-->[cm]')
|
||||||
return code
|
return rebuild(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">'))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function colorCss(code) {
|
export function colorCss(code) {
|
||||||
|
@ -61,17 +88,5 @@ export function colorCss(code) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function colorJs(code) {
|
export function colorJs(code) {
|
||||||
code = code
|
return rebuild(parseJs(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">'))
|
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue