diff --git a/src/Sources/Sources.js b/src/Sources/Sources.js index e17a508..8f31d07 100644 --- a/src/Sources/Sources.js +++ b/src/Sources/Sources.js @@ -2,9 +2,11 @@ import Tool from '../DevTools/Tool' import LunaObjectViewer from 'luna-object-viewer' import Settings from '../Settings/Settings' import ajax from 'licia/ajax' +import each from 'licia/each' import isStr from 'licia/isStr' import escape from 'licia/escape' import truncate from 'licia/truncate' +import replaceAll from 'licia/replaceAll' import highlight from 'licia/highlight' import LunaTextViewer from 'luna-text-viewer' import evalCss from '../lib/evalCss' @@ -172,7 +174,10 @@ export default class Sources extends Tool { _renderCode() { const data = this._data - this._renderHtml(`
`, false) + this._renderHtml( + `
`, + false + ) let code = data.val const len = data.val.length @@ -183,13 +188,15 @@ export default class Sources extends Tool { // If source code too big, don't process it. if (len < MAX_BEAUTIFY_LEN) { - const curTheme = evalCss.getCurTheme() code = highlight(code, data.type, { - keyword: `color:${curTheme.keywordColor}`, - number: `color:${curTheme.numberColor}`, - operator: `color:${curTheme.operatorColor}`, - comment: `color:${curTheme.commentColor}`, - string: `color:${curTheme.stringColor}`, + comment: '', + string: '', + number: '', + keyword: '', + operator: '', + }) + each(['comment', 'string', 'number', 'keyword', 'operator'], (type) => { + code = replaceAll(code, `class="${type}"`, `class="${c(type)}"`) }) } else { code = escape(code) diff --git a/src/Sources/Sources.scss b/src/Sources/Sources.scss index 5dfc45b..a46f0ee 100644 --- a/src/Sources/Sources.scss +++ b/src/Sources/Sources.scss @@ -14,6 +14,26 @@ .raw, .code { height: 100%; + .keyword { + color: var(--keyword-color); + } + .comment { + color: var(--comment-color); + } + .number { + color: var(--number-color); + } + .string { + color: var(--string-color); + } + .operator { + color: var(--operator-color); + } + &[data-type='html'] { + .keyword { + color: var(--tag-name-color); + } + } } .image { font-size: $font-size-s;