sugar-high 0.8.1 → 0.8.3

package/README.md

@@ -96,6 +96,12 @@ You can use `.sh__token--<token type>` to customize the output node of each toke
 }
 ```
 
+### Use With Remark.js
+
+[Remark.js](https://remark.js.org/) is a powerful markdown processor, you can use the [sugar-high remark plugin](https://remark-sugar-high.vercel.app/) with remark.js to highlight code blocks in markdown.
+
+Check out the [documentation](https://remark-sugar-high.vercel.app/) for more details.
+
 ### LICENSE
 
 MIT

package/lib/index.js

@@ -180,13 +180,18 @@ function isStringQuotation(chr) {
   return isSingleQuotes(chr) || isStrTemplateChr(chr)
 }
 
+/** @returns {0|1|2}  */
 function isCommentStart_Js(curr, next) {
   const str = curr + next
-  return str === '//' || str === '/*'
+  if (str === '/*') return 2
+  return str === '//' ? 1 : 0
 }
 
+/** @returns {0|1|2}  */
 function isCommentEnd_Js(prev, curr) {
-  return curr === '\n' || (prev + curr) === '*/'
+  return (prev + curr) === '*/'
+    ? 2
+    : curr === '\n' ? 1 : 0
 }
 
 function isRegexStart(str) {
@@ -470,6 +475,9 @@ function tokenize(code, options) {
           if (isIdentifier(prop)) {
             current = prop
             append(T_PROPERTY)
+          } else if (prop === ' ') {
+            current = prop
+            append(T_SPACE)
           }
           continue
         }
@@ -555,13 +563,16 @@ function tokenize(code, options) {
     } else if (onCommentStart(curr, next)) {
       append()
       const start = i
-      const commentType = onCommentStart(curr, next)
+      const startCommentType = onCommentStart(curr, next)
 
       // just match the comment, commentType === true
       // inline comment, commentType === 1
       // block comment, commentType === 2
-      if (commentType) {
-        for (; i < code.length && !onCommentEnd(code[i - 1], code[i]); i++);
+      if (startCommentType) {
+        for (; i < code.length; i++) {
+          const endCommentType = onCommentEnd(code[i - 1], code[i])
+          if (endCommentType == startCommentType) break
+        }
       }
       current = code.slice(start, i + 1)
       append(T_COMMENT)
@@ -622,7 +633,7 @@ function tokenize(code, options) {
 
 /**
  * @param {Array<[number, string]>} tokens
- * @return {Array<any>}
+ * @return {Array<{type: string, tagName: string, children: any[], properties: Record<string, string>}>}
  */
 function generate(tokens) {
   const lines = []
@@ -653,12 +664,12 @@ function generate(tokens) {
             type: 'element',
             tagName: 'span',
             children: [{
-              type: 'text',
+              type, // token type
               value: value, // to encode
             }],
             properties: {
               className: `sh__token--${TokenTypes[type]}`,
-              style: `color: var(--sh-${TokenTypes[type]})`,
+              style: { color: `var(--sh-${TokenTypes[type]})` },
             },
           }
         ))
@@ -697,6 +708,19 @@ function generate(tokens) {
   return lines
 }
 
+/** @param { className: string, style?: Record<string, string> } */
+const propsToString = (props) => {
+  let str = `class="${props.className}"`
+
+  if (props.style) {
+    const style = Object.entries(props.style)
+      .map(([key, value]) => `${key}:${value}`)
+      .join(';')
+    str += ` style="${style}"`
+  }
+  return str
+}
+
 function toHtml(lines) {
   return lines
     .map(line => {
@@ -704,11 +728,7 @@ function toHtml(lines) {
       const tokens = line.children
         .map(child => {
           const { tagName, children, properties } = child
-          return `<${tagName} class="${
-            properties.className
-          }" style="${
-            properties.style
-          }">${encode(children[0].value)}</${tagName}>`
+          return `<${tagName} ${propsToString(properties)}>${encode(children[0].value)}</${tagName}>`
         })
         .join('')
       return `<${lineTag} class="${line.properties.className}">${tokens}</${lineTag}>`

package/package.json

@@ -1,29 +1,29 @@
 {
   "name": "sugar-high",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "type": "module",
   "types": "./lib/index.d.ts",
-  "exports": {
-    "types": "./lib/index.d.ts",
-    "default": "./lib/index.js"
-  },
+  "main": "./lib/index.js",
   "description": "Super lightweight JSX syntax highlighter",
   "files": [
     "lib"
   ],
   "license": "MIT",
   "scripts": {
-    "test": "vitest run",
+    "test": "vitest",
     "dev": "next dev docs",
     "build": "next build docs"
   },
   "devDependencies": {
-    "codice": "^0.2.0",
-    "next": "15.1.3",
+    "@types/node": "22.10.7",
+    "@types/react": "19.0.7",
+    "codice": "^0.5.0",
+    "next": "15.1.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "sugar-high": "link:./",
-    "vitest": "^2.1.3"
+    "typescript": "5.7.3",
+    "vitest": "^3.0.2"
   },
   "packageManager": "pnpm@8.7.1"
 }