.github/workflows/ci.yml

@@ -8,10 +8,10 @@ jobs:
   build-deploy:
     runs-on: ubuntu-20.04
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 16
 
       - run: npm install
       - run: npm run build
@@ -22,7 +22,7 @@ jobs:
 
       - run: npm i coverage-badges-cli markdown-to-html-cli -g
       - run: coverage-badges
-      - run: markdown-to-html --output coverage/index.html
+      - run: markdown-to-html --output coverage/index.html --github-corners https://github.com/jaywcjlove/rehype-attr
 
       - name: Create Tag
         id: create_tag

.github/workflows/pull_request.yml

@@ -6,10 +6,10 @@ jobs:
   build-deploy:
     runs-on: ubuntu-20.04
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 16
 
       - run: npm install
       - run: npm run build

README.md

@@ -7,6 +7,7 @@ rehype-attr
 [![Build](https://github.com/jaywcjlove/rehype-attr/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/rehype-attr/actions/workflows/ci.yml)
 [![Coverage Status](https://jaywcjlove.github.io/rehype-attr/badges.svg)](https://jaywcjlove.github.io/rehype-attr/lcov-report/)
 [![npm bundle size](https://img.shields.io/bundlephobia/minzip/rehype-attr)](https://bundlephobia.com/result?p=rehype-attr)
+[![Repo Dependents](https://badgen.net/github/dependents-repo/jaywcjlove/rehype-attr)](https://github.com/jaywcjlove/rehype-attr/network/dependents)
 
 New syntax to add attributes to Markdown. `rehype-attr` like [`remark-attr`](https://github.com/arobase-che/remark-attr)
 
@@ -264,6 +265,7 @@ const htmlStr = rehype()
 ```
 
 Output: 
+
 ```html
 <h1 style="color:pink;">This is a title</h1>
 ```
@@ -305,10 +307,17 @@ 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.
 - [`rehype-rewrite`](https://github.com/jaywcjlove/rehype-rewrite) Rewrite element with rehype.
+- [`rehype-ignore`](https://github.com/jaywcjlove/rehype-ignore) Ignore content display via HTML comments, Shown in GitHub readme, excluded in HTML.
 - [`rehypejs`](https://github.com/rehypejs/rehype) HTML processor powered by plugins part of the @unifiedjs collective
 - [`remark-parse`](https://www.npmjs.com/package/remark-parse) remark plugin to parse Markdown
 - [`remark-rehype`](https://www.npmjs.com/package/remark-rehype) remark plugin to transform to rehype

package.json

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

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

@@ -67,15 +67,27 @@ describe('rehype-attr function test case', () => {
     expect(utils.propertiesHandle(null, {}, 'string')).toEqual({
       'data-config': '{\"rehyp\":true}'
     });
-    expect(utils.propertiesHandle(null, null, 'string')).toEqual({
+    expect(utils.propertiesHandle(null, (null as unknown as undefined), 'string')).toEqual({
       'data-config': '{\"rehyp\":true}'
     });
-    expect(utils.propertiesHandle(null, null, 'attr')).toEqual({});
+    expect(utils.propertiesHandle(null, (null as unknown as undefined), 'attr')).toEqual({});
     expect(utils.propertiesHandle(null, { a: 1 }, 'attr')).toEqual({ a: 1 });
   });
 })
 
 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()
@@ -123,7 +135,7 @@ describe('rehype-attr test case', () => {
     }, {
       title: 'options="attr" - Table 2 `\\n\\n` ???',
       markdown: '| Property | Description |\n |---- |---- |\n | 1 | 2 |\n<!--rehype:border=1-->',
-      expected: '<table><thead><tr><th>Property</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr><tr><td><!--rehype:border=1--></td><td></td></tr></tbody></table>',
+      expected: '<table border="1"><thead><tr><th>Property</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr></tbody></table>\n<!--rehype:border=1-->',
     }
   ].forEach((data, idx) => {
     it(data.title, async () => {
@@ -292,6 +304,16 @@ describe('rehype-attr test case', () => {
       markdown: '#### This is a title\n<!--wwww:data-bool=true',
       expected: '<h4>This is a title</h4>\n',
     },
+    {
+      title: 'options="attr" - test identifier',
+      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()
@@ -329,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-->',