* Generates CSS styles for syntax highlighting tokens * @param {Object} config - Theme config with color values * @param {string} selector - CSS selector to scope styles * @param {boolean} includeBackground - Whether to include background/foreground base styles
(config, selector, includeBackground = true)
| 49 | * @param {boolean} includeBackground - Whether to include background/foreground base styles |
| 50 | */ |
| 51 | function generateStyles(config, selector, includeBackground = true) { |
| 52 | const c = config; |
| 53 | const keyword = c.keyword || "#c678dd"; |
| 54 | const string = c.string || "#98c379"; |
| 55 | const number = c.number || "#d19a66"; |
| 56 | const comment = c.comment || "#5c6370"; |
| 57 | const func = c.function || "#61afef"; |
| 58 | const variable = c.variable || "#e06c75"; |
| 59 | const type = c.type || "#e5c07b"; |
| 60 | const className = c.class || type; |
| 61 | const constant = c.constant || number; |
| 62 | const operator = c.operator || keyword; |
| 63 | const invalid = c.invalid || "#ff6b6b"; |
| 64 | const foreground = c.foreground || "#abb2bf"; |
| 65 | const background = c.background || "#282c34"; |
| 66 | |
| 67 | const baseStyles = includeBackground |
| 68 | ? ` |
| 69 | ${selector} { |
| 70 | background: ${background}; |
| 71 | color: ${foreground}; |
| 72 | }` |
| 73 | : ""; |
| 74 | |
| 75 | return `${baseStyles} |
| 76 | ${selector} .tok-keyword { color: ${keyword}; } |
| 77 | ${selector} .tok-operator { color: ${operator}; } |
| 78 | ${selector} .tok-number { color: ${number}; } |
| 79 | ${selector} .tok-string { color: ${string}; } |
| 80 | ${selector} .tok-comment { color: ${comment}; font-style: italic; } |
| 81 | ${selector} .tok-variableName { color: ${variable}; } |
| 82 | ${selector} .tok-propertyName { color: ${func}; } |
| 83 | ${selector} .tok-typeName { color: ${type}; } |
| 84 | ${selector} .tok-className { color: ${className}; } |
| 85 | ${selector} .tok-function { color: ${func}; } |
| 86 | ${selector} .tok-bool { color: ${constant}; } |
| 87 | ${selector} .tok-null { color: ${constant}; } |
| 88 | ${selector} .tok-punctuation { color: ${foreground}; } |
| 89 | ${selector} .tok-definition { color: ${variable}; } |
| 90 | ${selector} .tok-labelName { color: ${variable}; } |
| 91 | ${selector} .tok-namespace { color: ${type}; } |
| 92 | ${selector} .tok-macroName { color: ${keyword}; } |
| 93 | ${selector} .tok-atom { color: ${constant}; } |
| 94 | ${selector} .tok-meta { color: ${foreground}; } |
| 95 | ${selector} .tok-heading { color: ${variable}; font-weight: bold; } |
| 96 | ${selector} .tok-link { color: ${func}; text-decoration: underline; } |
| 97 | ${selector} .tok-strikethrough { text-decoration: line-through; } |
| 98 | ${selector} .tok-emphasis { font-style: italic; } |
| 99 | ${selector} .tok-strong { font-weight: bold; } |
| 100 | ${selector} .tok-invalid { color: ${invalid}; } |
| 101 | ${selector} .tok-name { color: ${variable}; } |
| 102 | ${selector} .tok-deleted { color: ${invalid}; } |
| 103 | ${selector} .tok-inserted { color: ${string}; } |
| 104 | ${selector} .tok-changed { color: ${number}; } |
| 105 | `.trim(); |
| 106 | } |
| 107 | |
| 108 | /** |