Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped
npm install --save sugar-high
import { highlight } from 'sugar-high' const codeHTML = highlight(code) document.querySelector('pre > code').innerHTML = codeHTML
Then make your own theme with customized colors by token type and put in global CSS. The corresponding class names star with sh__ prefix.
/** * Types that sugar-high have: * * identifier * keyword * string * Class, number and null * sign * comment * jsxliterals */ :root { --sh-class: #2d5e9d; --sh-identifier: #354150; --sh-sign: #8996a3; --sh-string: #00a99a; --sh-keyword: #f47067; --sh-comment: #a19595; --sh-jsxliterals: #6266d1; }
Sugar high provide .sh_line class name for each line. To display line number, define the .sh_line::before element with CSS will enable line numbers automatically.
pre code { counter-reset: sh-line-number; } .sh__line::before { counter-increment: sh-line-number 1; content: counter(sh-line-number); margin-right: 24px; text-align: right; color: #a4a4a4; }
You can use .sh__token--<token type> to customize the output node of each token.
.sh__token--keyword { background: #f47067; }
MIT