Learn Shiki Rehype Pretty Code - Languages & Themes

#Introduction

Up to episode 4, you can already run the pipeline and set basic options. Now it's time to get to know the two main ingredients that determine how code looks: language and theme. The language determines the tokenization rules, the theme determines the color of the result.

Episode 5 covers choosing a language through the meta string and defaultLang, exploring the language catalog from @shikijs/langs, and choosing a built-in theme that matches your site's design. By the end of the episode, you can present various languages with a consistent palette.

#Language: Choosing the Right Grammar

#Language Meta on Fenced Code Blocks

The most common way to choose a language is to write it in the meta string right after the opening backtick of a fenced code block:

Fenced code block with a language meta

const pesan: string = "Halo";

Shiki will load the grammar that matches that alias and tokenize the contents of the block. Language names can be common aliases like ts, py, md, yml, or sh.

#defaultLang for Code Without Meta

Authors often forget to include a language. To keep the result neat, set defaultLang in the plugin options:

Set the fallback language

.use(rehypePrettyCode, {
  theme: "github-dark-default",
  defaultLang: "plaintext",
})

With defaultLang set to plaintext, code blocks without meta aren't colored but are still rendered intact. If you want all blocks without meta to be automatically highlighted as a specific language, fill defaultLang with that language name.

#Getting to Know the Language Catalog from @shikijs/langs

The complete list of languages supported by Shiki can be checked directly in the @shikijs/langs package:

node -e "import('@shikijs/langs').then(m => console.log(m.langs.map(l => l.id).join(', ')))"

The node -e command with dynamic import shows the ids of all available languages. From the output you'll see names like javascript, typescript, python, go, rust, sql, yaml, json, and many more.

#Theme: Setting the Color Palette

#Ready-to-Use Built-in Themes

Shiki provides many popular themes whose names are already familiar from editors:

• github-dark-default and github-light-default.
• one-dark-pro and one-light.
• nord with its cool tones.
• vitesse-dark and vitesse-light.
• tokyo-night, dracula, and material-theme.

The theme is chosen via the theme option on rehype-pretty-code. You can switch themes just by changing the name string, without touching the document contents.

Switch themes

.use(rehypePrettyCode, {
  theme: "nord",
})

If you're unsure what to pick, open the theme demo page on the official Shiki site and compare several palettes at once. Choose one with good contrast for code text, not just one that looks pretty.

#keepBackground and Your Own Background

Each theme carries a background color. If your page already has its own color scheme, turn off the built-in background with keepBackground: false and then set the background in CSS:

[data-rehype-pretty-code-figure] pre {
  background: #161b22;
}

This approach separates responsibilities: Shiki handles the token colors, CSS handles the background color. The result is easier to tidy up when you apply dark mode across the whole site.

#Combining Languages and Themes in One Project

#Adding Extra Languages and Themes

rehype-pretty-code loads languages and themes automatically as needed, but you can also add them explicitly via the langs and themes options:

Additional langs and themes

.use(rehypePrettyCode, {
  theme: "github-dark-default",
  langs: ["ts", "py", "go", "rust"],
  themes: ["nord", "vitesse-dark"],
})

The langs option is useful for making sure rarely used languages are always available, while themes prepares several palettes for the dual theme feature in episode 15. Selecting langs selectively also keeps the bundle size down, as we discuss in episode 12.

Both options accept built-in language ids as well as grammar and theme objects imported from files. An example of writing both options together: langs: ["ts", "py"]. By combining them, you control the two main ingredients of code appearance from a single configuration point.

#Conclusion

Key takeaways:

• The language is chosen via the fenced code block meta string or defaultLang.
• The language catalog is available in @shikijs/langs and can be checked via Node.js.
• The theme determines token colors, not the markup structure.
• Many built-in themes are ready to use, like github, one-dark, nord, and vitesse.
• keepBackground separates the theme background from the token colors.
• The langs and themes options allow a selective list.

In episode 6 you'll learn meta strings and caption: how to add a title and description to a code block, plus meta features like showLineNumbers, lines, and diff that automatically change the generated markup.