sugar-high 0.4.7 → 0.5.0

package/README.md

@@ -71,6 +71,16 @@ pre code {
 }
 ```
 
+#### CSS Class Names
+
+You can use `.sh__token--<token type>` to customize the output node of each token.
+
+```css
+.sh__token--keyword {
+  background: #f47067;
+}
+```
+
 ### LICENSE
 
 MIT

package/lib/index.mjs

@@ -76,7 +76,7 @@ const signs = new Set([
   ...jsxBrackets,
 ])
 
-export const types = [
+const types = [
   'identifier',
   'keyword',
   'string',
@@ -174,7 +174,7 @@ function isRegexStart(str) {
  * @param {string} code
  * @return {Array<[number, string]>}
  */
-export function tokenize(code) {
+function tokenize(code) {
   let current = ''
   let type = -1
   /** @type {[number | null, string | null]} */
@@ -514,7 +514,7 @@ function generate(tokens) {
   function flushLine(tokens) {
     linesHtml.push(createLine(
       tokens.map(([type, value]) => (
-        `<span style="color: var(--sh-${types[type]})">${encode(value)}</span>`
+        `<span class="sh__token--${types[type]}" style="color: var(--sh-${types[type]})">${encode(value)}</span>`
       ))
       .join('')
     ))
@@ -555,8 +555,19 @@ function generate(tokens) {
  * @param {string} code
  * @returns {string}
  */
-export function highlight(code) {
+function highlight(code) {
   const tokens = tokenize(code)
   const output = generate(tokens).join('\n')
   return output
+}
+
+// namespace
+const SugarHigh = {
+  TokenTypes: types,
+}
+
+export {
+  highlight,
+  tokenize,
+  SugarHigh,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sugar-high",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "type": "module",
   "exports": "./lib/index.mjs",
   "description": "Super lightweight JSX syntax highlighter",