Where to add the rehype plugin ?

[Gitstar-OC]

As told in this, do I have to add this https://fumadocs.vercel.app/docs/headless/mdx/rehype-code#usage.

import { defineDocs, defineConfig } from 'fumadocs-mdx/config';
import rehypeKatex from 'rehype-katex';
import remarkMath from 'remark-math';
import { rehypeCode } from 'fumadocs-core/mdx-plugins';


export const { docs, meta } = defineDocs(
  {
  docs: {
    dir: 'content/learn'
  },
  meta: {
    dir: 'content/learn'
  }
}
);

export default defineConfig({
  mdxOptions: {
      remarkPlugins: [remarkMath],
      rehypePlugins: (v) => [rehypeKatex, rehypeCode, ...v],
  },
});

But it is not working, I have installed shiki and referred to the docs and they look way more complicated than this. Any solution ?

[fuma-nama]

Rehype code is added by default, you don't need any configuration to enable syntax highlighting

[Gitstar-OC]

I think it is having some error then, this is how I want the code block to look like (neglect the errors)

and this is it's current look

[fuma-nama]

Looks like a font problem

[Gitstar-OC]

means, do I have to use a specific font ? I just changed the font size of the code block component like this

.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)), 
.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)), 
.fd-codeblock code {
  font-size: var(--p-size);
}

along with this

.fd-codeblock code {
  row-gap: 5px;
}

to add some gap in between the lines.

And after removing the styling they still look like this

[fuma-nama]

I mean the font of the code blocks isn't a suitable font, you can use Jetbrains mono or Geist font. Normally the default mono font of browsers should also work (you probably changed it with CSS before)

[Gitstar-OC]

Is this supposed to be the font ?

[Gitstar-OC]

it looks like you are using this font

but I cannot find it on google fonts after searching geist.

this is setup for the layout.tsx file. Please tell if you want to see the codebase of this you can see it here

[fuma-nama]

Is this supposed to be the font ?

Yes, we don't have a default font, it's up to you

[Gitstar-OC]

Is there any other way like I have installed shiki but I don't know where to import and use it ? Can you help with that ?

[fuma-nama]

It works as expected, I don't understand your question

[Gitstar-OC]

Means you are saying that this is the default syntax highlighting of the code block ? I want to change the color and theme of syntax. Like changing the comment color to green and other color for functions, classes, variables etc.

[fuma-nama]

The rehypeCodeOptions is what you need, it offers the same options as Shiki's rehype integration + some of our own features
(note: with global config, you use defineConfig's mdx option instead of getDefaultMDXOptions)

[Gitstar-OC]

it worked, I just did some minor changes to the source.config.ts file

import { defineDocs, defineConfig } from "fumadocs-mdx/config";
import rehypeKatex from "rehype-katex";
import remarkMath from "remark-math";

export const { docs, meta } = defineDocs({
  docs: {
    dir: "content/learn",
  },
  meta: {
    dir: "content/learn",
  },
});

export default defineConfig({
  mdxOptions: {
    rehypeCodeOptions: {
      langs: ["python", "javascript", "typescript"],
      themes: {
        light: "light-plus",
        dark: "slack-dark",
      },
    },
    remarkPlugins: [remarkMath],
    rehypePlugins: (v) => [rehypeKatex, ...v],
  },
});
``` should I add this in the syntax highlighting or shiki component  ? 

[fuma-nama]

Also note that langs isn't required.