Skip to main content

Shiki

Shiki is a beautiful Syntax Highlighter. Demo.

Deno port of Shiki main repository and the packages (except the Vuepress plugin). Give the original repository a star! All credits goes to the actual authors and maintainers.

import { getHighlighter } from "https://deno.land/x/shiki/shiki/mod.ts";

const highlighter = await getHighlighter({ theme: "nord" });

const code = `console.log("A beautiful Syntax Highlighter.");`;
const highlighted = highlighter.codeToHtml(code, { lang: "js" });
console.log(highlighted);

It is recommended to set a local or remote oniguruma WASM file by yourself. By default it is set to the onig.wasm file from this repository. You can find the origin file here.

To configure one by yourself:

import { setWasm } from "https://deno.land/x/shiki/shiki/mod.ts";

// Local file
await setWasm("./local_onig_wasm_file.wasm");
// Remote file (fetched before continuing)
await setWasm(
  "https://raw.githubusercontent.com/microsoft/vscode-oniguruma/v1.6.2/out/onig.wasm",
);

// ... Rest of your code

Modules

This repository contains the following ported packages.

Modules are confirmed as working as far as I’ve tested.

Go to the examples directory to play with Shiki, or try it out on a Deno Deploy playground.