huozhi/sugar-high

✏️ Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped

sugar-high's Issues

nested jsx literals isn't classified correctly

with should be jsx literals instead of keyword

Consider regex flags as part of regex itself

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#advanced_searching_with_flags

const r = /hello/ig

JSX tag type should be matched

Observed

The type of Link tags aren't matched

Expected

both Link tag should be either identifer or class type

JSX will parse child to T_STRING when there is no '\n' before '<'

import './style.css';
import { highlight } from 'sugar-high';

const app = document.querySelector('#app');
const code = highlight(`
<Component>
  hello world
</Component>

<Component>hello world</Component>
`.trim());

app.innerHTML = `<pre><code>${code}</code></pre>`;

This first hello world will render to T_JSX_LITERALS, but second will render to T_STRING.

Here is a demo

Discussion: unicode variable/function names

It's always tricky to get syntax highlighting done correctly (i.e. following the spec) while keeping the lib small. It should be noted somewhere in the README on what will be supported and what will not.

I just ran into a case where the unicode in a variable name being wrongly colored, which is allowed in JavaScript:

I saw that we are using something like \w to simply detect if it's a "word", but then, doing it correctly means extra 11kb of code. I'm not sure if newer regex features can make it shorter or not, but that results in a compatibility issue.

string literals in jsx didn't get matched correctly

Multiple jsx vars definition is broken

Better support for sign tokens in JSX

Input

<OverlayTrigger placement='top' triggers={['hover', 'focus']} overlay={overlay}>
  <Button className='Trigger'>....</Button>
</OverlayTrigger>

Expected Output

<, OverlayTrigger, placement, =, ', top, ', ...

Numbers in HTML attributes are wrongly identified

For example, the 24 should be a string type instead of an identifier:

<svg fill="none" height="24"/>

Refactor testing utils

Adding testing utils to parse the code into an array, each item is the token itself and the token type. Then compare all token and token types as a pair to the expected value

Unable to resolve sugar-high module after installing with pnpm

I recently switched my project from npm to pnpm. After the switch, I (re)installed sugar-high using the pnpm add sugar-high command. The library was successfully added to the node_modules folder. However, when I tried to import and use the highlight function from sugar-high, the module could not be resolved.

As a temporary workaround, I've removed syntax highlighting from my project. However, having syntax highlighting working would be ideal.

Steps to Reproduce:

1. Switch the project from npm to pnpm (the node_module folder first get deleted then pnpm i
2. Install sugar-high using pnpm add sugar-high.
3. Try to import the highlight function from sugar-high.

Expected Behavior:

The sugar-high module should be resolved and the highlight function should be imported successfully.

Actual Behavior:

The sugar-high module could not be resolved, resulting in a build failure.

Error Message:
Type error: Cannot find module 'sugar-high' or its corresponding type declarations.

3 | import { MDXRemote } from 'next-mdx-remote/rsc';
 4 | import { TweetComponent } from './tweet';
> 5 | import { highlight } from "sugar-high";
   |                           ^
 6 | import React from 'react';
 7 |
 8 | function Table({ data }) {
 ELIFECYCLE  Command failed with exit code 1.

Environment:

• Package Manager: pnpm
• Node.js version: v21.2.0
• Operating System: MacOS

Additional Context:

Is there a specific way to resolve this issue with pnpm? Any help would be greatly appreciated.

Thank you!

Support switching cards in mobile

When showing in mobile device, provide an interaction to switch cards easily. For instance, clicking the left or right side of current code card to switch to the next one

There is not a right style in doc website?

I set the height: max-content for code tag could resolve it. But I'm not sure that's the best solution for solving the problem in codice.

Detect divid operator instead of treating it as comment start

Input Case

const y = 1 / 2

// ...rest of code

incorrect jsx literals

feature request: line(s) highlighting and adding file name for code block

Hello, thank you for making such a lightweight syntax highlighter for JSX.

I'd like to propose a feature request where we can highlight specific lines in the block of code and also give the code block a name (file name).

For example, people who use "shiki" can do this very easily by specifying like this:

```jsx {5} title="hello.js"
// code goes here

This will highlight the 5th line in the code block and will also give the code block the title "hello.js" which will appear either below or above the block (which can be customizable).

Thank you :D

Support nested string quotes

Those cases should be parsed as full strings

'abc"456"dba'
"hhh'mmm'hhh"

Support string template with variables

Currently only pure string template is supported, variables also need to be supported as well

`hello ${ expression }`

Auto sync editing content to local storage

The website needs a feature that sync the edited content to local storage then get it back from the storage when you load the website next time

left para is not rendered correctly in jsx

code

function Code() {
  return <a f={{ __html: codeHTML }} {...props} />
}

// This replaces rehype-slug
function fun(str) {
  return 0
}

unexpected preview

Support line detection

• Output as lines, wrap the content in each line
• Maybe line numbers?

Could not find a declaration file for module 'sugar-high'

Im trying to import sugar-high like this

import { highlight } from 'sugar-high';

But I get the following error

Could not find a declaration file for module 
 . /Users/PlaceholderPath/node_modules/.pnpm/[email protected]/node_modules/sugar-high/lib/index.mjs implicitly has an 
 type.

There are types at /Users/PlaceholderPath/node_modules/sugar-high/index.d.ts', but this result could not be resolved when respecting package.json "exports". The sugar-high' library may need to update its package.json or typings.

Even though I can use @ts-expect-error to fix this I think this is not the best way to go. Is there something wrong with my setup or is it a bug here?

Thanks for the great work :D

Give jsx literals content different type

Now jsx literals are highlight randomly by what we give it. Should keep them as another type like T_JSX_LITERALS probably?
And then highlight it with same color of T_IDENTIFER. But don't detect if there's T_CLASS

adjecent jsx literals are parsed as code tokens

<div className="space-y-8">
  <div className="space-y-2">
    <h2 className="text-3xl font-bold">Contact Us</h2>
  </div>
  <button className="bg-gray-800 text-white" type="submit">Send message</button>
</div>

Send message should be jsx literals

Failing case

The following code fails to highlight in Sugar High:

export default function Component() {
  return (<section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
  <div className="container px-4 md:px-6">
    <div className="flex flex-col items-center space-y-4 text-center">
      <div className="space-y-2">
        <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
          Welcome to our platform
        </h1>
        <p className="max-w-[700px] text-zinc-500 md:text-xl dark:text-zinc-400">
          We provide the best services for your needs. Let's get started!
        </p>
      </div>
      <div className="space-x-4">
        <Link
          href="/signup"
          className="inline-flex h-9 items-center justify-center rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-zinc-50 shadow transition-colors hover:bg-zinc-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90 dark:focus-visible:ring-zinc-300"
        >
          Sign Up
        </Link>
        <Link
          href="/login"
          className="inline-flex h-9 items-center justify-center rounded-md border border-zinc-200 border-zinc-200 bg-white px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-zinc-100 hover:text-zinc-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:border-zinc-800 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:focus-visible:ring-zinc-300"
        >
          Log In
        </Link>
      </div>
    </div>
  </div>
</section>)
}

Line highlight example

you can use CSS .sh__line:nth-child() to get the line and select the certain line of the code for now, and customize with your own style. It's not very clear on the document and website examples

Inconsistent jsx literals

Bug Screenshot

Expected

Those 2 items above should both render jsx children as literals

Consider a standalone type/color for jsx literals

hello has different color comparing to 'text'

<div>
  hello {Date.now()}
  {'text'}
</div>

[feature] support new sugar high syntax type

Code example

import { useFloating } from "@floating-ui/react";

function MyComponent() {
  const { refs, floatingStyles } = useFloating();

  return (
    <>
      <div data-val={foo.dataset.div} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

Current vs Expected behavior

div so far is still identifier, could become a new type jsx-tag
ref so far is still identifier, could become a new type jsx-prop

Notes

github treats ; differently as a different sign unlike others, e.g.

console.log(1 + a - 3 * 4 / 5 & (2 ^ 3));