### Highlight CSS Code

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/api-reference.md

Example of highlighting CSS code using the imported css preset. Ensure the 'sugar-high' and 'sugar-high/presets' are installed.

```javascript
import { highlight } from 'sugar-high'
import { css } from 'sugar-high/presets'

const cssCode = `
@media (max-width: 600px) {
  body { color: red; }
}
`

const html = highlight(cssCode, { ...css })
```

--------------------------------

### Install remark-sugar-high

Source: https://github.com/huozhi/sugar-high/blob/main/packages/remark-sugar-high/README.md

Install the remark-sugar-high package using npm.

```bash
npm i -S remark-sugar-high
```

--------------------------------

### Highlight Go Code Example

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/api-reference.md

Example of how to highlight Go code using the 'go' preset. Ensure 'sugar-high' and the preset are imported.

```javascript
import { highlight } from 'sugar-high'
import { go } from 'sugar-high/presets'

const goCode = `
func main() {
    fmt.Println("Hello, World!")
}
`

const html = highlight(goCode, { ...go })
```

--------------------------------

### Highlight Java Code Example

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/api-reference.md

Example of how to highlight Java code using the 'java' preset. Ensure 'sugar-high' and the preset are imported.

```javascript
import { highlight } from 'sugar-high'
import { java } from 'sugar-high/presets'

const javaCode = `
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
`

const html = highlight(javaCode, { ...java })
```

--------------------------------

### Install Sugar High

Source: https://github.com/huozhi/sugar-high/blob/main/README.md

Install the sugar-high package using npm.

```sh
npm install sugar-high
```

--------------------------------

### JavaScript Sign Token Examples

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/token-types-reference.md

Demonstrates various operators, punctuation, and symbols that are tokenized as 'sign' types in JavaScript.

```javascript
const x = 10 + 20      // =, +, -> sign
[1, 2, 3]              // [, ,, ], -> sign
{ a: 1, b: 2 }         // {, :, ,, }, -> sign
obj.prop               // . -> sign
(expr) ? true : false  // (, ), ?, :, -> sign
!flag && valid         // !, && -> sign (each character is a separate sign token)
```

--------------------------------

### Diff Styling Example

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/preset-keywords.md

Example CSS rules for styling different types of lines in a diff output, including added, removed, hunk, and metadata lines.

```css
.sh__line--diff-add { background-color: #eaffea; color: #24292e; }
.sh__line--diff-remove { background-color: #ffeaea; color: #24292e; }
.sh__line--diff-hunk { background-color: #f0e5ff; color: #24292e; }
.sh__line--diff-meta { color: #6a737d; }
```

--------------------------------

### Highlight Rust Code

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/api-reference.md

Example of highlighting Rust code using the imported rust preset. This preset supports Rust-specific string literals and lifetimes. Ensure the 'sugar-high' and 'sugar-high/presets' are installed.

```javascript
import { highlight } from 'sugar-high'
import { rust } from 'sugar-high/presets'

const rustCode = `
fn main() {
    let s = 'Hello';
    let lifetime: &'a str = &s;
}
`

const html = highlight(rustCode, { ...rust })
```

--------------------------------

### Diff Input Example

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/preset-keywords.md

Sample diff input demonstrating various line types like metadata, hunk headers, added lines, and removed lines.

```diff
diff --git a/file.js b/file.js
index 1234567..abcdefg 100644
--- a/file.js
+++ b/file.js
@@ -5,3 +5,4 @@ class MyClass {
  method() {
-    return false
+    return true
+    // added comment
```

--------------------------------

### Identifier Examples

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/token-types-reference.md

Used for variable, function, and other identifier names. Must start with a letter, underscore, or dollar sign, followed by letters, digits, underscores, or dollar signs. Includes Unicode identifiers but not keywords or properties preceded by a dot.

```javascript
const myVar = 42       // myVar -> identifier
function greet() {}    // greet -> identifier
let [a, b] = arr       // a, b -> identifier
class MyClass {}       // MyClass -> identifier (but classified as 'class' due to capitalization)
```

--------------------------------

### Usage with Remark

Source: https://github.com/huozhi/sugar-high/blob/main/packages/remark-sugar-high/README.md

Integrate the highlight plugin into a Remark processor to enable syntax highlighting. This example shows processing a markdown file and converting it to HTML.

```javascript
const { highlight } = require('remark-sugar-high');

await remark()
  .use(highlight)
  .use(require('remark-html'))
  .process(file, (err, file) => console.log(String(file)));
```

--------------------------------

### Customizing Syntax Highlighting with HighlightOptions

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/types.md

Example demonstrating how to use the HighlightOptions object to customize keyword sets, comment detection logic, and line class names for syntax highlighting.

```javascript
import { highlight } from 'sugar-high'

const options = {
  keywords: new Set(['KEYWORD1', 'KEYWORD2']),
  typeKeywords: new Set(['MyType']),
  onCommentStart: (curr, next) => {
    if (curr === '/' && next === '/') return 1 // line comment
    if (curr === '/' && next === '*') return 2 // block comment
    return 0
  },
  onCommentEnd: (prev, curr) => {
    if (curr === '\n') return 1
    if (prev === '*' && curr === '/') return 2
    return 0
  },
  lineClassName: (line, index) => {
    if (index === 0) return 'first-line'
    if (line.includes('TODO')) return 'has-todo'
    return null
  }
}

const html = highlight('KEYWORD1 x = 42 // comment', options)
```

--------------------------------

### JSX vs. Type Argument Examples

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/jsx-typescript-detection.md

Illustrates common scenarios where '<' can be ambiguous. These examples show how the highlighter distinguishes JSX elements from TypeScript type arguments and generic function parameters.

```typescript
// JSX element
const el = <div>content</div>
//         ^ JSX detected: 'div' is followed by > and is a tag
```

```typescript
// Type argument
const map: Map<string, number> = new Map()
//              ^ Type arg detected: Map is a constructor, < is followed by type names
```

```typescript
// Generic function (tricky case)
const fn = <T>(x: T) => x
//          ^ Detected as generic parameter list, not JSX
//            because pattern matches: identifier, parenthesis, arrow
```

```typescript
// Return JSX
return <Component />
//     ^ JSX detected (not type arg because 'return' keyword allows JSX)
```

```typescript
// Comparison operation
if (x < y) { } 
//     ^ Not JSX (operator context)
```

--------------------------------

### Markdown with Line Highlighting

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/README.md

Example of a Markdown code fence with meta string specifying lines to highlight.

```markdown
```javascript {2,4-6}
line 1
line 2  <- highlighted
line 3
line 4  <- highlighted
line 5  <- highlighted
line 6  <- highlighted
```
```

--------------------------------

### JSX Parsing Example and State Transitions

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/jsx-typescript-detection.md

Demonstrates the step-by-step parsing of a JSX structure, showing how the state machine variables transition through different states to tokenize the code correctly.

```jsx
<div>
  {value}
  <span>text</span>
</div>
```

```text
States:
<       -> __jsxTag=1, __jsxEnter=true
div     -> T_ENTITY
>       -> __jsxTag=0, __jsxStack=1
\n      -> T_BREAK
{       -> __jsxExpr=true
value   -> T_IDENTIFIER
}       -> __jsxExpr=false
\n      -> T_BREAK
<       -> __jsxTag=1
span    -> T_ENTITY
>       -> __jsxTag=0, __jsxStack=2
text    -> T_JSX_LITERALS
<       -> __jsxTag=2
/span   -> T_ENTITY
>       -> __jsxTag=0, __jsxStack=1
\n      -> T_BREAK
<       -> __jsxTag=2
/div    -> T_ENTITY
>       -> __jsxTag=0, __jsxStack=0, __jsxEnter=false (exit)
```

--------------------------------

### Use remark-sugar-high plugin for syntax highlighting

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/remark-plugin.md

This example demonstrates how to integrate the `highlight` plugin into a remark processor pipeline. It processes a Markdown string with a code block specifying lines to highlight and outputs HTML with syntax-highlighted code.

```javascript
import { remark } from 'remark'
import { highlight } from 'remark-sugar-high'
import html from 'remark-html'

const processor = remark()
  .use(highlight)           // Add syntax highlighting
  .use(html)                // Convert to HTML

const markdown = `
\
\
```javascript {2,4}
const greeting = 'Hello'
console.log(greeting)
const farewell = 'Goodbye'
console.log(farewell)
\
\
```
`

processor.process(markdown, (err, file) => {
  console.log(String(file))
  // Output: <pre class="sh-lang--javascript"><code ...>
  //   <span class="sh__line">...</span>
  //   <span class="sh__line sh__line--highlighted">...</span>
  //   <span class="sh__line">...</span>
  //   <span class="sh__line sh__line--highlighted">...</span>
  // </code></pre>
})
```

--------------------------------

### Template Literal Example

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/implementation-internals.md

Illustrates a template literal with nested expressions.

```javascript
const str = `Hello ${name}, you are ${age} years old`
```

--------------------------------

### Integrate Sugar-High with CodeMirror

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/usage-patterns.md

Provides an example of integrating Sugar-High with CodeMirror for real-time syntax highlighting as the user types.

```javascript
import { highlight } from 'sugar-high'
import CodeMirror from 'codemirror'

const editor = CodeMirror(document.body, {
  value: 'const x = 42',
  mode: 'javascript',
})

// Sync highlighting
editor.on('change', () => {
  const html = highlight(editor.getValue())
  document.querySelector('.preview').innerHTML = html
})
```

--------------------------------

### TypeScript Generic Arrow Function Examples

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/jsx-typescript-detection.md

These examples demonstrate valid TypeScript syntax for generic arrow functions, which the `isTypeParameterListStart` function is designed to detect. They cover single, multiple, and constrained type parameters, as well as assignment.

```typescript
<T>(arg: T) => arg                    // Generic arrow function
```

```typescript
<T, U>(a: T, b: U) => [a, b]        // Multiple type parameters
```

```typescript
<T extends Comparable<T>>(x: T) => x // Nested generics
```

```typescript
const fn = <T>(x: T) => x             // With assignment
```

--------------------------------

### Language Presets

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/INDEX.md

Pre-defined configurations for common programming languages, simplifying the setup for syntax highlighting.

```APIDOC
## Language Presets

Available presets include: `css`, `rust`, `python`, `c`, `go`, `java`, `diff`. These can be imported from `sugar-high/presets`.
```

--------------------------------

### CSS Selectors for Styling Token Types

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/output-format.md

Provides examples of targeting specific token types within the code for custom styling.

```css
.sh__token--keyword { /* Keywords */ }
.sh__token--string { /* Strings */ }
.sh__token--comment { /* Comments */ }
```

--------------------------------

### Keyword Examples

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/token-types-reference.md

Represents language keywords. Must exactly match keywords in the configured set. If preceded by a dot, it's treated as an identifier.

```javascript
const x = 10           // const -> keyword
if (x > 5) { }        // if -> keyword
await asyncFunc()      // await -> keyword
```

--------------------------------

### JavaScript Comment Token Examples

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/token-types-reference.md

Illustrates single-line and block comments in JavaScript, which are tokenized as 'comment' types.

```javascript
// single line comment     // entire comment -> comment
/* block comment */        // entire comment -> comment
/* multi-line
   block comment */        // entire block -> comment
```

--------------------------------

### css preset

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/api-reference.md

Provides CSS language configuration for syntax highlighting. It includes a set of CSS keywords and handlers for comment start and end.

```APIDOC
## css preset

### Description
Provides CSS language configuration for syntax highlighting. It includes a set of CSS keywords and handlers for comment start and end.

### Import
```js
import { css } from 'sugar-high/presets'
```

### Structure
```typescript
type LanguageConfig = {
  keywords: Set<string>
  onCommentStart?(curr: string, next: string): 0 | 1 | 2
  onCommentEnd?(prev: string, curr: string): 0 | 1 | 2
}
```

### Properties
- **keywords** (Set<string>) - CSS at-rules and keywords: `@media`, `@import`, `@keyframes`, `@font-face`, `@supports`, `@page`, `@counter-style`, `@font-feature-values`, `@viewport`, `@document`
- **onCommentStart** (function) - Returns 1 when encountering `/*`
- **onCommentEnd** (function) - Returns 1 when encountering `*/`

### Example
```js
import { highlight } from 'sugar-high'
import { css } from 'sugar-high/presets'

const cssCode = `
@media (max-width: 600px) {
  body { color: red; }
}
`

const html = highlight(cssCode, { ...css })
```
```

--------------------------------

### Integrating Sugar High with DOM

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/README.md

Provides examples for highlighting code and injecting the HTML into the DOM, including adding custom CSS styles.

```javascript
// Highlight and inject
const code = document.querySelector('code').textContent
const html = highlight(code)
document.querySelector('code').innerHTML = html

// With CSS
const style = document.createElement('style')
style.textContent = `
  :root {
    --sh-keyword: #f47067;
    --sh-string: #00a99a;
    /* ... more colors ... */
  }
  .sh__line { display: block; }
`
document.head.appendChild(style)
```

--------------------------------

### CSS Styling for Token Types

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/token-types-reference.md

Shows an example of an HTML span with inline styles for a keyword token and the corresponding CSS variables for defining colors.

```html
<span class="sh__token--keyword" style="color: var(--sh-keyword)">const</span>
```

```css
:root {
  --sh-identifier: #354150;
  --sh-keyword: #f47067;
  --sh-string: #00a99a;
  --sh-class: #2d5e9d;
  --sh-property: #0550ae;
  --sh-entity: #249a97;
  --sh-jsxliterals: #6266d1;
  --sh-sign: #8996a3;
  --sh-comment: #a19595;
  --sh-break: inherit;      /* not usually visible */
  --sh-space: inherit;       /* inherits text color */
}
```

--------------------------------

### Template Literal State Trace Example

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/implementation-internals.md

A trace showing the state changes of template literal parsing for a simple string with a nested expression.

```text
`Hello ${name}`
^                __strTemplateQuoteStack=1, content='`'
       ^         __strTemplateExprStack=1, sign='${'
            ^    __strTemplateExprStack=0, sign='}'
             ^   __strTemplateQuoteStack=0, content='`'
```

--------------------------------

### Custom Language with Special Comments

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/usage-patterns.md

Define a custom language highlighter by specifying keywords and custom comment detection logic. This example shows how to handle Erlang-style comments starting with '%'.

```javascript
import { highlight } from 'sugar-high'

const erlangLike = {
  keywords: new Set(['if', 'then', 'else', 'case', 'of', 'fun']),
  onCommentStart: (curr, next) => {
    // Erlang uses % for comments
    if (curr === '%') return 1
    return 0
  },
  onCommentEnd: (prev, curr) => {
    return curr === '\n' ? 1 : 0
  },
}

const code = `
if X > 0 then
  % This is a comment
  Y = X + 1
else
  Y = 0
`

const html = highlight(code, erlangLike)
```

--------------------------------

### Import and Use Presets in Sugar High

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/preset-keywords.md

Demonstrates importing presets like rust, python, and css, and spreading them into highlight options. Shows using a single preset, merging with custom line number styling, and composing multiple configurations with custom keywords and comment rules.

```javascript
import { highlight } from 'sugar-high'
import { rust, python, css } from 'sugar-high/presets'

// Use a single preset
const html1 = highlight(rustCode, { ...rust })

// Merge presets with custom options
const html2 = highlight(pythonCode, {
  ...python,
  lineClassName: (line, index) => {
    return index % 2 === 0 ? 'even-line' : null
  }
})

// Or compose multiple configs
const html3 = highlight(code, {
  keywords: new Set(['custom', 'keyword']),
  onCommentStart: (curr, next) => (curr === '#' ? 1 : 0),
  onCommentEnd: (prev, curr) => (curr === '\n' ? 1 : 0),
})
```

--------------------------------

### Custom Language with Multi-Character Operators

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/usage-patterns.md

Create a custom language highlighter that supports multi-character operators and custom comment syntax. This example defines a language with ';;' as comment start and newline as comment end.

```javascript
import { highlight } from 'sugar-high'

const customLang = {
  keywords: new Set(['define', 'lambda', 'if', 'cond']),
  onCommentStart: (curr, next) => {
    if (curr + next === ';;') return 1
    return 0
  },
  onCommentEnd: (prev, curr) => {
    return curr === '\n' ? 1 : 0
  },
}

const code = `
(define (factorial n)
  ;; Classic recursive definition
  (if (<= n 1)
      1
      (* n (factorial (- n 1)))))
`

const html = highlight(code, customLang)
```

--------------------------------

### Syntax Highlighting with Language Presets

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/README.md

Shows how to use language presets, like Rust, with the `highlight` function to apply specific syntax rules.

```javascript
import { highlight } from 'sugar-high'
import { rust } from 'sugar-high/presets'

const code = 'fn main() { println!("Hello"); }'
const html = highlight(code, { ...rust })
```

--------------------------------

### Check for Regex Literal Start

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/implementation-internals.md

Returns true if the string starts with a forward slash (/) but is not a comment start. Used to distinguish regex literals from division operators.

```javascript
function isRegexStart(str: string): boolean
```

--------------------------------

### Detect JavaScript Single-line or Block Comment Start

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/implementation-internals.md

Detects the start of JavaScript-style comments. Returns 0 for no comment start, 1 for single-line comments (//), and 2 for block comments (/*).

```javascript
function isCommentStart_Js(curr, next): 0 | 1 | 2
```

--------------------------------

### Check for Identifier Start Character

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/implementation-internals.md

Returns true if the character can start an identifier, meaning it is a letter or a Unicode character.

```javascript
function isIdentifierChar(chr: string): boolean
```

--------------------------------

### Using LanguageConfig with highlight function

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/types.md

Demonstrates how to use a LanguageConfig preset, such as 'rust', with the highlight function. All presets conform to the LanguageConfig type and can be spread into HighlightOptions.

```javascript
import { highlight } from 'sugar-high'
import { rust } from 'sugar-high/presets'

// All presets conform to LanguageConfig
const html = highlight(rustCode, { ...rust })
```

--------------------------------

### Highlighted JavaScript Code Example

Source: https://github.com/huozhi/sugar-high/blob/main/packages/remark-sugar-high/README.md

An example of JavaScript code with specific lines highlighted (lines 2 and 5) as processed by remark-sugar-high.

```html
<pre
  class="sh-lang--javascript"
><code class="sh-lang--javascript" data-sh-language="javascript"><span class="sh__line"><span class="sh__token--comment" style="color: var(--sh-comment)">// Here is a simple function</span><span class="sh__token--line">
</span></span><span class="sh__line sh__line--highlighted"><span class="sh__token--comment" style="color: var(--sh-comment)"></span><span class="sh__token--keyword" style="color: var(--sh-keyword)">async</span><span class="sh__token--space" style="color: var(--sh-space)"> </span><span class="sh__token--keyword" style="color: var(--sh-keyword)">function</span><span class="sh__token--space" style="color: var(--sh-space)"> </span><span class="sh__token--identifier" style="color: var(--sh-identifier)">hello</span><span class="sh__token--sign" style="color: var(--sh-sign)">(</span><span class="sh__token--sign" style="color: var(--sh-sign)">)</span><span class="sh__token--space" style="color: var(--sh-space)"> </span><span class="sh__token--sign" style="color: var(--sh-sign)">{</span><span class="sh__token--break" style="color: var(--sh-break)">
</span></span><span class="sh__line"><span class="sh__token--space" style="color: var(--sh-space)">    </span><span class="sh__token--identifier" style="color: var(--sh-identifier)">console</span><span class="sh__token--sign" style="color: var(--sh-sign)">.</span><span class="sh__token--property" style="color: var(--sh-property)">log</span><span class="sh__token--sign" style="color: var(--sh-sign)">(</span><span class="sh__token--string" style="color: var(--sh-string)">'</span><span class="sh__token--string" style="color: var(--sh-string)">Hello, world from JavaScript!</span><span class="sh__token--string" style="color: var(--sh-string)">'</span><span class="sh__token--sign" style="color: var(--sh-sign)">)</span><span class="sh__token--break" style="color: var(--sh-break)">
</span></span><span class="sh__line"><span class="sh__token--space" style="color: var(--sh-space)">    </span><span class="sh__token--keyword" style="color: var(--sh-keyword)">return</span><span class="sh__token--space" style="color: var(--sh-space)"> </span><span class="sh__token--class" style="color: var(--sh-class)">123</span><span class="sh__token--space" style="color: var(--sh-space)"> </span><span class="sh__token--comment" style="color: var(--sh-comment)">// return a number</span><span class="sh__token--line">
</span></span><span class="sh__line sh__line--highlighted"><span class="sh__token--comment" style="color: var(--sh-comment)"></span><span class="sh__token--sign" style="color: var(--sh-sign)">{</span><span class="sh__token--break" style="color: var(--sh-break)">
</span></span><span class="sh__line"><span class="sh__token--break" style="color: var(--sh-break)">
</span></span><span class="sh__line"><span class="sh__token--keyword" style="color: var(--sh-keyword)">await</span><span class="sh__token--space" style="color: var(--sh-space)"> </span><span class="sh__token--identifier" style="color: var(--sh-identifier)">hello</span><span class="sh__token--sign" style="color: var(--sh-sign)">(</span><span class="sh__token--sign" style="color: var(--sh-sign)">)</span><span class="sh__token--line">
</span></span></code></pre>
```

--------------------------------

### Create a Vue.js Highlight Component

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/usage-patterns.md

Demonstrates building a reusable Vue.js component that utilizes Sugar-High for syntax highlighting, supporting language-specific presets like Rust.

```vue
// HighlightCode.vue
<template>
  <pre><code v-html="highlighted"></code></pre>
</template>

<script>
import { highlight } from 'sugar-high'

export default {
  props: ['code', 'lang'],
  computed: {
    highlighted() {
      const preset = this.lang === 'rust' ? { ...rust } : {}
      return highlight(this.code, preset)
    }
  }
}
</script>
```

--------------------------------

### Detect Type Parameter List Start

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/implementation-internals.md

Determines if a '<' character signifies the start of a generic type parameter list or JSX. It checks for balanced angle brackets and specific subsequent characters like '(' and '=>'.

```javascript
function isTypeParameterListStart(code, startIndex) {
  if (code[startIndex] !== '<') return false
  
  let depth = 0
  let sawIdentifierStart = false
  
  for (let i = startIndex; i < code.length; i++) {
    const ch = code[i]
    
    if (ch === '<') depth++
    if (ch === '>') {
      depth--
      if (depth === 0) {
        // Must be followed by (
        let next = i + 1
        while (next < code.length && /\s/.test(code[next])) next++
        if (!(sawIdentifierStart && code[next] === '(')) return false
        
        // And the ( must lead to =>
        const tail = code.slice(next, next + 320)
        return /\)\s*(?::[\s\S]{0,120}?)?=>/.test(tail)
      }
      continue
    }
    
    if (depth === 0) continue
    
    if (/[$A-Za-z_]/.test(ch)) {
      sawIdentifierStart = true
      continue
    }
    if (/[\[\s,\.\=\?\:\|\&\\\]]/.test(ch)) continue
    
    return false  // Invalid character in generic params
  }
  
  return false
}
```

--------------------------------

### Import Go Preset

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/api-reference.md

Import the Go preset from Sugar High.

```javascript
import { go } from 'sugar-high/presets'
```

--------------------------------

### Verify Preset Application for Rust

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/usage-patterns.md

Compares tokenization of Rust code with and without a preset. Shows how presets like `rust` enable specific syntax recognition, such as character literals.

```javascript
import { tokenize, SugarHigh } from 'sugar-high'
import { rust } from 'sugar-high/presets'

const code = "let mut x: i32 = 'a';"

// Without preset (no Rust support)
const jsTokens = tokenize(code)
// 'a' is treated as a string

// With preset (Rust character literal support)
const rustTokens = tokenize(code, { ...rust })
// 'a' is recognized as a character literal via onQuote
```

--------------------------------

### Import Rust Preset

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/api-reference.md

Import the Rust language configuration from the sugar-high presets.

```javascript
import { rust } from 'sugar-high/presets'
```

--------------------------------

### Go Keywords

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/preset-keywords.md

Lists the standard keywords recognized in Go syntax highlighting.

```text
break
case
chan
const
continue
default
defer
else
fallthrough
for
func
go
goto
if
import
interface
map
package
range
return
select
struct
switch
type
var
```

--------------------------------

### Detect Generic Type Parameter Start in Code

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/jsx-typescript-detection.md

Use this function to identify the start of a generic type parameter list in code. It checks for specific patterns that distinguish TypeScript generics from other uses of angle brackets, like JSX or comparisons. Ensure the code is a string and startIndex is a valid number.

```javascript
function isTypeParameterListStart(code, startIndex) {
  if (code[startIndex] !== '<') return false
  
  let depth = 0
  let sawIdentifierStart = false
  
  for (let i = startIndex; i < code.length; i++) {
    const ch = code[i]
    
    if (ch === '<') depth++
    else if (ch === '>') {
      depth--
      if (depth === 0) {
        // Check that this is followed by `(...) =>`
        let next = i + 1
        while (next < code.length && /\s/.test(code[next])) next++
        if (!(sawIdentifierStart && code[next] === '(')) return false
        
        const tail = code.slice(next, next + 320)
        return /\)\s*(?::[\s\S]{0,120}?)?=>/.test(tail)
      }
    } else if (depth === 0) {
      // Outside the <...>, we expect the arrow function to start
      continue
    } else if (/[$A-Za-z_]/.test(ch)) {
      sawIdentifierStart = true
    } else if (!/[\s,\.\=\?\:|\|\&\[\]]/.test(ch)) {
      return false
    }
  }
  
  return false
}
```

--------------------------------

### Markdown with Language Detection

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/README.md

Example of a Markdown code fence with a language identifier.

```markdown
```javascript
code
```
```

--------------------------------

### C Preset Configuration

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/api-reference.md

Import the C preset for syntax highlighting. This preset includes keywords, type keywords, and comment handling specific to C.

```javascript
import { c } from 'sugar-high/presets'
```

```javascript
import { highlight } from 'sugar-high'
import { c } from 'sugar-high/presets'

const cCode = `
int main() {
    printf("Hello\n");
    return 0;
}
`

const html = highlight(cCode, { ...c })
```

--------------------------------

### Java Comment Syntax

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/preset-keywords.md

Defines the start and end patterns for line and block comments in Java.

```text
//
/*
*/
```

--------------------------------

### Import Core Exports

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/00-START-HERE.md

Import the main package functions and classes, as well as language presets and the Remark plugin.

```javascript
import { highlight, tokenize, generate, SugarHigh } from 'sugar-high'

import { css, rust, python, c, go, java, diff } from 'sugar-high/presets'

import { highlight } from 'remark-sugar-high'
```

--------------------------------

### Basic Syntax Highlighting with Sugar High

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/README.md

Demonstrates the basic usage of the `highlight` function from the `sugar-high` package to highlight a JavaScript code string.

```javascript
import { highlight } from 'sugar-high'

const code = 'const x = 42'
const html = highlight(code)

// Output: HTML string with syntax-highlighted spans
document.querySelector('pre > code').innerHTML = html
```

--------------------------------

### Importing Language Presets in remark-sugar-high

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/remark-plugin.md

Demonstrates how to import all language presets from 'sugar-high/presets' for use within the plugin's tree processing logic.

```javascript
import * as languagePresets from 'sugar-high/presets'

// Later, in the tree processing:
let options = undefined
if (lang in languagePresets) {
  options = languagePresets[lang]
}
const html = tokenize(codeText, options)
```

--------------------------------

### Python Comment Handlers

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/implementation-internals.md

Provides specific callback functions for Python to identify the start and end of line comments ('#').

```javascript
onCommentStart: (curr) => curr === '#' ? 1 : 0
onCommentEnd: (prev, curr) => curr === '\n' ? 1 : 0
```

--------------------------------

### sugar-high (main entry point)

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/README.md

The main entry point for the sugar-high package provides core functionalities for code highlighting and tokenization.

```APIDOC
## highlight

### Description
Highlights the given code string.

### Signature
`(code: string, options?: HighlightOptions) => string`

## tokenize

### Description
Tokenizes the given code string.

### Signature
`(code: string, options?: HighlightOptions) => Array<[number, string]>`

## generate

### Description
Generates highlighted output from tokens.

### Signature
`(tokens: Array<[number, string]>, options?: {lineClassName?}) => Array<any>`

## SugarHigh

### Description
Provides access to token types and token map.

### Type
`{TokenTypes: Array<string>, TokenMap: Map<string, number>}`
```

--------------------------------

### Go Type Keywords

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/preset-keywords.md

Lists the type keywords recognized in Go syntax highlighting. These are checked before regular keywords.

```text
bool
byte
complex64
complex128
error
float32
float64
int
int8
int16
int32
int64
rune
string
uint
uint8
uint16
uint32
uint64
uintptr
```

--------------------------------

### Main Package Functions

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/INDEX.md

Provides core functionality for syntax highlighting. The `highlight` function renders code with HTML, `tokenize` breaks code into token types, and `generate` creates an array of highlighted elements.

```APIDOC
## Main Package Functions

### `highlight(code: string, options?: HighlightOptions): string`

**Description**: Renders the provided code string with syntax highlighting, returning an HTML string.

### `tokenize(code: string, options?: HighlightOptions): Array<[number, string]>`

**Description**: Breaks down the code string into an array of tokens, where each token is a tuple of its type (number) and the corresponding text.

### `generate(tokens: Array<[number, string]>, options?: {lineClassName?}): Array<any>`

**Description**: Generates an array of highlighted elements from a tokenized input, optionally applying a CSS class to each line.
```

--------------------------------

### TypeScript Interface Example

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/jsx-typescript-detection.md

This code snippet demonstrates a TypeScript interface, which contributes to a higher TypeScript detection score.

```typescript
interface User {
  name: string
  age: number
}
```

--------------------------------

### Highlight Code in App

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/00-START-HERE.md

Use the highlight function from the main package to highlight a string of code.

```javascript
import { highlight } from 'sugar-high'
const html = highlight('const x = 42')
```

--------------------------------

### Check for Class-like Identifier or 'null'

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/implementation-internals.md

Returns true if the string is a class-like identifier (starts with an uppercase letter) or equals 'null'.

```javascript
function isCls(str: string): boolean
```

--------------------------------

### Python Preset Configuration

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/api-reference.md

Import the Python preset for syntax highlighting. This preset includes keywords and comment handling specific to Python.

```javascript
import { python } from 'sugar-high/presets'
```

```javascript
import { highlight } from 'sugar-high'
import { python } from 'sugar-high/presets'

const pythonCode = `
def greet(name):
    # This is a comment
    return f'Hello, {name}!'
`

const html = highlight(pythonCode, { ...python })
```

--------------------------------

### HighlightOptions

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/types.md

Configuration object passed to `highlight()`, `tokenize()`, and `generate()` functions to customize syntax highlighting behavior.

```APIDOC
## HighlightOptions

### Description
Configuration object passed to `highlight()`, `tokenize()`, and `generate()` functions to customize syntax highlighting behavior.

### Fields

#### keywords
- **Type**: Set<string>
- **Required**: ✗
- **Description**: Custom set of keywords to highlight. If provided, overrides the default JS/TS keyword set. If not provided, the highlighter performs heuristic detection to choose between JavaScript and TypeScript keywords.

#### typeKeywords
- **Type**: Set<string>
- **Required**: ✗
- **Description**: Additional keywords to classify as type/class tokens (token type 3). Checked before `keywords`. Only applies when highlighting with a preset that includes type keywords (C, Go, Java) or when explicitly provided.

#### onCommentStart
- **Type**: function
- **Required**: ✗
- **Description**: Callback invoked at each character position to detect comment start. Returns 0 (no comment), 1 (single-line comment), or 2 (block comment). Signature: `(currentChar: string, nextChar: string) => 0 \| 1 \| 2`. If not provided, defaults to JavaScript comment detection (`//` and `/* */`).

#### onCommentEnd
- **Type**: function
- **Required**: ✗
- **Description**: Callback invoked to detect comment end. Returns 0 (not end), 1 (end of line comment), or 2 (end of block comment). Signature: `(prevChar: string, currChar: string) => 0 \| 1 \| 2`. If not provided, defaults to JavaScript comment rules.

#### onQuote
- **Type**: function
- **Required**: ✗
- **Description**: Callback invoked at each single quote `'` character (outside strings) to handle language-specific quoted literals. Returns the number of code units to consume from that position (≥ 1), or `null`/`undefined`/value < 1 to use default JS single-quote string rules. Used by Rust preset to handle lifetimes and character literals. Signature: `(currChar: string, i: number, code: string) => number \| null \| undefined`.

#### lineClassName
- **Type**: function
- **Required**: ✗
- **Description**: Callback invoked for each generated output line to assign custom CSS class names. Returns a string (class name) or `null`/`undefined` (no extra class). The class is appended to the base `sh__line` class. Signature: `(line: string, index: number) => string \| null \| undefined`. Used by diff preset to highlight added/removed lines.

### Example
```js
import { highlight } from 'sugar-high'

const options = {
  keywords: new Set(['KEYWORD1', 'KEYWORD2']),
  typeKeywords: new Set(['MyType']),
  onCommentStart: (curr, next) => {
    if (curr === '/' && next === '/') return 1 // line comment
    if (curr === '/' && next === '*') return 2 // block comment
    return 0
  },
  onCommentEnd: (prev, curr) => {
    if (curr === '\n') return 1
    if (prev === '*' && curr === '/') return 2
    return 0
  },
  lineClassName: (line, index) => {
    if (index === 0) return 'first-line'
    if (line.includes('TODO')) return 'has-todo'
    return null
  }
}

const html = highlight('KEYWORD1 x = 42 // comment', options)
```
```

--------------------------------

### Using Language Presets with Sugar High

Source: https://github.com/huozhi/sugar-high/blob/main/README.md

Import a language preset from 'sugar-high/presets' and pass it to the highlight function for languages other than JavaScript and JSX.

```js
import { highlight } from 'sugar-high'
import { rust } from 'sugar-high/presets'

const html = highlight(source, { ...rust })
```

--------------------------------

### Import CSS Preset

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/api-reference.md

Import the CSS language configuration from the sugar-high presets.

```javascript
import { css } from 'sugar-high/presets'
```

--------------------------------

### Custom Language Support in Sugar High

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/README.md

Demonstrates how to define and use a custom language configuration for syntax highlighting.

```javascript
import { highlight } from 'sugar-high'

const customLang = {
  keywords: new Set(['keyword1', 'keyword2']),
  onCommentStart: (curr, next) => {
    if (curr === ';' && next === ';') return 1
    return 0
  },
  onCommentEnd: (prev, curr) => {
    return curr === '\n' ? 1 : 0
  }
}

const html = highlight(code, customLang)
```

--------------------------------

### Import Java Preset

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/api-reference.md

Import the Java preset from Sugar High.

```javascript
import { java } from 'sugar-high/presets'
```

--------------------------------

### TypeScript Function Return Type Annotation

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/jsx-typescript-detection.md

An example of a TypeScript function with an explicit return type annotation, contributing to the TypeScript detection score.

```typescript
const fn = (): string => {
  return 'hello'
}
```

--------------------------------

### JavaScript Comment Handlers

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/implementation-internals.md

Provides specific callback functions for JavaScript to identify the start and end of line comments ('//') and block comments ('/* */').

```javascript
onCommentStart: (curr, next) => {
  if (curr + next === '//') return 1
  if (curr + next === '/*') return 2
  return 0
}

onCommentEnd: (prev, curr) => {
  if (curr === '\n') return 1
  if (prev + curr === '*/') return 2
  return 0
}
```

--------------------------------

### Merging User Options with Defaults

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/implementation-internals.md

Illustrates how user-provided options are merged with the default options, with user options taking precedence.

```javascript
const mergedOptions = { ...DefaultOptions, ...options }
```

--------------------------------

### Template Literal Parsing: Entering Expression

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/implementation-internals.md

Handles the start of a nested expression within a template literal by incrementing the expression stack and appending the '${' sequence.

```javascript
if (c_n === '${') {
  __strTemplateExprStack++
  append(T_STRING)
  append(T_SIGN, c_n)  // The '${'
  i++
}
```

--------------------------------

### Custom Comment Detection

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/configuration.md

Configure custom comment start and end detection logic for specific languages. This is useful for languages with non-standard comment syntax.

```javascript
import { highlight } from 'sugar-high'

const customOptions = {
  keywords: new Set(['if', 'else', 'for', 'while']),
  onCommentStart: (curr, next) => {
    if (curr === '/' && next === '/') return 1  // line comment
    if (curr === '-' && next === '-') return 1  // also treat -- as line comment
    return 0
  },
  onCommentEnd: (prev, curr) => {
    return curr === '\n' ? 1 : 0  // line comments end at newline
  }
}

const code = "
if x {
  -- This is a comment
  y = 10
}
"

const html = highlight(code, customOptions)
```

--------------------------------

### Importing Default Highlight Function from remark-sugar-high

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/remark-plugin.md

Shows the default import method for the highlight function from the 'remark-sugar-high' package.

```javascript
import highlight from 'remark-sugar-high'

// Same as:
// import { highlight } from 'remark-sugar-high'
```

--------------------------------

### Highlight Python Code

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/usage-patterns.md

Use the 'python' preset for highlighting Python code. Import the preset from 'sugar-high/presets'.

```javascript
import { highlight } from 'sugar-high'
import { python } from 'sugar-high/presets'

const pythonCode = `
def factorial(n):
    # Base case
    if n <= 1:
        return 1
    return n * factorial(n - 1)
`

const html = highlight(pythonCode, { ...python })
```

--------------------------------

### JavaScript Object Literal Example

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/jsx-typescript-detection.md

This JavaScript code snippet represents a standard object literal. It contains no TypeScript-specific patterns and would be detected as JavaScript.

```javascript
const user = {
  name: 'Alice',
  age: 30
}
```

--------------------------------

### Go Language Configuration Structure

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/api-reference.md

Defines the structure for Go language configuration, including keywords and type keywords.

```typescript
type LanguageConfig = {
  keywords: Set<string>
  typeKeywords: Set<string>
  onCommentStart?(curr: string, next: string): 0 | 1 | 2
  onCommentEnd?(prev: string, curr: string): 0 | 1 | 2
}
```

--------------------------------

### TypeScript Generic Function with Type Annotations

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/jsx-typescript-detection.md

This example showcases a generic TypeScript function with multiple type annotations, resulting in a significant TypeScript score.

```typescript
function process<T>(data: T[]): T {
  return data[0]
}
```

--------------------------------

### Highlight Diff Output

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/usage-patterns.md

Use the 'diff' preset for highlighting diff output. Custom styling can be added for diff additions, removals, hunks, and metadata.

```javascript
import { highlight } from 'sugar-high'
import { diff } from 'sugar-high/presets'

const diffCode = `
diff --git a/file.js b/file.js
index 1234567..abcdefg
--- a/file.js
+++ b/file.js
@@ -10,3 +10,4 @@
  const x = 1
-  const y = 2
+  const y = 3
+  const z = 4
`

const html = highlight(diffCode, { ...diff })

// Add custom styling for diff
const style = document.createElement('style')
style.textContent = `
  .sh__line--diff-add { background: #d4edda; color: #155724; }
  .sh__line--diff-remove { background: #f8d7da; color: #721c24; }
  .sh__line--diff-hunk { background: #cfe8fc; color: #003d82; }
  .sh__line--diff-meta { color: #6a737d; }
`
document.head.appendChild(style)
```

--------------------------------

### Check if Token Allows Regex

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/implementation-internals.md

Determines if the preceding token allows a '/' to be interpreted as the start of a regex. Considers no prior tokens, operators (excluding after ')'), and comments.

```javascript
const [lastType, lastToken] = last

const canBeRegex = 
  lastType === -1 ||                    // No prior tokens
  lastType === T_SIGN && lastToken !== ')' ||  // Operators (but not after `)`)
  lastType === T_COMMENT                // After comment
```

--------------------------------

### sugar-high/presets

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/README.md

Provides language-specific configurations for various programming languages.

```APIDOC
## css

### Description
Language configuration for CSS.

## rust

### Description
Language configuration for Rust.

## python

### Description
Language configuration for Python.

## c

### Description
Language configuration for C.

## go

### Description
Language configuration for Go.

## java

### Description
Language configuration for Java.

## diff

### Description
Language configuration for diff/patch format.
```

--------------------------------

### Check for Valid Identifier

Source: https://github.com/huozhi/sugar-high/blob/main/_autodocs/implementation-internals.md

Returns true if the string is a valid identifier. Identifiers must start with a letter, underscore, or dollar sign, followed by word characters.

```javascript
function isIdentifier(str: string): boolean
```

--------------------------------

### Basic Usage of Sugar High

Source: https://github.com/huozhi/sugar-high/blob/main/README.md

Import the highlight function and use it to highlight code. The output HTML can then be inserted into a DOM element.

```js
import { highlight } from 'sugar-high'

const codeHTML = highlight(code)

document.querySelector('pre > code').innerHTML = codeHTML
```