Not working with Next.js

[khanakia]

1. It just broke the site
2. Also vscode complains about syntax error

## Test

[github](https://github.com)<!--rehype:rel=external-->

page.mdx:7:30: Unexpected character `!` (U+0021) before name, expected a character that can start a name, such as a letter, `$`, or `_` (note: to create a comment in MDX, use `{/* text */}`)

[jaywcjlove]

@khanakia The error message indicates that the standard Markdown comment syntax <!-- comment --> was used in an MDX file, which is not permitted. MDX requires comments to be written as {/* comment */}. Markdown's comment <!-- comment --> is typically used to hide content in plain Markdown files, but this syntax causes a parsing error in MDX since it expects characters that can start names, not the beginning of an HTML comment.

[khanakia]

Ok so mdx has no error now but the plugin does not seem to be working

page.mdx

[github](https://github.com){/* rehype:rel=external rehype:style=width:100px; */}

output:

<a href="https://github.com">github</a>

next.config.ts

import nextMDX from '@next/mdx'
import rehypeAttrs from 'rehype-attr'

const nextConfig = {
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
}


export default async function config() {
  let withMDX = nextMDX({
    extension: /\.mdx$/,
    options: {
      remarkPlugins: [],
      rehypePlugins: [
        rehypeAttrs,
    },
   
  })

  return withMDX(nextConfig)
}

[jaywcjlove]

@khanakia This plugin does not support {*comment*} style comments. I have now added custom comment settings, and you need to upgrade to v4.0.

rehype-attr/test/index.test.ts

Lines 457 to 477 in 2d37add

	[
	{
	title: 'options="attr" - <p>',
	markdown: '<p class="hello">text</p>{*rehype:className=text*}',
	expected: '<p class="text">text</p>{*rehype:className=text*}',
	},
	{
	title: 'options="attr" - <p>',
	markdown: '<p class="hello">text</p>{*rehype:className=text*} hello',
	expected: '<p class="text">text</p>{*rehype:className=text*} hello',
	}
	].forEach((data, idx) => {
	it(data.title, async () => {
	const htmlStr = rehype()
	.data('settings', { fragment: true })
	.use(rehypeAttrs, { properties: 'attr', commentStart: '\\{\\*', commentEnd: '\\*\\}' })
	.processSync(data.markdown)
	.toString()
	expect(htmlStr).toEqual(data.expected);
	});
	})

rehype-attr/src/index.ts

Lines 49 to 58 in 2d37add

	/**
	* Optional start delimiter for comments @example `\\{\\*`
	* @default `<!--`
	*/
	commentStart?: string;
	/**
	* Optional end delimiter for comments @example `\\*\\}`
	* @default `-->`
	*/
	commentEnd?: string;

[khanakia]

Upgraded to 4.0.1 still not working

[github](https://github.com){/* rehype:rel=external rehype:style=width:100px; */}

it just outputs <a href="https://github.com">github</a>

PS: I tried customizing the comment settings too

 [
  rehypeAttrs,
  {
    properties: 'attr',
    commentStart: '\\{\\/\\*',
    commentEnd: '\\*\\/\\}',
  },
],

[jaywcjlove]

rehype-attr/test/index.test.ts

Lines 474 to 494 in 6d44dde

	[
	{
	title: 'options="attr" - <p>',
	markdown: '<p class="hello">text</p>{*rehype:className=text*}',
	expected: '<p class="text">text</p>{*rehype:className=text*}',
	},
	{
	title: 'options="attr" - <p>',
	markdown: '<p class="hello">text</p>{*rehype:className=text*} hello',
	expected: '<p class="text">text</p>{*rehype:className=text*} hello',
	}
	].forEach((data, idx) => {
	it(data.title, async () => {
	const htmlStr = rehype()
	.data('settings', { fragment: true })
	.use(rehypeAttrs, { properties: 'attr', commentStart: '\\{\\*', commentEnd: '\\*\\}' })
	.processSync(data.markdown)
	.toString()
	expect(htmlStr).toEqual(data.expected);
	});
	});

@khanakia Based on the test case, it has met the expectations. You may need to change the direction of your research and see how Next.js handles it.