highlight-code

node v15.14.0
version: 7.0.0
endpointsharetweet
const css = ` /*! * GitHub Light v0.4.2 * Copyright (c) 2012 - 2017 GitHub, Inc. * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE) */ .cm-s-github-light.CodeMirror { /* background: #fff; */ color: #24292e; } .cm-s-github-light .CodeMirror-gutters { background: #fff; border-right-width: 0; } .cm-s-github-light .CodeMirror-guttermarker { color: white; } .cm-s-github-light .CodeMirror-guttermarker-subtle { color: #d0d0d0; } .cm-s-github-light .CodeMirror-linenumber { color: #959da5; padding: 0 16px 0 16px; } .cm-s-github-light .CodeMirror-cursor { border-left: 1px solid #24292e; } .cm-s-github-light div.CodeMirror-selected, .cm-s-github-light .CodeMirror-line::selection, .cm-s-github-light .CodeMirror-line > span::selection, .cm-s-github-light .CodeMirror-line > span > span::selection, .cm-s-github-light .CodeMirror-line::-moz-selection, .cm-s-github-light .CodeMirror-line > span::-moz-selection, .cm-s-github-light .CodeMirror-line > span > span::-moz-selection { background: #c8c8fa; } .cm-s-github-light .CodeMirror-activeline-background { background: #fafbfc; } .cm-s-github-light .CodeMirror-matchingbracket { text-decoration: underline; color: #24292e !important; } .cm-s-github-light .CodeMirror-lines { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; background: #fff; line-height: 1.5; } .cm-s-github-light .cm-comment { color: #6a737d; } .cm-s-github-light .cm-constant { color: #005cc5; } .cm-s-github-light .cm-entity { font-weight: normal; font-style: normal; text-decoration: none; color: #6f42c1; } .cm-s-github-light .cm-keyword { font-weight: normal; font-style: normal; text-decoration: none; color: #d73a49; } .cm-s-github-light .cm-storage { color: #d73a49; } .cm-s-github-light .cm-string { font-weight: normal; font-style: normal; text-decoration: none; color: #032f62; } .cm-s-github-light .cm-support { font-weight: normal; font-style: normal; text-decoration: none; color: #005cc5; } .cm-s-github-light .cm-variable { font-weight: normal; font-style: normal; text-decoration: none; color: #e36209; } `
// From https://raw.githubusercontent.com/MaxDesiatov/gatsby-remark-codemirror/master/highlightCode.js const CodeMirror = require("codemirror/addon/runmode/runmode.node");
require("graphql")
const { LexRules, ParseRules, isIgnored, onlineParser, } = require("graphql-language-service-parser"); /** * The GraphQL mode is defined as a tokenizer along with a list of rules, each * of which is either a function or an array. * * * Function: Provided a token and the stream, returns an expected next step. * * Array: A list of steps to take in order. * * A step is either another rule, or a terminal description of a token. If it * is a rule, that rule is pushed onto the stack and the parsing continues from * that point. * * If it is a terminal description, the token is checked against it using a * `match` function. If the match is successful, the token is colored and the * rule is stepped forward. If the match is unsuccessful, the remainder of the * rule is skipped and the previous rule is advanced. * * This parsing algorithm allows for incremental online parsing within various * levels of the syntax tree and results in a structured `state` linked-list * which contains the relevant information to produce valuable typeaheads. */ CodeMirror.defineMode("graphql", (config) => { const parser = onlineParser({ eatWhitespace: (stream) => stream.eatWhile(isIgnored), lexRules: LexRules, parseRules: ParseRules, editorConfig: { tabSize: config.tabSize }, }); return { config, startState: parser.startState, token: parser.token, indent: function (state, textAfter) { const levels = state.levels; // If there is no stack of levels, use the current level. // Otherwise, use the top level, pre-emptively dedenting for close braces. const level = !levels || levels.length === 0 ? state.indentLevel : levels[levels.length - 1] - (this.electricInput.test(textAfter) ? 1 : 0); return level * this.config.indentUnit; }, electricInput: /^\s*[})\]]/, fold: "brace", lineComment: "#", closeBrackets: { pairs: '()[]{}""', explode: "()[]{}", }, }; });
const charactersToEncode = { "&": "&amp;", "<": "&lt;", ">": "&gt;" }; const encodeCharacter = function (chr) { return charactersToEncode[chr] || chr; }; const encodeText = function (str) { return str.replace(/[&<>]/g, encodeCharacter); }; require("codemirror/mode/meta"); // require("graphql") // require("codemirror-graphql/mode"); CodeMirror.modeInfo.forEach(element => { if (Object.keys(element).some(x => element[x] === "null")) return; const mode = element["mode"]; const required = `codemirror/mode/${mode}/${mode}`; require(required); }); module.exports = { css, highlightCode(language, value) { const elements = []; let lastStyle = null; let tokenBuf = ""; const pushElement = (token, style) => { elements.push( `<span${style ? ` class="cm-${style}"` : ""}>${encodeText(token)}</span>` ); }; CodeMirror.runMode(value, language, (token, style) => { if (lastStyle === style) { tokenBuf += token; lastStyle = style; } else { if (tokenBuf) { pushElement(tokenBuf, lastStyle); } tokenBuf = token; lastStyle = style; } }); pushElement(tokenBuf, lastStyle); return elements.join(""); }, }
Loading…

no comments

    sign in to comment