Skip to main content

​
Quickstart

This guide will help you create your first syntax-highlighted code block with Code Syntactic Sugar in under 5 minutes.

​
Prerequisites

Make sure you have:
1

Import the highlight function

Import the highlight function from code-syntactic-sugar in your React component:
import { highlight } from 'code-syntactic-sugar';
2

Create a code block component

Create a simple component that highlights code:
import { highlight } from 'code-syntactic-sugar';
import { createRoot } from 'react-dom/client';

function CodeBlock() {
  const code = `
  const a = 10;
  const b = 20;
  console.log(a + b);
  `.trim();

  const codeLines = highlight(code);

  return <code>{codeLines}</code>;
}

const root = createRoot(document.querySelector('#app > pre'));
root.render(<CodeBlock />);
The highlight function takes your code string and returns React elements ready to render.
3

Add CSS for styling

Create a CSS file and import it in your application. Add the following CSS variables to customize the syntax highlighting colors:
:root {
  --css-class: #2d5e9d;
  --css-identifier: #354150;
  --css-sign: #8996a3;
  --css-property: #0550ae;
  --css-entity: #249a97;
  --css-jsxliterals: #6266d1;
  --css-string: #00a99a;
  --css-keyword: #f47067;
  --css-comment: #a19595;
}
All class names use the --css- prefix. You can customize these CSS variables to match your theme.
4

Run your application

Start your development server and you should see beautifully highlighted code!Your code is now rendered as React elements with syntax highlighting applied.

​
Add line modifiers

One of the powerful features of Code Syntactic Sugar is the ability to highlight, add, or remove specific lines. Here’s how: 
import { highlight } from 'code-syntactic-sugar';
import { createRoot } from 'react-dom/client';

function CodeBlock() {
  const code = `
    let a = 1;
    let b = 10;
    const result = a + b;
    console.log(a);
    console.log(b);
    console.log(result);
  `.trim();

  const codeLines = highlight(code, {
    modifiers: {
      highlightedLines: [1, 2],
      addedLines: [4, 5],
      removedLines: [3],
    },
  });

  return <code>{codeLines}</code>;
}

const root = createRoot(document.querySelector('#app > pre'));
root.render(<CodeBlock />);
Add CSS to style the modified lines: 
.css_line[data-highlighted-line] {
  background-color: #fefefe;
}

.css_line[data-added-line] {
  background-color: #00ff00;
}

.css_line[data-removed-line] {
  background-color: #ff0000;
}
Line numbers start at 1. If multiple modifiers are applied to the same line, the precedence order is: highlighted → added → removed.

​
Add line numbers

To display line numbers next to your code, add this CSS: 
pre code {
  counter-reset: css-line-number;
}

.css_line::before {
  counter-increment: css-line-number;
  content: counter(css-line-number);
  margin-right: 24px;
  text-align: right;
  color: #a4a4a4;
}
Line numbers will automatically appear for each line of code using CSS counters.

​
Next steps

Now that you have basic syntax highlighting working, you can:
  • Customize token colors using CSS class names like .css__token--keyword
  • Experiment with different line modifier combinations
  • Create custom themes by adjusting CSS variables
  • Explore advanced styling options

Advanced customization

Learn more about customizing colors, themes, and advanced features in the full documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us