Highlight content (shiki) not working

devstack-be commented 4 months ago

Environment

Operating System: Darwin
Node Version: v22.2.0
Nuxt Version: 3.12.2
CLI Version: 3.12.0
Nitro Version: 2.9.6
Package Manager: yarn@1.22.22
Builder: -
User Config: nitro, routeRules, css, devtools, modules, content, hooks, ui, auth, app, typescript, runtimeConfig, compatibilityDate
Runtime Modules: @nuxt/ui@2.17.0, @nuxt/image@1.7.0, @sidebase/nuxt-auth@0.7.2, nuxt-headlessui@1.2.0, @pinia/nuxt@0.5.1, @nuxt/content@2.13.0, @nuxt/eslint@0.3.13
Build Modules: -

Reproduction

I couldn't reproduce it on a third-party site.

Describe the bug

I am using Nuxt Content and on my blog I have the following code in a .md file:

console.log("Hello World")

npx nuxi init -t github:nuxt-ui-pro/docs

  export default () => {
    console.log('Code block')
  }

The code highlighting is not active, and the Shiki classes are not present in the HTML (see screenshots). I have added the following in my configuration (nuxt.config):

content: {
  highlight: {
    theme: {
      // Default theme (same as single string)
      default: "github-light",
      // Theme used if `html.dark`
      dark: "github-dark",
      // Theme used if `html.sepia`
      sepia: "monokai",
    },
  },
},

Here is the rendered output on my page:

Additional context

No response

Logs

No response

farnabaz commented 4 months ago

Do you have any special config or plugins? Module seems to work fine, checkout here https://stackblitz.com/edit/github-eywl2e?file=content%2Findex.md

devstack-be commented 4 months ago

No nothing spécial ... I know that the module work fine. But i don't know why it doesnt work on my project. Nuxt content is working but not shiki highlighting.

here is my package.json:

{
  "name": "nuxt-saas-starter",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare && prisma generate",
    "lint": "eslint .",
    "typecheck": "nuxt typecheck"
  },
  "devDependencies": {
    "@nuxt/content": "^2.13.0",
    "@nuxt/devtools": "latest",
    "@nuxt/eslint": "^0.3.13",
    "@nuxt/image": "^1.7.0",
    "@nuxt/ui": "^2.17.0",
    "@sidebase/nuxt-auth": "^0.7.2",
    "eslint": "^9.6.0",
    "nuxt": "^3.12.2",
    "nuxt-headlessui": "^1.2.0",
    "prisma": "^5.15.1"
  },
  "dependencies": {
    "@headlessui/vue": "^1.7.22",
    "@heroicons/vue": "^2.1.4",
    "@iconify-json/mdi": "^1.1.67",
    "@iconify-json/simple-icons": "^1.1.107",
    "@next-auth/prisma-adapter": "^1.0.7",
    "@pinia/nuxt": "^0.5.1",
    "@prisma/client": "^5.15.1",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue-email/components": "^0.0.17",
    "@vue-email/render": "^0.0.9",
    "next-auth": "4.21.1",
    "pinia": "^2.1.7",
    "resend": "^3.4.0",
    "sass": "^1.77.6",
    "scule": "^1.3.0",
    "stripe": "^15.12.0",
    "zod": "^3.23.8"
  }
}

and my nuxt config:

import vue from "@vitejs/plugin-vue";
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  nitro: {
    rollupConfig: {
      plugins: [vue()],
    },
  },

  routeRules: {
    "/dashboard/**": { ssr: false },
  },
  css: ["~/assets/main.css", "~/assets/scss/main.scss"],

  devtools: { enabled: true },

  modules: [
    "@nuxt/ui",
    "@nuxt/image",
    "@sidebase/nuxt-auth",
    "nuxt-headlessui",
    "@pinia/nuxt",
    "@nuxt/content",
    "@nuxt/eslint",
  ],

  content: {
    highlight: {
      theme: {
        // Default theme (same as single string)
        default: "github-light",
        // Theme used if `html.dark`
        dark: "github-dark",
        // Theme used if `html.sepia`
        sepia: "monokai",
      },
    },
  },
  hooks: {
    // Define `@nuxt/ui` components as global to use them in `.md` (feel free to add those you need)
    "components:extend": (components) => {
      const globals = components.filter((c) =>
        ["UButton", "UIcon"].includes(c.pascalName)
      );

      globals.forEach((c) => (c.global = true));
    },
  },

  ui: {
    icons: ["mdi", "heroicons", "simple-icons"],
  },

  auth: {
    provider: {
      type: "authjs",
    },
  },

  app: {
    pageTransition: { name: "page", mode: "out-in" },
    layoutTransition: { name: "fade", mode: "out-in" },
  },

  typescript: {
    strict: true,
  },

  runtimeConfig: {
    // The private keys which are only available within server-side
    AuthSecret: "",
    GoogleClientId: "",
    GoogleClientSecret: "",
    StripeSecretKey: "",
    StripeWebhookSecret: "",
    ResendApiKey: "",
    public: {
      AppUrl: "",
      StripeProMonthlyPriceId: "",
      StripeProYearlyPriceId: "",
      StripeBusinessMonthlyPriceId: "",
      StripeBusinessYearlyPriceId: "",
    },
  },

  compatibilityDate: "2024-07-06",
});

I already tried to remove some part of my config. Like css, nitro, ... but nothing change.

I really don't understand...

farnabaz commented 4 months ago

Could you modify node_modules/@nuxtjs/mdc/dist/runtime/highlighter/rehype-nuxt.js and log e at line 18 to see if an exception happens during highlight or not?

devstack-be commented 4 months ago

Thanks for your answer. This catch is not triggered.

devstack-be commented 4 months ago

It's working. It was my middleware who was too restrictive and was blocking call to api/_mdc

I have already seen many issues caused by middleware where the module does not function properly if the middleware blocks access to api/_content or api/_mdc. This should perhaps be mentioned in the documentation.

farnabaz commented 4 months ago

Great. Feel free to drop a PR about the documentation 🙂

ToHold commented 3 weeks ago

I encountered quite the same problem using nuxt-security with a basic-auth, to fix it I had to add an exclude '/api/_mdc'. Thank you, your discussion helped me !

nuxt / content