sugar-high 1.1.0 → 1.2.1

package/README.md

@@ -33,6 +33,8 @@ import { rust } from 'sugar-high/presets'
 const html = highlight(source, { ...rust })
 ```
 
+Available presets: `c`, `css`, `diff`, `go`, `java`, `python`, and `rust`.
+
 For more language presets and syntax color themes, see **[sugar-high.vercel.app](https://sugar-high.vercel.app/)**.
 
 ## Styling
@@ -78,11 +80,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).

package/lib/index.d.ts

@@ -11,11 +11,12 @@ 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
+  lineClassName?: (line: string, index: number) => string | null | undefined
 }
 
 export function highlight(code: string, options?: HighlightOptions): string
 export function tokenize(code: string, options?: HighlightOptions): Array<[number, string]>
-export function generate(tokens: Array<[number, string]>): Array<any>
+export function generate(tokens: Array<[number, string]>, options?: Pick<HighlightOptions, 'lineClassName'>): Array<any>
 export const SugarHigh: {
   TokenTypes: {
     [key: number]: string

package/lib/index.js

@@ -309,6 +309,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
+ *   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),
  * or null/undefined/below 1 for default JS single-quoted strings. No substring allocation.
@@ -714,9 +715,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()) {
@@ -813,29 +821,42 @@ function tokenize(code, options) {
 
 /**
  * @param {Array<[number, string]>} tokens
+ * @param {{
+ *   lineClassName?: (line: string, index: number) => string | null | undefined
+ * } | undefined} options
  * @return {Array<{type: string, tagName: string, children: any[], properties: Record<string, string>}>}
  */
-function generate(tokens) {
+function generate(tokens, options) {
   const lines = []
+  const lineClassName = options && typeof options.lineClassName === 'function'
+    ? options.lineClassName
+    : null
+  let lineIndex = 0
   /**
    * @param {any} children
+   * @param {string} text
    * @return {{type: string, tagName: string, children: any[], properties: Record<string, string>}}
    */
-  const createLine = (children) =>
-      ({
+  const createLine = (children, text) => {
+    const extraClassName = lineClassName ? lineClassName(text, lineIndex) : ''
+    lineIndex++
+
+    return ({
         type: 'element',
         tagName: 'span',
         children,
         properties: {
-          className: 'sh__line',
+          className: extraClassName ? `sh__line ${extraClassName}` : 'sh__line',
         },
       })
+  }
 
   /**
    * @param {Array<[number, string]>} tokens
    * @returns {void}
    */
   function flushLine(tokens) {
+    const lineText = tokens.map(([, value]) => value).join('')
     /** @type {Array<any>} */
     const lineTokens = (
       tokens
@@ -855,7 +876,7 @@ function generate(tokens) {
           }
         })
     )
-    lines.push(createLine(lineTokens))
+    lines.push(createLine(lineTokens, lineText))
   }
   /** @type {Array<[number, string]>} */
   const lineTokens = []
@@ -945,13 +966,14 @@ 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
+ *   lineClassName?: (line: string, index: number) => string | null | undefined
  * } | undefined} options
  * `onQuote` same as `tokenize`.
  * @returns {string}
  */
 function highlight(code, options) {
   const tokens = tokenize(code, options)
-  const lines = generate(tokens)
+  const lines = generate(tokens, options)
   const output = toHtml(lines)
   return output
 }

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
+  lineClassName?(line: string, index: number): string | null | undefined
 }
 
 export const css: LanguageConfig
@@ -12,3 +13,4 @@ export const python: LanguageConfig
 export const c: LanguageConfig
 export const go: LanguageConfig
 export const java: LanguageConfig
+export const diff: LanguageConfig

package/lib/presets/index.js

@@ -4,3 +4,4 @@ export * as python from './lang/python.js'
 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'

package/lib/presets/lang/diff.js

@@ -0,0 +1,11 @@
+// @ts-check
+
+export const keywords = new Set([])
+
+export const lineClassName = (line) => {
+  if (line.startsWith('+') && !line.startsWith('+++')) return 'sh__line--diff-add'
+  if (line.startsWith('-') && !line.startsWith('---')) return 'sh__line--diff-remove'
+  if (line.startsWith('@@')) return 'sh__line--diff-hunk'
+  if (/^(diff --git|index |--- |\+\+\+ )/.test(line)) return 'sh__line--diff-meta'
+  return undefined
+}

package/package.json

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