Nuxt•3mo ago

Nuxt Content with Shiki syntax highlighting not working

I can't seem to get the the shiki syntax highlighting to work as expected. I would expect the code block to be rendered with the ability to scroll to the side if the code extends the width of the container. Also, the themes aren't getting applied like I would expect. The file name doesn't show up. It seems that there is something wrong when styles are being generated in the <ContentRenderer /> component. You can see in my screenshot here that nothing is being generated in the style attribute. My guess is that there is an issue with the nuxt/tailwindcss module in that it is defaulting to v7 which is still in beta. Has anyone else run into this? This is a fresh nuxt content build that I just spun up yesterday.

2 Replies

kapa.ai•3mo ago

Hi @Brian Barrow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It sounds like you’re experiencing issues with Shiki syntax highlighting, code block theming, and filename display in Nuxt Content. Based on the knowledge sources, here are some key points and troubleshooting steps: 1. Shiki Syntax Highlighting & Themes Nuxt Content uses Shiki for syntax highlighting in code blocks. You can configure the theme and supported languages in your nuxt.config.ts under the content.build.markdown.highlight key. For example:

export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        highlight: {
          theme: {
            default: 'github-light',
            dark: 'github-dark',
            sepia: 'monokai'
          }
        }
      }
    }
  }
})

export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        highlight: {
          theme: {
            default: 'github-light',
            dark: 'github-dark',
            sepia: 'monokai'
          }
        }
      }
    }
  }
})

This ensures the correct VSCode themes are applied for different color modes. If themes aren’t being applied, double-check this configuration and ensure you’re using a supported theme name. You can find the list of available themes in the Shiki documentation source. 2. Code Block Styling & Horizontal Scrolling Nuxt Content renders code blocks using the ProsePre and ProseCode components. By default, these should provide proper styling and horizontal scrolling for long lines. If you’re not seeing this, it could be a CSS issue. Make sure you haven’t overridden the default styles, and that your Tailwind CSS configuration (if used) includes the necessary typography plugin for prose styling:

npm install -D @tailwindcss/typography

npm install -D @tailwindcss/typography

And in your tailwind.config.ts:

import typography from '@tailwindcss/typography'
export default {
  plugins: [typography()]
}

import typography from '@tailwindcss/typography'
export default {
  plugins: [typography()]
}

This ensures that prose classes (like those used by Nuxt Content) are styled correctly source. 3. Filename Display in Code Blocks Nuxt Content supports displaying filenames above code blocks when using MDC syntax. For this to work, ensure you’re using the correct syntax in your markdown files and that you haven’t overridden the ProsePre or ProseCode components in a way that removes this feature. The filename should be specified in the code block’s info string, e.g.:

js [filename.js]
    // code here

js [filename.js]
    // code here

4. Tailwind CSS v7 Compatibility You mentioned Tailwind CSS v7 (still in beta). The knowledge sources do not explicitly mention compatibility issues with Nuxt Content, but if you suspect this is the cause, try downgrading to a stable Tailwind CSS version to see if the issue persists. 5. No Inline Styles Nuxt Content does not generate inline styles for code highlighting; instead, it relies on CSS classes and the Shiki-generated markup. If you’re expecting styles in the style attribute, that’s not how Shiki integration works in Nuxt Content source. --- Summary:
- Double-check your nuxt.config.ts for correct Shiki theme configuration. - Ensure Tailwind CSS and its typography plugin are set up. - Use the correct MDC syntax for filenames. - Consider testing with a stable Tailwind CSS version. - Inline styles are not expected; styling is handled via classes and Shiki output. If after these steps the issue persists, the knowledge sources do not provide further troubleshooting for Tailwind v7 or other advanced integration issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@252969298132205570> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt Content with Shiki syntax highlighting not working

Did you find this page helpful?