content: Code highlighting not working - Nuxt 3

thanks for the note, seems that was it, plus i had to use shiki transformer as well to format the code: for anyone having the same issues:

//File: server/api/transform.post.ts

import markdownParser from "@nuxt/content/transformers/markdown";
import shikiParser from "@nuxt/content/transformers/shiki";

export default defineEventHandler(async (event) => {
  const body = await readBody(event);

  const blogContent = await markdownParser.parse(
    "blog-content-test",
    body.content,
    {}
  );

  const shikiContent = await shikiParser.transform(blogContent, {
    theme: "one-dark-pro",
    preload: [
      "json",
      "js",
      "ts",
      "html",
      "css",
      "vue",
      "diff",
      "shell",
      "markdown",
      "yaml",
      "bash",
      "ini",
    ],
    apiURL: "/api/_content/highlight",
  });

  return shikiContent;
});

//File: pages/blog/[slug].vue

<template>
  <div>
    <ContentRenderer :value="content" />
  </div>
</template>

<script setup lang="ts">
const { data: blog, error } = await useFetch<Blog>(
  () => `/blog/blog-details/${slug}`,
  {
    baseURL: config.public.baseURL,
    initialCache: false,
  }
);

const { data: content } = await useFetch(() => `/api/transform`, {
  method: "POST",
  body: {
    content: blog.value.content,
  },
});
</script>

@leopoldkristjansson By default Content module does not add background or border to code blocks. What are you referring as wrapper div is part of Nuxt Typography Theme which provide a nice styling for Prose components. You can also create your custom Prose component in components/content directory, See Docs

There was some issue with shiki highlighter which is resolved in edge version, and soon will be released as v2.1.0. This issue also should resolve using edge channel, Feel free to install the edge channel and test it.

mark,just add ‘@nuxt-themes/typography’ package. then I fixed it.😒😒😒

@leopoldkristjansson By default Content module does not add background or border to code blocks. What are you referring as wrapper div is part of Nuxt Typography Theme which provide a nice styling for Prose components. You can also create your custom Prose component in components/content directory, See Docs

Thank you. That was it. I didn’t realize right away that these were separate.

@Flowko Heads-up for coming changes in next release. Module no longer provide highlight api. Everything should pass through transformers.

@amit-chaudhary4 I think your issue is because you’re trying to use the shiki highlighter API directly, and in the wrong place. Check out the docs on @nuxt/content Configuration. I’m a bit behind on the status of edge-channel features, but last I checked, highlighter wasn’t a configurable property under the content.markdown key path.

If you need to implement custom syntax highlighting logic the easiest route is probably to create a server-side middleware or content transformer.

Instead of using transformer in Vue file, you can create a custom API in server/api/ directory and use transformer inside that API endpoint