How did you add linked headers to section header?

[serhii-bilyk-intellias]

When I am using this syntax:

# Any section

Any section header is created without ID and link.
It is

<h1>Any section </h1>

And I want smth like that:

<h1 id="batman"><a href="#batman">Any section</a></h1>

[wooorm]

https://github.com/rehypejs/rehype-autolink-headings

[serhii-bilyk-intellias]

@wooorm maybe I should include other loaders or plugins ?

import rehypeAutolinkHeading from "rehype-autolink-headings";

      {
        test: /\.mdx?$/,
        use: [
          {
            loader: "@mdx-js/loader",
            /** @type {import('@mdx-js/loader').Options} */
            options: {
              rehypePlugins: [rehypeAutolinkHeading],
            },
          },
        ],
      },

This config just returns <h1>Text</h1>

[wooorm]

Please spend some time expanding on your question. See https://mdxjs.com/community/support/#asking-quality-questions for tips. Particularly, input MDX is useful.

[serhii-bilyk-intellias]

@wooorm I want to make heading linked. This is my mdx

## Table of Contents

I expect it to generate

<h1><a href="#">text</a></h1>

Instead I am getting

<h1>text</h1>

This is a config I am using in webpack

      {
        test: /\.mdx?$/,
        use: [
          {
            loader: "@mdx-js/loader",
            /** @type {import('@mdx-js/loader').Options} */
            options: {
              rehypePlugins: [rehypeAutolinkHeading],
            },
          },
        ],
      },

[serhii-bilyk-intellias]

Were able to make it work. Few notes: rehype plugin does not work if webpack config is a typescript file. In order to make it work, I had to change webpack config extension to webpack.config.mjs, also added "type":"module" to package json. This is my config:

      {
        test: /\.mdx?$/,
        use: [
          { loader: "babel-loader", options: {} },

          {
            loader: "@mdx-js/loader",
            /** @type {import('@mdx-js/loader').Options} */
            options: {
              rehypePlugins: [
                rehypeSlug,
                [rehypeAutolinkHeading, { behavior: "wrap" }],
              ],
            },
          },
        ],
      },

[ChristianMurphy]

Were able to make it work. Few notes: rehype plugin does not work if webpack config is a typescript file.

It will if you have TypeScript configured to use Node 16 module loading

mdx/tsconfig.json

Line 9 in 07e2b36

"module": "node16",

And potentially if you use an .mts file https://www.typescriptlang.org/docs/handbook/esm-node.html

---

"type":"module"

I'd recommend keeping this.

extension to webpack.config.mjs

both .mjs and .mts should be unnecessary if you add "type":"module" to your package.json and "module": "node16" to you tsconfig.json