Allow other delimiters instead of { }?

[neongreen]

Hey! Thanks for the package.

I'm trying to use remark-custom-heading-id with codehike, and it looks like it's broken regardless of which plugin comes first (if codehike first then acorn complains, if remark-custom-heading-id first, then codehike is broken).

I'd like to ditch codehike at some point, but if the delimiters could be customizable — e.g. (# ...) or [[# ...] or // # — that would be very helpful.

[neongreen]

For what it's worth, here is my Next config — maybe something is obviously wrong here.

import createMDX from '@next/mdx'
import { remarkCodeHike } from '@code-hike/mdx'
import { remarkHeadingId } from 'remark-custom-heading-id'
import shiki from 'shiki'

/** @type {import('next').NextConfig} */
const nextConfig = {
  // https://github.com/P5-wrapper/react/issues/162#issuecomment-1186425566
  reactStrictMode: false,
  // Append the default value with md extensions
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
}

const withMDX = createMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [
      [
        remarkHeadingId,
        remarkCodeHike,
        {
          theme: await shiki.loadTheme('themes/light-plus.json'),
          showCopyButton: true,
        },
      ],
    ],
    rehypePlugins: [],
  },
})

export default withMDX(nextConfig)

[stern-shawn]

Not sure if you're still experiencing issues or not, but I'm using code-hike and this plugin in a project with no issues (yet).

The problem that I see here is that you are passing the code hike plugin incorrectly. If you are providing options to a plugin, the plugin must be defined in a separate array, ex:

const withMDX = createMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [
      [
        remarkHeadingId,
        [
          remarkCodeHike,
          {
            theme: await shiki.loadTheme('themes/light-plus.json'),
            showCopyButton: true,
          },
        ],
      ],
    ],
    rehypePlugins: [],
  },
})