Sugar-High Highlighter

Sugar-High is a lightweight JSX syntax highlighter built by Jiachi Liu. You can use it to render simple syntax highlighted code blocks with minimal bundle size and configuration.

export default function Page() {
  return <h1>Hello</h1>
}

Installation

shadcn/ui

shadcn/ui Command

pnpm dlx shadcn@latest add https://code-blocks.pheralb.dev/r/sugar-high-highlighter.json

Manual

Install the following dependencies:

Sugar High Dependencies

pnpm i sugar-high -D

Create a your sugar-high utility file:

.ts

import { highlight as highlighter } from "sugar-high";

interface Highlighter {
  code: string;
}

const highlight = ({ code }: Highlighter) => {
  const result = highlighter(code);
  return result;
};

export { highlight };

Styles

This CSS file includes light/dark mode styles. You can customize it as needed:

.css

/* Tailwind CSS */
@import "./globals.css";

/* Sugar High - Light Mode */
:root {
  --sh-class: theme("colors.blue.600");
  --sh-identifier: theme("colors.gray.500");
  --sh-sign: theme("colors.gray.500");
  --sh-property: theme("colors.blue.700");
  --sh-entity: theme("colors.teal.600");
  --sh-jsxliterals: theme("colors.gray.600");
  --sh-string: theme("colors.teal.600");
  --sh-keyword: theme("colors.red.500");
  --sh-comment: theme("colors.gray.400");
}

/* Sugar High - Dark Mode */
.dark {
  --sh-class: theme("colors.blue.400");
  --sh-identifier: theme("colors.gray.400");
  --sh-sign: theme("colors.gray.400");
  --sh-property: theme("colors.blue.400");
  --sh-entity: theme("colors.teal.400");
  --sh-jsxliterals: theme("colors.gray.400");
  --sh-string: theme("colors.teal.400");
  --sh-keyword: theme("colors.red.400");
  --sh-comment: theme("colors.gray.500");
}

/* Font for <code> element */
code {
  @apply font-mono;
}

/* Line Numbers */
pre.sh-line-numbers code {
  counter-reset: sh-line-number;
}

pre.sh-line-numbers .sh__line::before {
  counter-increment: sh-line-number 1;
  content: counter(sh-line-number);
  width: 0.5rem;
  margin-right: 1.3rem;
  margin-left: 0.2rem;
  display: inline-block;
  @apply text-right font-mono text-xs text-neutral-500;
}

Customize the color theme with CSS variables: Docs.

Usage

You can use the highlight function to get syntax highlighted code. For example:

Sugar High Highlighter Usage

import { highlight } from "@/utils/sugar-high";

const code = `console.log('hello')`;
const highlighter = await highlight({
  code,
});

Markdown/MDX Integration

Install the remark-sugar-high package:

Remark Sugar High Dependency

pnpm i remark-sugar-high -D

Add the remark-sugar-high plugin to your MDX compilation process. For example:

.ts

import { remarkSugarHigh } from "remark-sugar-high";

const mdx = await compileMDX(context, document, {
  remarkPlugins: [remarkSugarHigh],
});