sugar-high 0.2.2 → 0.4.0

package/README.md

@@ -3,7 +3,7 @@
 
 Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped
 
-![img](https://repository-images.githubusercontent.com/453236442/82cf2807-78f0-4009-bbdf-d7e753f73cf4)
+![img](https://repository-images.githubusercontent.com/453236442/94994be5-72fa-479f-8b87-2dc14fe40329)
 
 ### Usage
 
@@ -35,26 +35,34 @@ Then make your own theme with customized colors by token type and put in global
  * comment
  * jsxliterals
  */
-.sh__class {
-  color: #2d5e9d;
+:root {
+  --sh-class: #2d5e9d;
+  --sh-identifier: #354150;
+  --sh-sign: #8996a3;
+  --sh-string: #00a99a;
+  --sh-keyword: #f47067;
+  --sh-comment: #a19595;
+  --sh-jsxliterals: #6266d1;
 }
-.sh__identifier {
-  color: #2d333b;
-}
-.sh__sign {
-  color: #8996a3;
-}
-.sh__string {
-  color: #00a99a;
-}
-.sh__keyword {
-  color: #f47067;
-}
-.sh__comment {
-  color: #a19595;
+```
+
+### Features
+
+#### Line number
+
+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.
+
+```css
+pre code {
+  counter-reset: sh-line-number;
 }
-.sh__jsxliterals {
-  color: #03066e;
+
+.sh__line::before {
+  counter-increment: sh-line-number 1;
+  content: counter(sh-line-number);
+  margin-right: 24px;
+  text-align: right;
+  color: #a4a4a4;
 }
 ```
 

package/lib/index.mjs

@@ -123,14 +123,19 @@ function encode(str) {
     .replace(/>/g, '>')
     .replace(/"/g, '"')
     .replace(/'/g, ''')
-    // matches space but not new line
-    .replace(/[^\S\r\n]/g, ' ')
 }
 
 function isWord(chr) {
   return /^[\w_]+$/.test(chr)
 }
 
+function isCls(str) {
+  const chr0 = str[0]
+  return isWord(chr0) &&
+    chr0 === chr0.toUpperCase() ||
+    str === 'null'
+}
+
 function isIdentifierChar(chr) {
   return /^[a-zA-Z_$]$/.test(chr)
 }
@@ -163,16 +168,22 @@ export function tokenize(code) {
   /** @type {Array<[number, string]>} */
   const tokens = []
 
-  // jsx.tag for entering open or closed tag
+  // jsx.tag for entering open or closed tags
+  // jsx.close for is the closing sign of open or close tags
   // jsx.child for entering children
   // jsx.expr for entering {expression}
-  /** @type {{ tag: boolean; child: boolean; expr: boolean }} */
-  const jsx = { tag: false, child: false, expr: false }
+  /** @type {{ tag: boolean; close: boolean; child: boolean; expr: boolean }} */
+  const jsx = { tag: false, close: false, child: false, expr: false }
 
-  const inJsxLiterals = () => !jsx.tag && jsx.child && !jsx.expr
+  const inJsxTag = () => jsx.tag || jsx.close
+  const inJsxLiterals = () => !inJsxTag() && jsx.child && !jsx.expr
 
+  /**
+   *
+   * @param {string} token
+   * @returns {number}
+   */
   function classify(token) {
-    const chr0 = token[0]
     if (keywords.has(token)) {
       return T_KEYWORD
     } else if (token === '\n') {
@@ -181,17 +192,12 @@ export function tokenize(code) {
       return T_SPACE
     } else if (token.split('').every(ch => signs.has(ch))) {
       return T_SIGN
-    } else if (
-      !inJsxLiterals() &&
-      (
-        isWord(chr0) &&
-        chr0 === chr0.toUpperCase() ||
-        token === 'null'
-      )
-    ) {
-      return T_CLS_NUMBER
+    } else if (isCls(token)) {
+      return inJsxLiterals() ? T_JSX_LITERALS : inJsxTag() ? T_IDENTIFIER : T_CLS_NUMBER
     } else {
-      return isIdentifier(token) ? T_IDENTIFIER : inJsxLiterals() ? T_JSX_LITERALS : T_STRING
+      return inJsxLiterals()
+        ? T_JSX_LITERALS
+        : isIdentifier(token) ? T_IDENTIFIER : T_STRING
     }
   }
 
@@ -211,15 +217,19 @@ export function tokenize(code) {
     const curr = code[i]
     const prev = code[i - 1]
     const next = code[i + 1]
-    const c_n = curr + next // current and next
     const p_c = prev + curr // previous and current
+    const c_n = curr + next // current and next
     const isJsxLiterals = inJsxLiterals()
 
+    if (jsx.close && (last[1] === '>' || last[1] === '/>')) {
+      jsx.close = false
+    }
     if (jsx.tag) {
       const isOpenElementEnd = curr === '>'
       const isCloseElementEnd = p_c === '/>'
-      jsx.child = !isCloseElementEnd && !isCloseElementEnd
+      jsx.child = !isCloseElementEnd
       jsx.tag = !(isOpenElementEnd || isCloseElementEnd)
+      jsx.close = isOpenElementEnd || isCloseElementEnd
     }
     // if it's not in a jsx tag declaration or a string, close child if next is jsx close tag
     if (!jsx.tag && (curr === '<' && isIdentifierChar(next) || c_n === '</')) {
@@ -319,6 +329,9 @@ export function tokenize(code) {
         !signs.has(curr)
       ) {
         current += curr
+        if (next === '<') {
+          append();
+        }
       } else {
         append()
         current = curr
@@ -349,16 +362,46 @@ export function tokenize(code) {
  * @return {Array<string>}
  */
 function generate(tokens) {
-  const output = []
+  const linesHtml = []
+  const createLine = (content) => `<span class="sh__line">${content}</span>`
+
+  function flushLine(tokens) {
+    linesHtml.push(createLine(
+      tokens.map(([type, value]) => (
+        `<span style="color: var(--sh-${types[type]})">${encode(value)}</span>`
+      ))
+      .join('')
+    ))
+  }
+  const lineTokens = []
   for (let i = 0; i < tokens.length; i++) {
-    const [type, token] = tokens[i]
-    output.push(
-      type === T_BREAK
-      ? '<br>'
-      : `<span class="sh__${types[type]}">${encode(token)}</span>`
-    )
+    const token = tokens[i]
+    const [type, value] = token
+    if (type !== T_BREAK) {
+      // Divide multi-line token into multi-line code
+      if (value.includes('\n')) {
+        const lines = value.split('\n')
+        for (let j = 0; j < lines.length; j++) {
+          lineTokens.push([type, lines[j]])
+          if (j < lines.length - 1) {
+            flushLine(lineTokens)
+            lineTokens.length = 0
+          }
+        }
+      } else {
+        lineTokens.push(token)
+      }
+    } else {
+      lineTokens.push([type, ''])
+      flushLine(lineTokens)
+      lineTokens.length = 0
+    }
   }
-  return output
+
+  if (lineTokens.length)
+    flushLine(lineTokens)
+
+  return linesHtml
 }
 
 /**
@@ -368,6 +411,6 @@ function generate(tokens) {
  */
 export function highlight(code) {
   const tokens = tokenize(code)
-  const output = generate(tokens).join('')
+  const output = generate(tokens).join('\n')
   return output
 }

package/package.json

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