A beautiful Syntax Highlighter.

code

import * as shiki from 'shiki';

const html = ref('');
shiki
  .getHighlighter({
    theme: props.theme,
  })
  .then((highlighter) => {
    html.value = highlighter.codeToHtml(props.content, props.lang);
  })
  .catch(console.warn);

result

[Shiki] no CDN provider found, use `setCDN()` to specify the CDN for loading the resources before calling `getHighlighter()`

Hi @octref ! 👋

I have been considering different highlighting options (also Prism.js with react-syntax-highlighter), and stumbled upon your project through Orta (who used it for the shiki-twoslash package for the TypeScript website)

One thing that I was looking for when going through this repo and also the docs website was an interactive demo.

I've set one up on CodeSandbox (with Next.js). It is currently a frozen sandbox (so that I remember to not accidentally make changes to it), but of course happy to have you fork it so that you control the sandbox.

What are your thoughts?

Hi, not really an issue, just wondering if it's actually possible to use Shiki in browser instead of node? I have tried to bundle it with webpack and https://github.com/Jam3/babel-plugin-static-fs plugin, but still getting errors related to fs module calls for Onigasm and etc.

In this PR, I'm implementing support for adding custom CSS classes to specific lines. This is picking up the work that @dceddia started in #83.

API

The codeToHtml now accepts an optional options object with an optional highlightedLines property:

function codeToHtml(
  code: string,
  lang?: StringLiteralUnion<Lang>,
  theme?: StringLiteralUnion<Theme>,
  options?: HtmlOptions
): string {
  // ...
}

export interface HtmlOptions {
  highlightedLines?: HighlightedLines
}

Highlighted lines can be specified one by one, or as a range of lines:

type LineNumber = number
type LineNumberRange = [fromLine: number, toLine: number]

export type HighlightedLines = (LineNumber | LineNumberRange)[]

Example

Here's an example usage that would highlight lines 1, 3, 4, 5, 6, and 8:

const code = `
console.log('line 1');
console.log('line 2');
console.log('line 3');
console.log('line 4');
console.log('line 5');
console.log('line 6');
console.log('line 7');
console.log('line 8');
console.log('line 9');
`.trim()

const html = highlighter.codeToHtml(code, 'js', 'css-variables', {
  highlightedLines: [1, [3, 6], 8]
})

And here's the corresponding HTML output:

<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line highlighted"><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;line 1&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
<span class="line"><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;line 2&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
<span class="line highlighted"><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;line 3&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
<span class="line highlighted"><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;line 4&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
<span class="line highlighted"><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;line 5&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
<span class="line highlighted"><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;line 6&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
<span class="line"><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;line 7&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
<span class="line highlighted"><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;line 8&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
<span class="line"><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;line 9&#39;</span><span style="color: var(--shiki-color-text)">);</span></span></code></pre>

Feedback

Feedback is more than welcome, I'm happy to iterate on this as necessary :)

• [x] Add a test if possible
• [x] Format all commit messages with Conventional Commits

• [x] This PR fixes #255

I'm not sure it's suitable to make changes on renderer-svg directly(seems like a breaking change), so I made a copy of it.

The main changes are:

• use opentype.js to measure font width, so we need to pass a font file path, or font file buffer (~~could not use css font-family directly~~, fetch the font file and convert to ArrayBuffer first)
• embedded font, more portable, but not copiable 😢
• render to image using something like node-canvas, so we don't need to install a browser (not implemented yet)

• Adds local "css-variables.json" theme
• Adds documentation for this theme, and dark mode support in general
  • (feel free to make any changes to docs as you see fit!)
• Closes (potentially) #33 ?

First of all: Thanks so much for creating this great library. I've spend too many hours trying to configured Monaco to get VSC themes working before I found Shiki. 😅

I'm trying to use Shiki in a Next.js app using Next.js' SSR feature via getStaticProps. Everything works great during local development (via next dev) however the app breaks in production after running next build (which bundled the app) resulting in errors like these:

The reason for this is that Shiki dynamically tries to access the theme/grammar files using the fs Node package. However these resources are no longer available after the next build step. Next.js uses nft to automatically detect and bundle assets. It would be great if Shiki could access the required assets in a way that nft can understand it and it therefore works with Next.js.

As a temporary workaround I'm doing the following:

const theme = require('shiki/themes/github-light.json')
const grammar = require('shiki/languages/tsx.tmLanguage.json')

const highlighter = await getHighlighter({
  theme,
  langs: [{ id: 'tsx', scopeName: 'source.tsx', grammar }],
})

Consider the following:

const shiki = require('shiki')

shiki.getHighlighter({
  theme: 'light_plus'
}).then(highlighter => {
  console.log(highlighter.codeToHtml(`return 'shiki';`, 'js'))
})

This is the result I’m getting:

<pre class="shiki" style="background-color: #fff"><code><span style="color: #0000FF">return</span><span style="color: #000000"> </span><span style="color: #A31515">'shiki'</span><span style="color: #000000">;</span></code></pre>

But this is what I see in VS Code using the same theme:

(Note the color of the return keyword.)

@orta Unfortunately I introduced a bug with/for 0.12.0 that breaks browser environments.

While I was there I at least fixed the Rollup builds (back to the state of bundling like 0.10.1), so that unpkg and jsDelivr are working agin. This fixes #338 and fixes #365

I'm trying to get async loading working properly for all languages supported by Shiki in showcode.app, but it seems some languages have issues and others do not. The issue is completely sporadic, even on the Shiki playground I receive this issue:

If you start clicking languages randomly, you'll eventually receive this error.

I haven't been able to track it down properly. My shiki highlighter instance is a singleton shared throughout my application, and when the languages load properly, they do stay loaded.

Can anyone point me in the direction of a potential fix? I've been digging through the source and trying to find potential issues, but my JS knowledge is certainly lacking.

Any help is greatly appreciated! ❤️ Thank you so much for this amazing tool.

Hi, I am not able to import shiki into a react app. I am getting Uncaught TypeError: fs.readFileSync is not a function error. Here's my code for reference.

import './App.css'
import { useEffect, useState } from 'react'
import  shiki  from 'shiki'

shiki.getHighlighter({
  theme: 'nord'
}).then(highlighter => {
  console.log(highlighter.codeToHtml(`console.log('shiki');`, 'js'))
})
...

Running the below repro:

// @ts-check
const fs = require("fs");
const s = require("shiki");

async function main() {
    const h = await s.getHighlighter({
        langs: ["shellscript"],
        themes: ["github-light"],
    });

    const html = h.codeToHtml("npm i your-dependency", { lang: "shellscript" });

    fs.writeFileSync("test.html", html);
}

main();

Highlights as:

While in VSCode it highlights as:

This broke with an upgrade from ^0.11.1 to ^0.12.1

Ref: https://github.com/TypeStrong/typedoc/issues/2139

Eslint is warning me of possible XSS attack because of the use of v-html

So i'm wondering, if I'm using the output of shiki (python + github theme) directly as the input of a v-html directive, is there a risk?

Updating to 12 introduced an error for me and I wanted to share it in case others encounter it. I'm not sure how widespread this occurs.

Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

The change is from using a Response object (here) instead of an ArrayBuffer, which as you know is handled differently by oniguruma

Using the advice in the readme works:

const wasmBuffer = await fetch('/your/path/onig.wasm').then(res => res.arrayBuffer())
setWasm(wasmBuffer)

I'm trying to use Shiki in a react server component; however, the oniguruma wasm file can't be found. I've tried setting the wasm path; however, when reading through the documentation, this isn't possible for the node.js environment.

Issue:

error - unhandledRejection: Error: ENOENT: no such file or directory, open '(sc_server)\node_modules\vscode-oniguruma\release\onig.wasm'
    at Object.openSync (node:fs:590:3)
    at Object.readFileSync (node:fs:458:35)
    at getOniguruma (webpack-internal:///(sc_server)/./node_modules/shiki/dist/index.js:2178:32)
    at Object.getHighlighter (webpack-internal:///(sc_server)/./node_modules/shiki/dist/index.js:2682:36)
    at getHighlighter (webpack-internal:///(sc_server)/./markdown.plugins.mjs:45:66)
    at Function.rehypePrettyCode (webpack-internal:///(sc_server)/./node_modules/rehype-pretty-code/dist/rehype-pretty-code.js:30114:45)
    at Function.freeze (webpack-internal:///(sc_server)/./node_modules/unified/lib/index.js:117:74)
    at Function.process (webpack-internal:///(sc_server)/./node_modules/unified/lib/index.js:308:19)
    at parseMarkdown (webpack-internal:///(sc_server)/./src/app/(website)/packages/[repository_type]/[...package_route]/page.tsx:52:31)
    at Page (webpack-internal:///(sc_server)/./src/app/(website)/packages/[repository_type]/[...package_route]/page.tsx:86:24)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  errno: -4058,
  syscall: 'open',
  code: 'ENOENT',
  path: '(sc_server)\\node_modules\\vscode-oniguruma\\release\\onig.wasm'
}

What I've tried to do to resolve it:

1. Copy onig.wasm to my src folder
2. Try to load onig.wasm in the shiki.getHighlighter options

const highlighter = await shiki.getHighlighter({
    ...options,
    paths: {
      wasm: `${getShikiPath()}/onig.wasm`, // src/lib/mdx/shiki/onig.wasm
      languages: `${getShikiPath()}/languages/`,
      themes: `${getShikiPath()}/themes/`,
    },
  })

Possible solutions:

1. Might this be solved by allowing users to specify where to load the onig.wasm from in the node.js environment. (see the shiki.getHighlighter paths -> wasm section. (this option currently only works in browser environments*)

https://github.com/unjs/shiki-es

I'm not really sure about us converting to ESM, because I don't really feel like I grok all the trade-offs and how to do backwards compat, but the README should mention this module as it's a good answer