Super lightweight syntax highlighter for JSX, 1KB after minified and gizpped.
import { highlight } from 'sugar-high' const html = highlight(code)
/* styles.css */ :root { --sh-class: #2d5e9d; --sh-identifier: #354150; --sh-sign: #8996a3; --sh-property: #0550ae; --sh-entity: #249a97; --sh-jsxliterals: #6266d1; --sh-string: #00a99a; --sh-keyword: #f47067; --sh-comment: #a19595; }
Code highlight examples built with sugar-high
// npm i -S sugar-high import { highlight } from 'sugar-high' const html = highlight(code) document.querySelector('pre > code').innerHTML = html
const element = ( <> <Food season={{ sault: <p a={[{}]} /> }}> </Food> {/* jsx comment */} <h1 className="title" data-title="true"> Read{' '} <Link href="/posts/first-post"> <a>this page! - {Date.now()}</a> </Link> </h1> </> )
const nums = [ 1000_000_000, 1.2e3, 0x1f, .14, 1n ].filter(Boolean) function* foo(index) { do { yield index++; return void 0 } while (index < 2) }
/** * @param {string} names * @return {Promise<string[]>} */ async function notify(names) { const tags = [] for (let i = 0; i < names.length; i++) { tags.push('@' + names[i]) } await ping(tags) } class SuperArray extends Array { static core = Object.create(null) constructor(...args) { super(...args); } bump(value) { return this.map( x => x == undefined ? x + 1 : 0 ).concat(value) } }
export const test = (str) => /^\/[0-5]\/$/g.test(str) // This is a super lightweight javascript syntax highlighter npm package // This is a inline comment / <- a slash /// <reference path="..." /> // reference comment /* This is another comment */ alert('good') // <- alerts // Invalid calculation: regex and numbers const _in = 123 - /555/ + 444; const _iu = /* evaluate */ (19) / 234 + 56 / 7;