How to exclude codehike htags from table of contents generated by fumadocs?

[ZYJLiu]

Enabling toc on fumadocs causes all htags from codehike components to be included. Is there a way to exclude them?

[pomber]

I think it shouldn't be a problem if you run remarkCodeHike before anything from fumadocs. Can you share your config where you set up the remarkPlugins?

[ZYJLiu]

I used the example template for fumadocs you've provided here, so the config is unchanged from:

import { remarkCodeHike, recmaCodeHike } from "codehike/mdx"
import createMDX from "fumadocs-mdx/config"

/** @type {import('codehike/mdx').CodeHikeConfig} */
const chConfig = {
  components: {
    code: "Code",
  },
}

const withMDX = createMDX({
  mdxOptions: {
    remarkPlugins: [[remarkCodeHike, chConfig]],
    recmaPlugins: [[recmaCodeHike, chConfig]],
    jsx: true,
  },
})

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
}

export default withMDX(config)

The only update was in page.tsx where I enabled tableOfContent and added toc={page.data.exports.toc}

import { getPage, getPages } from "@/app/source";
import type { Metadata } from "next";
import { DocsPage, DocsBody } from "fumadocs-ui/page";
import { notFound } from "next/navigation";

export default async function Page({
  params,
}: {
  params: { slug?: string[] };
}) {
  const page = getPage(params.slug);

  if (page == null) {
    notFound();
  }

  const MDX = page.data.exports.default;

  return (
    <DocsPage
      full={page.data.full}
      tableOfContent={{ enabled: true }}
      toc={page.data.exports.toc}
    >
      <DocsBody>
        <h1>{page.data.title}</h1>
        <MDX />
      </DocsBody>
    </DocsPage>
  );
}

export async function generateStaticParams() {
  return getPages().map((page) => ({
    slug: page.slugs,
  }));
}

export function generateMetadata({ params }: { params: { slug?: string[] } }) {
  const page = getPage(params.slug);

  if (page == null) notFound();

  return {
    title: page.data.title,
    description: page.data.description,
  } satisfies Metadata;
}

I did initally try to update the 3 fumadocs dependencies to the latest versions, but had trouble figuring out how to update the template to work with fumadocs-mdx v10.0.

[pomber]

not sure what version of fumadocs added this, but try:

    remarkPlugins: (v) => [
      [remarkCodeHike, chConfig],
      ...v,
    ],

that should make codehike plugin run before fumadocs'

[ZYJLiu]

Oh btw, I also dmed you via twitter about docskit.codehike.org