https://github.com/huozhi/remark-sugar-high

Syntax highlighter for markdown code blocks using Sugar High
https://github.com/huozhi/remark-sugar-high

highlight markdown markdown-codeblock remark

Last synced: 2 days ago
JSON representation

Syntax highlighter for markdown code blocks using Sugar High

• Host: GitHub
• URL: https://github.com/huozhi/remark-sugar-high
• Owner: huozhi
• Created: 2024-10-25T16:45:05.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-03T20:16:59.000Z (about 2 months ago)
• Last Synced: 2024-12-10T14:48:55.226Z (14 days ago)
• Topics: highlight, markdown, markdown-codeblock, remark
• Language: TypeScript
• Homepage: https://github.com/huozhi/remark-sugar-high
• Size: 25.4 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# remark-sugar-high

Syntax highlighter for markdown code blocks using [Sugar High](https://sugar-high.vercel.app). This allows syntax highlighting without running any client-side code - other than CSS.

## Installation

```bash

$ npm i -S remark-sugar-high

```

## Usage

Input markdown file:

```

\`\`\`javascript

console.log('Hello World');

\`\`\`

```

Using [remark](https://github.com/remarkjs/remark):

```js

await remark()

  .use(require('remark-sugar-high'))

  .use(require('remark-html'))

  .process(file, (err, file) => console.log(String(file)));

```

Output

```html


  

    

      

        console

      

      

        .

      

      

        log

      

      

        (

      

      

        '

      

      

        Hello World

      

      

        '

      

      

        )

      

      

        ;

      

      

    

  

;

```


Customize the color theme with sugar-high CSS variables, e.g.:

```css

:root {

  --sh-identifier: #354150;

  --sh-keyword: #f47067;

  --sh-string: #00a99a;

  --sh-class: #8d85ff;

  --sh-property: #4e8fdf;

  --sh-entity: #6eafad;

  --sh-jsxliterals: #bf7db6;

  --sh-sign: #8996a3;

  --sh-comment: #a19595;

}

```

Check [sugar-high highlight-with-css section](https://github.com/huozhi/sugar-high#highlight-with-css) for more details.

## License

MIT