Joel A. A. Bredasbox Environment
The sbox Environment displays code in color via .jsI to make it more readable. Currently inspecting: .jsI
sbox: .jsI
Easily view code with jsI
(function () {
"use strict";
var TARGET_CLASS = "jsi-request";
var STYLE_ID = "jsi-highlight-styles";
var PROCESSED_ATTR = "data-jsi-done";
var THEME = {
keyword: "#c586c0",
control: "#c586c0",
builtin: "#4ec9b0",
string: "#ce9178",
template: "#ce9178",
comment: "#6a9955",
number: "#b5cea8",
boolean: "#569cd6",
nullish: "#569cd6",
function: "#dcdcaa",
property: "#9cdcfe",
operator: "#d4d4d4",
punctuation: "#d4d4d4",
regex: "#d16969",
identifier: "#9cdcfe",
default: "#d4d4d4"
};
var KEYWORDS = [
"const", "let", "var", "function", "return", "if", "else", "for",
"while", "do", "class", "extends", "new", "this", "typeof",
"instanceof", "import", "export", "default", "from", "async",
"await", "try", "catch", "finally", "throw", "switch", "case",
"break", "continue", "yield", "static", "get", "set", "super",
"delete", "void", "in", "of", "with", "debugger", "as"
];
var BOOLEAN_NULL = ["true", "false", "null", "undefined", "NaN", "Infinity"];
var BUILTINS = [
"console", "window", "document", "Math", "JSON", "Array", "Object",
"String", "Number", "Boolean", "Promise", "Map", "Set", "Symbol",
"Error", "RegExp", "Date", "Function", "Reflect", "Proxy"
];
var TOKEN_REGEX = new RegExp(
[
"(?<comment>\\/\\/.*|\\/\\*[\\s\\S]*?\\*\\/)",
"(?<template>`(?:\\\\.|\\$\\{[^}]*\\}|[^`\\\\])*`)",
"(?<string>'(?:\\\\.|[^'\\\\])*'|\"(?:\\\\.|[^\"\\\\])*\")",
"(?<regex>\\/(?![*/])(?:\\\\.|\\[(?:\\\\.|[^\\]\\\\])*\\]|[^/\\\\\\n])+\\/[gimsuy]*)",
"(?<number>\\b0[xXbBoO][0-9a-fA-F]+\\b|\\b\\d+\\.?\\d*(?:[eE][+-]?\\d+)?\\b)",
"(?<funccall>\\b[A-Za-z_$][\\w$]*(?=\\s*\\())",
"(?<identifier>\\b[A-Za-z_$][\\w$]*\\b)",
"(?<operator>=>|===|!==|==|!=|<=|>=|&&|\\|\\||\\?\\?|\\+\\+|--|\\+=|-=|\\*=|\\/=|[-+*/%=<>!&|^~?:])",
"(?<punctuation>[{}()\\[\\];,.])"
].join("|"),
"g"
);
function escapeHtml(str) {
return str
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
}
function classify(groups, matchText) {
if (groups.comment) return "comment";
if (groups.template) return "template";
if (groups.string) return "string";
if (groups.regex) return "regex";
if (groups.number) return "number";
if (groups.funccall) return "function";
if (groups.identifier) {
if (KEYWORDS.indexOf(matchText) !== -1) return "keyword";
if (BOOLEAN_NULL.indexOf(matchText) !== -1) return "boolean";
if (BUILTINS.indexOf(matchText) !== -1) return "builtin";
return "identifier";
}
if (groups.operator) return "operator";
if (groups.punctuation) return "punctuation";
return "default";
}
function highlight(code) {
var out = "";
var lastIndex = 0;
var regex = new RegExp(TOKEN_REGEX.source, "g");
var match;
while ((match = regex.exec(code)) !== null) {
if (match.index > lastIndex) {
out += escapeHtml(code.slice(lastIndex, match.index));
}
var type = classify(match.groups, match[0]);
out +=
'<span class="jsi-' +
type +
'">' +
escapeHtml(match[0]) +
"</span>";
lastIndex = regex.lastIndex;
if (match[0].length === 0) {
regex.lastIndex++;
}
}
if (lastIndex < code.length) {
out += escapeHtml(code.slice(lastIndex));
}
return out;
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css = [
"." + TARGET_CLASS + " {",
" background: #1e1e1e;",
" color: " + THEME.default + ";",
" font-family: 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace;",
" font-size: 14px;",
" line-height: 1.5;",
" padding: 16px;",
" border-radius: 8px;",
" overflow-x: auto;",
" white-space: pre;",
" tab-size: 2;",
"}"
];
Object.keys(THEME).forEach(function (key) {
css.push("." + TARGET_CLASS + " .jsi-" + key + " { color: " + THEME[key] + "; }");
});
css.push("." + TARGET_CLASS + " .jsi-comment { font-style: italic; }");
css.push("." + TARGET_CLASS + " .jsi-keyword { font-weight: 600; }");
var styleEl = document.createElement("style");
styleEl.id = STYLE_ID;
styleEl.textContent = css.join("\n");
document.head.appendChild(styleEl);
}
function processElement(el) {
if (el.getAttribute(PROCESSED_ATTR) === "true") return;
var raw = el.textContent;
el.innerHTML = highlight(raw);
el.setAttribute(PROCESSED_ATTR, "true");
}
function scanAll(root) {
injectStyles();
var scope = root || document;
var nodes = scope.querySelectorAll
? scope.querySelectorAll("." + TARGET_CLASS)
: [];
nodes.forEach ? nodes.forEach(processElement) : Array.prototype.forEach.call(nodes, processElement);
}
function init() {
scanAll(document);
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
mutation.addedNodes.forEach(function (node) {
if (node.nodeType !== 1) return;
if (node.classList && node.classList.contains(TARGET_CLASS)) {
processElement(node);
}
if (node.querySelectorAll) {
node.querySelectorAll("." + TARGET_CLASS).forEach(processElement);
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
window.JSIHighlight = {
scanAll: scanAll,
highlight: highlight,
processElement: processElement
};
})();