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: [
    tailwind()
  ],
  markdown: {
    shikiConfig: {
      theme: 'min-light', // 이곳이 중요합니다!
      langs: [],
      wrap: true
    }
  }
})

---

That’s all!

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

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

See you next!