Dewdew logo-mobile

How to add custom theme for codeblock highlighting within Astro and Shiki

Lets learn how to change the highlighting theme of a code block.

astro shiki tailwind


Jan 22, 2024

1 min read


Let’s do highlight code blocks!

Basically, Astro provides syntax highlighting for markdown code blocks. To utilize this, we can generally work with either Shiki or Prism, but Astro Docs provides examples using Shiki.

Since Shiki allows use of themes from VSCode, I recommend it more convenient to use Shiki. Let’s learn how to highlight code blocks!

Find Highlight Theme

First, find and copy name of theme you want to use from here. (I use min-light.)

Editing astro.config.mjs file

Next, you need to add following content to your astro.config.mjs file.

import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [
  markdown: {
    shikiConfig: {
      theme: 'min-light', // 이곳이 중요합니다!
      langs: [],
      wrap: true

That’s all!

With the above settings, you can see such wonderful code block highlighting!

Codeblock preview

So far, we’ve looked at how to highlight code blocks in Astro.

See you next!

Dewdew of the Internet © 2024