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

const r = /hello/ig

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

`hello ${ expression }`

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

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

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

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!

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

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

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

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

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.

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

<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

Input

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

Expected Output

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

Hi.
I've noticed an issue where sugar-high would cut off a character from source.

Given a string like this:

<div className="data-[layout=grid]:grid" />

highlight outputs this (note the char before = missing):

<div className="data-[layou=grid]:grid" /> 

Repro

sandbox

Observed

The type of Link tags aren't matched

Expected

both Link tag should be either identifer or class type

Bug Screenshot

Expected

Those 2 items above should both render jsx children as literals

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));

Input Case

const y = 1 / 2

// ...rest of code

code

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

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

unexpected preview

with should be jsx literals instead of keyword

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

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

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.

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>)
}

hello has different color comparing to 'text'

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

Those cases should be parsed as full strings

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

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