sugar-high 1.2.0 → 1.3.0

package/README.md

@@ -1,6 +1,7 @@
 # Sugar High
 
-[![npm][npm-badge]][npm]
+[![version][npm-version-badge]][npm]
+[![downloads][npm-downloads-badge]][npm]
 
 Super lightweight syntax highlighter for JavaScript and JSX—about **1 kB** minified and gzipped. Works in the browser or any JS runtime that can set HTML strings.
 
@@ -33,7 +34,15 @@ import { rust } from 'sugar-high/presets'
 const html = highlight(source, { ...rust })
 ```
 
-Available presets: `c`, `css`, `diff`, `go`, `java`, `python`, and `rust`.
+Available presets: `c`, `css`, `diff`, `go`, `java`, `json`, `python`, and `rust`.
+
+The `json` preset highlights quoted object keys as `property` tokens, keeping them distinct from string values:
+
+```js
+import { json } from 'sugar-high/presets'
+
+const html = highlight('{"name": "Alice"}', json)
+```
 
 For more language presets and syntax color themes, see **[sugar-high.vercel.app](https://sugar-high.vercel.app/)**.
 
@@ -80,11 +89,24 @@ pre code {
 Target a line with `.sh__line:nth-child(<n>)` (1-based):
 
 ```css
+.sh__line {
+  display: block;
+  padding: 0 12px;
+  margin: 0 -12px;
+  min-height: 1rem;
+}
+
 .sh__line:nth-child(5) {
-  background: #f5f5f5;
+  background: #fff8c5;
+}
+
+.sh__line--highlighted {
+  background: #fff8c5;
 }
 ```
 
+Use `.sh__line--highlighted` when you add highlight classes yourself (for example with `lineClassName`).
+
 ## Remark
 
 Use the [remark plugin](https://sugar-high.vercel.app/remark) to highlight fenced code blocks when processing Markdown with [remark](https://remark.js.org/). Details: [`packages/remark-sugar-high`](https://github.com/huozhi/sugar-high/tree/main/packages/remark-sugar-high).
@@ -95,6 +117,7 @@ MIT
 
 <!-- Definitions -->
 
-[npm-badge]: https://img.shields.io/npm/v/sugar-high.svg
+[npm-version-badge]: https://img.shields.io/npm/v/sugar-high?style=flat&colorA=000000&colorB=000000
+[npm-downloads-badge]: https://img.shields.io/npm/dt/sugar-high.svg?style=flat&colorA=000000&colorB=000000
 
 [npm]: https://www.npmjs.com/package/sugar-high

package/lib/index.d.ts

@@ -11,6 +11,8 @@ type HighlightOptions = {
    * or null/undefined or a number below 1 for default JS single-quoted string rules.
    */
   onQuote?: (curr: string, i: number, code: string) => number | null | undefined
+  /** Highlight quoted object keys followed by `:` as `property` tokens. */
+  quotedKeys?: boolean
   lineClassName?: (line: string, index: number) => string | null | undefined
 }
 

package/lib/index.js

@@ -235,13 +235,18 @@ function isSign(ch) {
   return Signs.has(ch)
 }
 
+const HtmlEntities = /** @type {Record<string, string>} */ ({
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#039;',
+})
+
+/** @param {string} str */
 function encode(str) {
-  return str
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;')
+  if (!/[&<>"']/.test(str)) return str
+  return str.replace(/[&<>"']/g, chr => HtmlEntities[chr])
 }
 
 function isWord(chr) {
@@ -301,6 +306,12 @@ function isRegexStart(str) {
   return str[0] === '/' && !isCommentStart_Js(str[0], str[1])
 }
 
+function isPropertyKey(code, quoteEnd) {
+  let i = quoteEnd + 1
+  while (i < code.length && /\s/.test(code[i])) i++
+  return code[i] === ':'
+}
+
 /**
  * @param {string} code
  * @param {{
@@ -309,6 +320,7 @@ function isRegexStart(str) {
  *   onCommentStart?: (curr: string, next: string) => number | boolean
  *   onCommentEnd?: (prev: string, curr: string) => number | boolean
  *   onQuote?: (curr: string, i: number, code: string) => number | null | undefined
+ *   quotedKeys?: boolean
  *   lineClassName?: (line: string, index: number) => string | null | undefined
  * } | undefined} options
  * Optional `onQuote(curr, i, code)` at `code[i] === "'"`: return length to consume from `i` (>= 1),
@@ -364,6 +376,7 @@ function tokenize(code, options) {
 
   /** @type {string | null} */
   let __strQuote = null
+  let __strTokenStart = 0
   let __regexQuoteStart = false
   let __strTemplateExprStack = 0
   let __strTemplateQuoteStack = 0
@@ -479,15 +492,23 @@ function tokenize(code, options) {
     // Inside jsx literals or template literals, string quotation is still part of it.
     if (isSingleQuotes(curr) && !inJsxLiterals() && !inStrTemplateLiterals()) {
       append()
+      let isStringClose = false
       if (prev !== `\\`) {
         if (__strQuote && curr === __strQuote) {
           __strQuote = null
+          isStringClose = true
         } else if (!__strQuote) {
           __strQuote = curr
+          __strTokenStart = tokens.length
         }
       }
 
       append(T_STRING, curr)
+      if (mergedOptions.quotedKeys && isStringClose && isPropertyKey(code, i)) {
+        for (let tokenIndex = __strTokenStart; tokenIndex < tokens.length; tokenIndex++) {
+          tokens[tokenIndex][0] = T_PROPERTY
+        }
+      }
       continue
     }
 
@@ -715,9 +736,16 @@ function tokenize(code, options) {
 
       let foundClose = false
 
+      // `/` is literal inside regex character classes, e.g. `[/]`.
+      let inCharClass = false
+
       // traverse to find closing regex slash
       for (; !isEol(); i++) {
-        if (code[i] === '/' && code[i - 1] !== '\\') {
+        const ch = code[i]
+        const escaped = code[i - 1] === '\\'
+        if (!escaped && ch === '[') inCharClass = true
+        if (!escaped && ch === ']') inCharClass = false
+        if (ch === '/' && !inCharClass && !escaped) {
           foundClose = true
           // end of regex, append regex flags
           while (start !== i && /^[a-z]$/.test(code[i + 1]) && !isEol()) {
@@ -763,8 +791,11 @@ function tokenize(code, options) {
           isJsxLiterals
         )
       ) {
-        current += curr
-        if (next === '<') {
+        let end = i + 1
+        while (code[end] === ' ') end++
+        current += code.slice(i, end)
+        i = end - 1
+        if (code[end] === '<') {
           append()
         }
       } else {
@@ -959,6 +990,7 @@ function toHtml(lines) {
  *   onCommentStart?: (curr: string, next: string) => number | boolean
  *   onCommentEnd?: (curr: string, prev: string) => number | boolean
  *   onQuote?: (curr: string, i: number, code: string) => number | null | undefined
+ *   quotedKeys?: boolean
  *   lineClassName?: (line: string, index: number) => string | null | undefined
  * } | undefined} options
  * `onQuote` same as `tokenize`.

package/lib/presets/index.d.ts

@@ -4,6 +4,7 @@ type LanguageConfig = {
   onCommentStart?(curr: string, next: string): 0 | 1 | 2
   onCommentEnd?(prev: string, curr: string): 0 | 1 | 2
   onQuote?(curr: string, i: number, code: string): number | null | undefined
+  quotedKeys?: boolean
   lineClassName?(line: string, index: number): string | null | undefined
 }
 
@@ -14,3 +15,4 @@ export const c: LanguageConfig
 export const go: LanguageConfig
 export const java: LanguageConfig
 export const diff: LanguageConfig
+export const json: LanguageConfig

package/lib/presets/index.js

@@ -5,3 +5,4 @@ export * as c from './lang/c.js'
 export * as go from './lang/go.js'
 export * as java from './lang/java.js'
 export * as diff from './lang/diff.js'
+export * as json from './lang/json.js'

package/lib/presets/lang/json.js

@@ -0,0 +1,4 @@
+// @ts-check
+
+export const keywords = new Set(['true', 'false', 'null'])
+export const quotedKeys = true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sugar-high",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/huozhi/sugar-high.git",