• nuxt
• highlighting
• code
• docs

I've used nuxt content previously and easily been able to apply a specific theme style for syntax highlighting in code snippets (my personal preference is monokai I've used it for years). I knew nuxt content supported syntax highlighting using shiki, but despite setting a theme in the nuxt config file my snippets were not styled as I expected.

I used devtools and could see the shiki classes being applied to the pre tag, but tailwind classes appeared to be overriding with tailwind background appearing rather than the dark grey background I had expected. I realised thanks to ChatGPT this was intentional it applies the colour tokens, but the background colour I had to set myself. I created a css file importing the base tailwind styles and adding specific styles for the shiki classes:

@tailwind base;
@tailwind components;
@tailwind utilities;

pre.shiki {
  background-color: var(--shiki-color-background, #272822) !important;
  border-radius: 0.5rem;
  color: var(--shiki-color-text, #f8f8f2) !important;
  overflow-x: auto;
  padding: 1rem;
}

pre.shiki code {
  background: transparent;
}

After setting this up the syntax highlighting finally appeared as originally expected it took a while to figure that out, but got there in the end as you can see from the code snipper above so progress.