window.ENTITIES={'/api/snippets/javascript/codemirror%206%20-%20highlight%20source%20code%20under%20node.js%20(run%20under%20node)':[{"result":true,"message":null,"batch":{"type":"javascript","name":"codemirror 6 - highlight source code under node.js (run under node)","items":[{"id":"Dn6abD","type":"javascript","name":"CodeMirror 6 - highlight source code under Node.js (run under node)","content":"// NOTES:\n//     - In this snippet you can find example that shows how to create read-only CodeMirror 6 and run it inder Node.js.\n//     - CodeMirror 6 contributors recommend to use `@lezer/highlight` package to highlight source code outside web browser (outside @codemirror/view).\n\n\n// -- dependencies -------------------------------------------\n\nconst {highlightTree, classHighlighter} = require('@lezer/highlight');            // npm install @lezer/highlight\n\nconst {javascript: JAVASCRIPT_SUPPORT} = require('@codemirror/lang-javascript');  // npm install @codemirror/lang-javascript\nconst {json: JSON_SUPPORT} = require('@codemirror/lang-json');                    // npm install @codemirror/lang-json\nconst {css: CSS_SUPPORT} = require('@codemirror/lang-css');                       // npm install @codemirror/lang-css\nconst {html: HTML_SUPPORT} = require('@codemirror/lang-html');                    // npm install @codemirror/lang-html\nconst {xml: XML_SUPPORT} = require('@codemirror/lang-xml');                       // npm install @codemirror/lang-xml\nconst {cpp: CPP_SUPPORT} = require('@codemirror/lang-cpp');                       // npm install @codemirror/lang-cpp\nconst {java: JAVA_SUPPORT} = require('@codemirror/lang-java');                    // npm install @codemirror/lang-java\nconst {php: PHP_SUPPORT} = require('@codemirror/lang-php');                       // npm install @codemirror/lang-php\nconst {python: PYTHON_SUPPORT} = require('@codemirror/lang-python');              // npm install @codemirror/lang-python\nconst {rust: RUST_SUPPORT} = require('@codemirror/lang-rust');                    // npm install @codemirror/lang-rust\nconst {sql: SQL_SUPPORT} = require('@codemirror/lang-sql');                       // npm install @codemirror/lang-sql\nconst {markdown: MARKDOWN_SUPPORT} = require('@codemirror/lang-markdown');        // npm install @codemirror/lang-markdown\n//\n// Hint: check https://codemirror.net website to find language supports (`Language Support` section)\n//       also  https://github.com/orgs/codemirror/repositories?q=lang\n\n\n// -- utils --------------------------------------------------\n\n// Source: https://dirask.com/snippets/Node-js-escape-HTML-special-characters-DWBJG1\n//\nconst escapeHtml = (html) => {\n    let result = '';\n    for (const character of html) {\n        switch (character) {\n            // Warning: do not change cases order\n            case '&':  result += '&amp;';  break;\n            case '<':  result += '&lt;';   break;\n            case '>':  result += '&gt;';   break;\n            case '\"':  result += '&quot;'; break;\n            case '\\'': result += '&#039;'; break;\n            default:   result += character;\n        }\n    }\n    return result;\n};\n\n// Source: https://dirask.com/snippets/JavaScript-iterate-through-lines-in-indicated-text-used-newline-symbols-r-n-n-r-n-r-jmLoAp\n//\nconst iterateLines = (text, callback) => {\n    let pointer = 0;\n    for (let i = 0; i < text.length; i += 1) {\n        switch (text[i]) {\n            case '\\r':\n                callback(pointer, i);\n                if (text[i + 1] === '\\n') {\n                    i += 1;\n                }\n                pointer = i + 1;\n                break;\n            case '\\n':\n                callback(pointer, i);\n                if (text[i + 1] === '\\r') {\n                    i += 1;\n                }\n                pointer = i + 1;\n                break;\n        }\n    }\n    callback(pointer, text.length);\n};\n\n\n// -- CodeMirror ---------------------------------------------\n\nconst LANGUAGE_SUPPORTS = {\n    'JavaScript': () => JAVASCRIPT_SUPPORT(),\n    'TypeScript': () => JAVASCRIPT_SUPPORT({ typescript: true }),\n    'JSX': () => JAVASCRIPT_SUPPORT({ jsx: true }),\n    'TSX': () => JAVASCRIPT_SUPPORT({ typescript: true, jsx: true }),\n    'JSON': () => JSON_SUPPORT(),\n    'CSS': () => CSS_SUPPORT(),\n    'HTML': () => HTML_SUPPORT(),\n    'XML': () => XML_SUPPORT(),\n    'CPP': () => CPP_SUPPORT(),\n    'Java': () => JAVA_SUPPORT(),\n    'PHP': () => PHP_SUPPORT(),\n    'Python': () => PYTHON_SUPPORT(),\n    'Rust': () => RUST_SUPPORT(),\n    'SQL': () => SQL_SUPPORT(),\n    'Markdown': () => MARKDOWN_SUPPORT()\n    //\n    // Hint: check https://codemirror.net website to find language supports (`Language Support` section)     \n};\n\nconst createTree = (language, code) => {\n    const creator = LANGUAGE_SUPPORTS[language];\n    if (creator) {\n        const support = creator();\n        return support.language.parser.parse(code);\n    }\n    return null;\n};\n\nconst renderGutters = (code) => {\n    let result = '';\n    let counter = 0;\n    iterateLines(code, () => {\n        if (result) {\n            result += '\\n';\n        }\n        result += String(++counter);\n    });\n    return result;\n};\n\nconst renderContent = (language, code) => {\n    const tree = createTree(language, code);\n    if (tree) {\n        let result = '';\n        let index = 0;\n        const construct = (from, to, token) => {\n            if (index < from) {\n                result += escapeHtml(code.substring(index, from));\n            }\n            result += `<span class=\"${token}\">${escapeHtml(code.substring(from, to))}</span>`;\n            index = to;\n        };\n        highlightTree(tree, classHighlighter, construct);\n        if (index < code.length) {\n            result += escapeHtml(code.substring(index));\n        }\n        return result;\n    } else {\n        return escapeHtml(code);\n    }\n};\n\nconst renderCodeMirror = (language, code) => {\n    return (\n        `<pre class=\"cm-editor\">` +\n          `<div class=\"cm-gutters\">` +\n             renderGutters(code) +\n          `</div>` +\n          `<code class=\"cm-content\">` +\n             renderContent(language, code) +\n          `</code>` +\n        `</pre>`\n    );\n};\n\n\n\n// -----------------------------------------------------------\n// Usage example:\n// -----------------------------------------------------------\n\nconst language = 'JavaScript';\n\nconst code = 'for (let i = 0; i < 10; ++i) {\\n' +\n             '    console.log(`i: ${i}`);\\n' +\n             '}';\n\nconst html = renderCodeMirror(language, code);\n\nconsole.log(html);\n\n\n\n// Output:\n//\n//     <pre class=\"cm-editor\"><div class=\"cm-gutters\">1\\n2\\n3</div><code class=\"cm-content\"><span class=\"tok-keyword\">for</span> <span class=\"tok-punctuation\">(</span><span class=\"tok-keyword\">let</span> <span class=\"tok-variableName tok-definition\">i</span> <span class=\"tok-operator\">=</span> <span class=\"tok-number\">0</span><span class=\"tok-punctuation\">;</span> <span class=\"tok-variableName\">i</span> <span class=\"tok-operator\">&lt;</span> <span class=\"tok-number\">10</span><span class=\"tok-punctuation\">;</span> <span class=\"tok-operator\">++</span><span class=\"tok-variableName\">i</span><span class=\"tok-punctuation\">)</span> <span class=\"tok-punctuation\">{</span>\\n<span class=\"tok-variableName\">console</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">log</span><span class=\"tok-punctuation\">(</span><span class=\"tok-string2\">`i: </span><span class=\"tok-punctuation\">${</span><span class=\"tok-variableName\">i</span><span class=\"tok-punctuation\">}</span><span class=\"tok-string2\">`</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span>\\n<span class=\"tok-punctuation\">}</span></code></pre>\n\n\n// Example styles:\n/*\n    <style>\n\n        pre.cm-editor {\n            border: 1px solid #ddd;\n            font: 13.5px / 19px monospace;\n        }\n\n        div.cm-gutters {\n            padding: 10px 6px 10px 12px;\n            position: sticky;\n            left: 0;\n            border-right: 1px solid #ddd;\n            background: #f7f7f7;\n            min-width: 20px;\n            text-align: right;\n            color: #a1a1a1;\n            float: left;\n        }\n\n        code.cm-content {\n            padding: 10px 16px;\n            background: #fcfcfc;\n            tab-size: 30px;\n            color: #000000;\n            display: block;\n            float: none;\n            overflow-y: hidden;\n            overflow-x: auto;\n        }\n\n        span.tok-link {\n            color: #0000cc;\n        }\n\t\t\n        span.tok-comment {\n            color: #708090;\n        }\n\t\t\n        span.tok-keyword {\n            color: #770088;\n        }\n\n        span.tok-atom {\n            color: #221199;\n        }\n\n        span.tok-bool, span.tok-number {\n            color: #2771bb;\n        }\n\n        span.tok-string, span.tok-string2 {\n            color: #d03131;\n        }\n\n        span.tok-punctuation {\n            color: #999977;\n        }\n\n    </style>\n*/\n\n\n// Default tokens:\n//\n//     tok-meta\n//     tok-link\n//     tok-url\n//     tok-invalid\n//     tok-heading\n//     tok-emphasis\n//     tok-strong\n//     tok-deleted\n//     tok-inserted\n//     tok-keyword\n//     tok-operator\n//     tok-punctuation\n//     tok-atom\n//     tok-comment\n//     tok-literal\n//     tok-namespace\n//     tok-bool\n//     tok-number\n//     tok-string\n//     tok-string2\n//     tok-variableName\n//     tok-variableName tok-local\n//     tok-variableName tok-definition\n//     tok-variableName2\n//     tok-propertyName\n//     tok-propertyName tok-definition\n//     tok-typeName\n//     tok-className\n//     tok-macroName\n//     tok-labelName\n//\n// Source:\n//     https://github.com/lezer-parser/highlight/blob/main/src/highlight.ts","source":"","author":{"id":"Eagd7o","name":"Rogan-Wilkes","avatar":"1629030447422__Eagd7o__w40px_h40px.png","points":727,"role":"BASIC"},"creationTime":1676585706000,"updateTime":1677469896000,"removalTime":null}]}}]};