package.json

@@ -1,6 +1,6 @@
 {
   "name": "rehype-attr",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "New syntax to add attributes to Markdown.",
   "homepage": "https://jaywcjlove.github.io/rehype-attr",
   "author": "Kenny Wong <wowohoo@qq.com>",

src/utils.ts

@@ -24,7 +24,6 @@ export const prevChild = (data: Literal[] = [], index: number): Comment | undefi
 
 export const nextChild = (data: RootContent[] | ElementContent[] = [], index: number, tagName?: string, codeBlockParames?: boolean): ElementContent | undefined => {
   let i = index;
-
   while (i < data.length) {
     i++;
     if (tagName) {
@@ -36,13 +35,17 @@ export const nextChild = (data: RootContent[] | ElementContent[] = [], index: nu
       const element = data[i] as ElementContent & Literal;
       if (!element || element.type === 'element') return;
       if (element.type === 'text' && element.value.replace(/(\n|\s)/g, '') !== '') return;
-      if (element?.type === 'comment') {
-        if (!/^rehype:/.test(element.value as string)) return;
+      if (/^(comment|raw)$/ig.test(element?.type)) {
+        if (!/^rehype:/.test(element.value?.replace(/^(\s+)?<!--(.*?)-->/, '$2') || '')) {
+          return
+        };
         if (codeBlockParames) {
           const nextNode = nextChild(data, i, 'pre', codeBlockParames)
           if (nextNode) return;
+          element.value = element.value?.replace(/^(\n|\s)+/, '')
           return element;
         } else {
+          element.value = element.value?.replace(/^(\n|\s)+/, '')
           return element;
         }
       }
@@ -58,7 +61,7 @@ export const nextChild = (data: RootContent[] | ElementContent[] = [], index: nu
  * @returns 返回 当前参数数据 Object，`{}`
  */
 export const getCommentObject = ({ value = '' }: Comment): Properties => {
-  const param = getURLParameters(value.replace(/^rehype:/, ''));
+  const param = getURLParameters(value.replace(/^<!--(.*?)-->/, '$1').replace(/^rehype:/, ''));
   Object.keys(param).forEach((keyName: string) => {
     if (param[keyName] === 'true') {
       param[keyName] = true;

test/index.test.ts

@@ -12,6 +12,35 @@ import * as utils from '../src/utils';
 
 const mrkStr = "<!--rehype:title=Rehype Attrs-->\n```js\nconsole.log('')\n```"
 
+describe('rehype-attr type raw test case', () => {
+  [
+    {
+      title: 'options="attr" - Header <h1> `#`',
+      markdown: '# This is a title\n <!--rehype:style=color:pink;-->',
+      expected: '<h1 style="color:pink;">This is a title</h1>\n&#x3C;!--rehype:style=color:pink;-->',
+    },
+    {
+      title: 'options="attr" - Code - not config 7',
+      markdown: '<!--rehype:-->\n```js\nconsole.log("")\n```',
+      expected: '&#x3C;!--rehype:-->\n<pre><code class="language-js">console.log("")\n</code></pre>',
+    },
+  ].forEach((data, idx) => {
+    it(data.title, async () => {
+      const htmlStr = unified()
+        .use(remarkParse)
+        .use(remark2rehype, { allowDangerousHtml: true })
+        // _____⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️________
+        // .use(rehypeRaw)
+        .use(rehypeAttrs, { properties: 'attr' })
+        .use(stringify)
+        .processSync(data.markdown)
+        .toString()
+        expect(htmlStr).toEqual(data.expected);
+    });
+  });
+
+})
+
 describe('rehype-attr function test case', () => {
   it('visit', async () => {
     const node: NodeData<Parent> = {