Written by: Maria Tanaka

Why Traveling Alone is the Best Thing You Can Do for Yourself.

Solo travel can be a life-changing experience that helps you discover new things about yourself and the world. This post will explore the benefits of traveling alone, from increased confidence and independence to the freedom to explore at your own pace.

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')
    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')
  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 = `
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
  fs.writeFileSync('index.html', out)

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,

Subscribe to our Newsletter

We have a lot to tell you about.