feat: add codeBlockParames option.

Author: jaywcjlove

README.md

@@ -265,6 +265,7 @@ const htmlStr = rehype()
 ```
 
 Output: 
+
 ```html
 <h1 style="color:pink;">This is a title</h1>
 ```
@@ -306,6 +307,12 @@ Output:
 > Default Value: `data`  
 > Value: `data`, `string`, `attr`
 
+### `codeBlockParames`
+
+Code block passing parameters
+
+> Default Value: `true`  
+
 ## Related
 
 - [`rehype-video`](https://github.com/jaywcjlove/rehype-video) Add improved video syntax: links to `.mp4` and `.mov` turn into videos.

src/index.ts

@@ -11,9 +11,7 @@ export type RehypeAttrsOptions = {
    * text
    * <!--rehype:title=Rehype Attrs&abc=2-->
    * ```
-   * 
-   * ⇣⇣⇣⇣⇣⇣
-   * 
+   * 👇👇👇👇👇
    * ```html
    * <p data-config="data-config='[object Object]'">text</p>
    * ```
@@ -25,7 +23,7 @@ export type RehypeAttrsOptions = {
    * <!--rehype:title=Rehype Attrs-->
    * ```
    * 
-   * ⇣⇣⇣⇣⇣⇣
+   * 👇👇👇👇👇
    * 
    * ```html
    * <p data-config="{&#x22;title&#x22;:&#x22;Rehype Attrs&#x22;,&#x22;rehyp&#x22;:true}">text</p>
@@ -37,31 +35,32 @@ export type RehypeAttrsOptions = {
    * text
    * <!--rehype:title=Rehype Attrs-->
    * ```
-   * ⇣⇣⇣⇣⇣⇣
+   * 👇👇👇👇👇
    * ```html
    * <p title="Rehype Attrs">text</p>
    * ```
+   * @default `data`
    */
-  properties: 'data' | 'string' | 'attr';
-}
-
-const defaultOptions: RehypeAttrsOptions = {
-  properties: 'data',
+  properties?: 'data' | 'string' | 'attr';
+  /**
+   * Code block passing parameters
+   */
+  codeBlockParames?: boolean;
 }
 
-const rehypeAttrs: Plugin<[RehypeAttrsOptions?], Root> = (options) => {
-  const opts = { ...defaultOptions, ...options }
+const rehypeAttrs: Plugin<[RehypeAttrsOptions?], Root> = (options = {}) => {
+  const { properties = 'data', codeBlockParames = true } = options;
   return (tree) => {
     visit(tree, 'element', (node, index, parent) => {
-      if (node.tagName === 'pre' && node && Array.isArray(node.children) && parent && Array.isArray(parent.children) && parent.children.length > 1) {
+      if (codeBlockParames && node.tagName === 'pre' && node && Array.isArray(node.children) && parent && Array.isArray(parent.children) && parent.children.length > 1) {
         const firstChild = node.children[0] as Element;
         if (firstChild && firstChild.tagName === 'code' && typeof index === 'number') {
           const child = prevChild(parent.children as Literal[], index);
           if (child) {
             const attr = getCommentObject(child);
             if (Object.keys(attr).length > 0) {
               node.properties = { ...node.properties, ...{ 'data-type': 'rehyp' } }
-              firstChild.properties = propertiesHandle(firstChild.properties, attr, opts.properties) as Properties
+              firstChild.properties = propertiesHandle(firstChild.properties, attr, properties) as Properties
             }
           }
         }
@@ -72,7 +71,7 @@ const rehypeAttrs: Plugin<[RehypeAttrsOptions?], Root> = (options) => {
         if (child) {
           const attr = getCommentObject(child as Comment)
           if (Object.keys(attr).length > 0) {
-            node.properties = propertiesHandle(node.properties, attr, opts.properties) as Properties
+            node.properties = propertiesHandle(node.properties, attr, properties) as Properties
           }
         }
       }

test/index.test.ts

@@ -76,6 +76,18 @@ describe('rehype-attr function test case', () => {
 })
 
 describe('rehype-attr test case', () => {
+  it('default codeBlockParames=false', async () => {
+    const expected = `<!--rehype:title=Rehype Attrs-->\n<pre><code class="language-js">console.log('')\n</code></pre>`
+    const htmlStr = unified()
+      .use(remarkParse)
+      .use(remark2rehype, { allowDangerousHtml: true })
+      .use(rehypeRaw)
+      .use(rehypeAttrs, { codeBlockParames: false })
+      .use(stringify)
+      .processSync(mrkStr)
+      .toString()
+      expect(htmlStr).toEqual(expected);
+  });
   it('default options="data"', async () => {
     const expected = `<!--rehype:title=Rehype Attrs-->\n<pre data-type="rehyp"><code class="language-js" data-config="[object Object]">console.log('')\n</code></pre>`
     const htmlStr = unified()
@@ -297,6 +309,11 @@ describe('rehype-attr test case', () => {
       markdown: '#### This is a title\n<!--rehype:style=background-color: rgb(235 217 78/var(--bg-opacity));-->',
       expected: '<h4 style="background-color: rgb(235 217 78/var(--bg-opacity));">This is a title</h4>\n<!--rehype:style=background-color: rgb(235 217 78/var(--bg-opacity));-->',
     },
+    {
+      title: 'options="attr" - test identifier',
+      markdown: '#### This is a title\n<!--rehype:className=test test2-->',
+      expected: '<h4 class="test test2">This is a title</h4>\n<!--rehype:className=test test2-->',
+    },
   ].forEach((data, idx) => {
     it(data.title, async () => {
       const htmlStr = unified()
@@ -334,6 +351,16 @@ describe('rehype-attr test case', () => {
 
 
   [
+    {
+      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> ???????????xxxxxxx',
+      markdown: '<p class="hello">text</p><!--rehype:class=text-->',
+      expected: '<p class="hello" class="text">text</p><!--rehype:class=text-->',
+    },
     {
       title: 'options="attr" - <p>',
       markdown: '<p>text</p><!--rehype:id=text-->',