remark-custom-container - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

package.json

 {
   "name": "remark-custom-container",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "remark parser plugin for custom directive in markdown",
@@ -39,4 +39,4 @@ "author": "koka831",
     "@types/unist": "^2.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "eslint": "^8.28.0",
@@ -46,3 +46,3 @@ "eslint-config-prettier": "^8.5.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
     "rehype-stringify": "^9.0.3",
@@ -49,0 +49,0 @@ "remark": "^14.0.0",

README.md

 # remark-custom-container
 
+<p align="center">
+  <a href="https://github.com/koka831/remark-custom-container/actions" target="_blank">
+    <img src="https://badgen.net/github/checks/koka831/remark-custom-container" alt="ci status" height="18">
+  </a>
+  <a href="https://badge.fury.io/js/remark-custom-container" target="_blank">
+    <img src="https://badge.fury.io/js/remark-custom-container.svg" alt="npm version" height="18">
+  </a>
+  <a href="https://github.com/koka831/remark-custom-container/blob/master/LICENSE" target="_blank">
+    <img src="https://badgen.net/github/license/koka831/remark-custom-container" alt="license" height="18">
+  </a>
+
+</p>
+
 [remarkjs][remarkjs] parser plugin for custom directive (compatible with new parser in remark. see [#536][536])
@@ -48,3 +61,3 @@
 
-import container from "remark-custom-container"
+import container from "remark-custom-container";
 
@@ -54,3 +67,3 @@ const html = await remark()
   .use(remark2rehype)
-  .use(stringify)
+  .use(stringify);
 ```
@@ -62,9 +75,57 @@
 use(container, {
-  className: string, // default to "remark-container",
-  containerTag: string // default to "div"
+  className: string, // optional, default to "remark-container",
+  containerTag: string, // optional, default to "div"
+  titleElement: Record<string, unknown> | null, // optional, default to { className: string[] }
+  additionalProperties: (className?: string, title?: string) => Record<string, unknown>, // optional, default to undefined
 })
 ```
 
+**`className`** is an option to provide custom className other than `remark-container`.
+
+**`containerTag`** is an option to provide custom HTML tag for the container other than `div`.
+
+**`titleElement`** is an option to construct custom _inner title div element_. The default is pre-defined `{ className: string[] }`, so the plugin is going to add an _inner title div element_ as a default. You can provide an object in order to set additional properties for the _inner title div element_. If you set `null`, the plugin is going to remove the _inner title div element_ like below.
+
+```html
+<div class="remark-container className">
+  Container Body
+</div>
+```
+
+**`additionalProperties`** is an option to set additional properties for the custom container. It is a callback function that takes the `className` and the `title` as optional arguments and returns the object which is going to be used for adding additional properties into the container.
+
+example:
+
+```markdown
+::: warning My Custom Title
+
+my paragraph
+
+:::
+```
+
+```javascript
+use(container, {
+  className: "remark-custom-classname",
+  containerTag: "article",
+  titleElement: null,
+  additionalProperties: (className, title) => {
+    title,
+    ["data-type"]: className?.toLowerCase(),
+  }
+})
+```
+
+is going to produce the container below:
+
+```html
+<article class="remark-custom-classname warning" title="My Custom Title" data-type="warning">
+  <p>my paragraph</p>
+</article>
+```
+
+**Note :** The `containerTag` is not prefered to be a `span` or similar, if there is an inner title `div` element. This may cause a problem because of a `div` element under a `span` element.
+
 [remarkjs]: https://github.com/remarkjs/remark
 [536]: https://github.com/remarkjs/remark/pull/536
 [vuepress-plugin-container]: https://github.com/vuepress/vuepress-community/tree/main/packages/vuepress-plugin-container

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15217

19.7%

Number of lines in readme file

129

89.71%

Number of medium supply chain risk alerts

0

-100%

No dependency changes