feat: add tagName option. #4

jaywcjlove · Nov 1, 2024 · f5c617e · f5c617e
1 parent 718850f
commit f5c617e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -72,6 +72,27 @@ The output HTML will be:
 </div>
 ```
 
+## Wrap tag name with container
+
+```js
+let markdown = `> [!CAUTION] \n> Hello World`;
+const htmlStr = remark()
+  .use(remarkParse)
+  .use(remarkAlert, { tagName: "blockquote" })
+  .use(remarkRehype)
+  .use(rehypeStringify)
+  .processSync(markdown).toString()
+```
+
+The output HTML will be:
+
+```html
+<blockquote class="markdown-alert markdown-alert-caution" dir="auto">
+<p class="markdown-alert-title" dir="auto"><svg class="octicon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>CAUTION</p>
+<p>Hello World</p>
+</blockquote>
+```
+
 ## Styling
 
 You can mimic GitHub's alert style by adding the styles provided in the npm package to your CSS.

diff --git a/src/index.ts b/src/index.ts
@@ -11,15 +11,20 @@ type Option = {
    * 
    * Enabling legacyTitle allows modifying the title, but this is not GitHub standard.
    */
-  legacyTitle?: boolean
+  legacyTitle?: boolean;
+  /**
+   * The tag name of the alert container. default is `div`.
+   * or you can use `blockquote` for semantic HTML.
+   */
+  tagName?: string;
 }
 
 /**
  * Alerts are a Markdown extension based on the blockquote syntax that you can use to emphasize critical information.
  * On GitHub, they are displayed with distinctive colors and icons to indicate the significance of the content.
  * https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts
  */
-export const remarkAlert: Plugin<[Option?], Root> = ({ legacyTitle = false } = {}) => {
+export const remarkAlert: Plugin<[Option?], Root> = ({ legacyTitle = false, tagName = "div" } = {}) => {
   return (tree) => {
     visit(tree, "blockquote", (node, index, parent) => {
       let alertType = '';
@@ -60,7 +65,7 @@ export const remarkAlert: Plugin<[Option?], Root> = ({ legacyTitle = false } = {
 
       if (!!alertType) {
         node.data = {
-          hName: "div",
+          hName: tagName,
           hProperties: {
             class: `markdown-alert markdown-alert-${alertType}`,
             dir: 'auto'

diff --git a/test/index.test.ts b/test/index.test.ts
@@ -104,4 +104,14 @@ Urgent info that needs immediate user attention to avoid problems.</p>
 </blockquote>`;
   const htmlStr = remark().use(remarkParse).use(remarkAlert).use(remarkRehype).use(rehypeStringify).processSync(markdown).toString();
   expect(htmlStr).toEqual(html);
+});
+
+it('Alert `tagName` option test case 1', async () => {
+  const markdown = `> [!CAUTION] \n> Hello World`;
+  const html = `<blockquote class="markdown-alert markdown-alert-caution" dir="auto">
+<p class="markdown-alert-title" dir="auto"><svg class="octicon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>CAUTION</p>
+<p>Hello World</p>
+</blockquote>`;
+  const htmlStr = remark().use(remarkParse).use(remarkAlert, { tagName: "blockquote" }).use(remarkRehype).use(rehypeStringify).processSync(markdown).toString()
+  expect(htmlStr).toEqual(html);
 });