Sugar High

You can highlight specific lines in a code block by adding curly braces with line numbers after the language identifier in your markdown. For example, ```javascript {2,5} will apply highlighting to lines 2 and 5.

// Here is a simple function
async function hello() {
    console.log('Hello, world from JavaScript!')
    return 123 // return a number
}

await hello()

Install the remark-sugar-high plugin via npm to use the Sugar High syntax highlighter within your remark processing pipeline.

$ npm i -S remark-sugar-high

Install the sugar-high package using npm to use the lightweight syntax highlighter in your project.

npm install sugar-high

To implement a gutter with line numbers, use a CSS ::before counter on the .sh__line class.

pre code {
  counter-reset: sh-line-number;
}

.sh__line::before {
  counter-increment: sh-line-number 1;
  content: counter(sh-line-number);
  margin-right: 24px;
  text-align: right;
  color: #a4a4a4;
}

You can highlight specific lines using two methods:

1. CSS nth-child: Target a line using .sh__line:nth-child(<n>) (where <n> is 1-based).
2. Manual class: Apply the .sh__line--highlighted class to a line if you are managing highlight classes yourself.

/* Target the 5th line */
.sh__line:nth-child(5) {
  background: #fff8c5;
}

/* Target via custom class */
.sh__line--highlighted {
  background: #fff8c5;
}

The diff language preset provides syntax highlighting and line-level CSS classes for diff files. It identifies specific line types based on standard diff markers (like +, -, @@, and metadata headers) and assigns corresponding CSS classes. This allows you to style added lines, removed lines, hunk headers, and metadata differently in your documentation.

/* 
Note: This is a configuration preset used internally by sugar-high. 
When using sugar-high to process code blocks marked as 'diff', 
it will apply the following CSS classes to lines:

- Added lines (+): `sh__line--diff-add`
- Removed lines (-): `sh__line--diff-remove`
- Hunk headers (@@): `sh__line--diff-hunk`
- Metadata (diff --git, index, ---, +++): `sh__line--diff-meta`
*/

Sugar High uses CSS custom properties for theming. You can set these variables on an ancestor element (like :root) to control the colors of different syntax tokens. Each line is wrapped in a sh__line class.

Available CSS variables:

• --sh-class
• --sh-identifier
• --sh-sign
• --sh-property
• --sh-entity
• --sh-jsxliterals
• --sh-string
• --sh-keyword
• --sh-comment

:root {
  --sh-class: #2d5e9d;
  --sh-identifier: #354150;
  --sh-sign: #8996a3;
  --sh-property: #0550ae;
  --sh-entity: #249a97;
  --sh-jsxliterals: #6266d1;
  --sh-string: #00a99a;
  --sh-keyword: #f47067;
  --sh-comment: #a19595;
}

You can highlight specific lines in a code block by providing a range specification in the code block's meta field using the format {line1,line2-lineN}.

When a line is highlighted, the plugin adds the CSS class sh__line--highlighted to the line container.

Supported formats for the meta field:

• Single lines: {1,3,5}
• Ranges: {1,3-5}
• Combined: {1,3-5,7}

```javascript {1,3-5}
const x = 10; // Line 1 (highlighted)
const y = 20;
const z = 30; // Line 3 (highlighted)
const a = 40; // Line 4 (highlighted)
const b = 50; // Line 5 (highlighted)

To use the plugin, import the highlight function and add it to your remark processor using .use(highlight). This will transform markdown code blocks into highlighted HTML structures compatible with Sugar High's CSS.

const { highlight } = require('remark-sugar-high');

await remark()
  .use(highlight)
  .use(require('remark-html'))
  .process(file, (err, file) => console.log(String(file)));

Import highlight from sugar-high to convert raw code strings into HTML strings. The output can be injected into any element that accepts HTML (like innerHTML). By default, it targets JavaScript and JSX.

import { highlight } from 'sugar-high'

const codeHTML = highlight(code)

document.querySelector('pre > code').innerHTML = codeHTML