Super lightweight syntax highlighter
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;}
Remark.js is a powerful markdown processor, you can use the sugar-high remark plugin with remark.js to highlight code blocks in markdown.
Code highlight examples built with sugar-high
// npm i -S sugar-highimport { 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 numbersconst _in = 123 - /555/ + 444;const _iu = /* evaluate */ (19) / 234 + 56 / 7;