sugar-high 0.2.2 → 0.3.0

package/README.md

@@ -58,6 +58,21 @@ Then make your own theme with customized colors by token type and put in global
 }
 ```
 
+### 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
+.sh__line::before {
+  content: attr(data-line-number);
+  margin-right: 24px;
+  text-align: right;
+  color: #a4a4a4;
+}
+```
+
 ### LICENSE
 
 MIT

package/lib/index.mjs

@@ -123,8 +123,6 @@ function encode(str) {
     .replace(/>/g, '>')
     .replace(/"/g, '"')
     .replace(/'/g, ''')
-    // matches space but not new line
-    .replace(/[^\S\r\n]/g, ' ')
 }
 
 function isWord(chr) {
@@ -349,16 +347,47 @@ export function tokenize(code) {
  * @return {Array<string>}
  */
 function generate(tokens) {
-  const output = []
+  let lineNo = 1
+  const linesHtml = []
+  const createLine = (content) => `<span data-line-number="${lineNo++}" class="sh__line">${content}</span>`
+
+  function flushLine(tokens) {
+    linesHtml.push(createLine(
+      tokens.map(token => (
+        `<span class="sh__${types[token[0]]}">${encode(token[1])}</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 +397,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.3.0",
   "type": "module",
   "exports": "./lib/index.mjs",
   "description": "Super lightweight JSX syntax highlighter",