diff --git a/doc/UTIL_API.md b/doc/UTIL_API.md index 2dc411e..ca50c7c 100644 --- a/doc/UTIL_API.md +++ b/doc/UTIL_API.md @@ -1300,6 +1300,27 @@ Checks if key is a direct property. has({one: 1}, 'one'); // -> true ``` +## highlight + +Highlight code. + +|Name |Type |Desc | +|-------|------|----------------------------| +|str |string|Code string | +|lang=js|string|Language, js, html or css | +|[style]|object|Keyword highlight style | +|return |string|Highlighted html code string| + +Available styles: + +comment, string, number, keyword, operator + +```javascript +highlight('const a = 5;', 'js', { + number: 'color:#0086b3;' +}); // -> 'const a = 5;' +``` + ## identity Return the first argument given. @@ -2292,6 +2313,7 @@ Available options: |accessGetter=false|boolean|Access getter value | |timeout=0 |number |Timeout of stringify | |depth=0 |number |Max depth of recursion | +|[ignore] |array |Values to ignore | When time is out, all remaining values will all be "Timeout". diff --git a/src/lib/JsonViewer.js b/src/lib/JsonViewer.js index 3125bdb..46ad864 100644 --- a/src/lib/JsonViewer.js +++ b/src/lib/JsonViewer.js @@ -2,7 +2,6 @@ import { evalCss, $, startWith, - isArr, isObj, uniqId, upperFirst, @@ -26,7 +25,11 @@ export default class JsonViewer { evalCss(require('./json.scss')) if (isObj(data) && isUndef(data.type) && isUndef(data.id)) { - data = JSON.parse(stringifyAll(data)) + data = JSON.parse( + stringifyAll(data, { + ignore: [Object.prototype] + }) + ) } this._data = { @@ -67,33 +70,24 @@ export default class JsonViewer { return ret } createEl(key, val, keyType, firstLevel = false) { - let type = 'object' + let type = typeof val let id - if (isArr(val)) type = 'array' - - function wrapKey(key) { - if (firstLevel) return '' - if (isObj(val) && val.jsonSplitArr) return '' - - let keyClass = 'eruda-key' - if ( - keyType === 'unenumerable' || - keyType === 'proto' || - keyType === 'symbol' - ) { - keyClass = 'eruda-key-lighter' - } - - return `${encode(key)}: ` - } - if (val === null) { return `
  • ${wrapKey(key)}null
  • ` - } else if (val.type === 'Number' || isNum(val) || isBool(val)) { - return `
  • ${wrapKey(key)}${encode( + } else if (isNum(val) || isBool(val)) { + return `
  • ${wrapKey(key)}${encode( val )}
  • ` + } + + if (val.type === 'RegExp') type = 'regexp' + if (val.type === 'Number') type = 'number' + + if (val.type === 'Number' || val.type === 'RegExp') { + return `
  • ${wrapKey(key)}${encode( + val.value + )}
  • ` } else if (val.type === 'Undefined' || val.type === 'Symbol') { return `
  • ${wrapKey(key)}${lowerCase( val.type @@ -124,6 +118,22 @@ export default class JsonViewer { return obj + '
  • ' } + function wrapKey(key) { + if (firstLevel) return '' + if (isObj(val) && val.jsonSplitArr) return '' + + let keyClass = 'eruda-key' + if ( + keyType === 'unenumerable' || + keyType === 'proto' || + keyType === 'symbol' + ) { + keyClass = 'eruda-key-lighter' + } + + return `${encode(key)}: ` + } + return `
  • ${wrapKey(key)}"${encode( val )}"
  • ` diff --git a/src/lib/json.scss b/src/lib/json.scss index 4c7dd09..ed6388c 100644 --- a/src/lib/json.scss +++ b/src/lib/json.scss @@ -36,7 +36,8 @@ .null { color: #0086b3; } - .string { + .string, + .regexp { color: #183691; } .number {