Written by: Charlotte Parker on Fri Jul 07

The Last Heirloom

A family heirloom, believed to be lost for generations, resurfaces and triggers a dangerous quest for the last surviving member of the family to reclaim it.

#

It uses TextMate grammar to tokenize strings, and colors the tokens with VS Code themes. In short, Shiki generates HTML that looks exactly like your code in VS Code, and it works great in your static website generator.

It’s simple to use:

// Example JavaScript
const shiki = require("shiki");
shiki
  .getHighlighter({
    theme: "nord",
  })
  .then((highlighter) => {
    console.log(
      highlighter.codeToHtml(`console.log('shiki');`, {
        lang: "js",
      })
    );
  });
// <pre class="shiki" style="background-color: #2e3440"><code>
//   <!-- Highlighted Code -->
// </code></pre>

Here’s Shiki using Shiki ( how meta ) and markdown-it to generate this page:

const fs = require("fs");
const markdown = require("markdown-it");
const shiki = require("shiki");
shiki
  .getHighlighter({
    theme: "nord",
  })
  .then((highlighter) => {
    const md = markdown({
      html: true,
      highlight: (code, lang) => {
        return highlighter.codeToHtml(code, { lang });
      },
    });
    const html = md.render(fs.readFileSync("index.md", "utf-8"));
    const out = `
    <title>Shiki</title>
    <link rel="stylesheet" href="style.css">
    ${html}
    <script src="index.js"></script>
  `;
    fs.writeFileSync("index.html", out);
    console.log("done");
  });

Shiki can load any VS Code themes.:

import { tokenColors } from "./custom-theme.json";
// https://astro.build/config
// VS Code Theme is:
export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: {
        name: "custom",
        type: "dark",
        settings: tokenColors,
      },
      wrap: true,
      skipInline: false,
      drafts: false,
    },
  },
});
Alex Carter, Founder of NexusWeb Solutions.

Stay in the Loop with the Latest Insights!

Subscribe to Our Blog and Embark on a Journey of Digital Discovery."