@md-plugins/md-plugin-containers 0.1.0-alpha.7 → 0.1.0-alpha.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +58 -35
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -29,14 +29,42 @@ pnpm add @md-plugins/md-plugin-containers
29
29
  ```js
30
30
  import MarkdownIt from 'markdown-it'
31
31
  import { containersPlugin } from '@md-plugins/md-plugin-containers'
32
+ import container from 'markdown-it-container'
32
33
 
33
34
  const md = new MarkdownIt()
34
- md.use(containersPlugin, {
35
- containers: [
36
- { type: 'note', defaultTitle: 'Note' },
37
- { type: 'warning', defaultTitle: 'Warning' },
38
- ],
39
- })
35
+
36
+ const containers = [
37
+ { type: 'warning', defaultTitle: 'Warning' },
38
+ { type: 'tip', defaultTitle: 'Tip' },
39
+ { type: 'details', defaultTitle: 'Details' },
40
+ ]
41
+
42
+ function createContainer(container, containerType, defaultTitle) {
43
+ const containerTypeLen = containerType.length
44
+
45
+ return [
46
+ container,
47
+ containerType,
48
+ {
49
+ render(tokens, idx) {
50
+ const token = tokens[idx]
51
+ const title = token.info.trim().slice(containerTypeLen).trim() || defaultTitle
52
+
53
+ if (containerType === 'details') {
54
+ return token.nesting === 1
55
+ ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${title}</summary>\n`
56
+ : '</details>\n'
57
+ }
58
+
59
+ return token.nesting === 1
60
+ ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${title}</p>\n`
61
+ : '</div>\n'
62
+ },
63
+ },
64
+ ]
65
+ }
66
+
67
+ md.use(containersPlugin, containers, createContainer)
40
68
 
41
69
  const markdownContent = `
42
70
  :::note
@@ -81,35 +109,30 @@ The `md-plugin-containers` plugin supports the following options:
81
109
  You can define custom containers with their own styles or components:
82
110
 
83
111
  ```js
84
- md.use(containersPlugin, {
85
- containers: [
86
- { type: 'tip', defaultTitle: 'Tip' },
87
- { type: 'important', defaultTitle: 'Important' },
88
- ],
89
- })
90
- ```
91
-
92
- ## Advanced Usage
93
-
94
- ### Custom Rendering Logic
95
-
96
- Override the default rendering logic for containers:
97
-
98
- ```js
99
- md.use(containersPlugin, {
100
- containers: [{ type: 'note', defaultTitle: 'Note' }],
101
- render(tokens, idx) {
102
- const token = tokens[idx]
103
- if (token.nesting === 1) {
104
- // Opening tag
105
- const title = token.info.trim() || 'Note'
106
- return `<div class="custom-note"><strong>${title}:</strong>\n`
107
- } else {
108
- // Closing tag
109
- return `</div>\n`
110
- }
111
- },
112
- })
112
+ function createContainer(container, containerType, defaultTitle) {
113
+ const containerTypeLen = containerType.length
114
+
115
+ return [
116
+ container,
117
+ containerType,
118
+ {
119
+ render(tokens, idx) {
120
+ const token = tokens[idx]
121
+ const title = token.info.trim().slice(containerTypeLen).trim() || defaultTitle
122
+
123
+ if (containerType === 'details') {
124
+ return token.nesting === 1
125
+ ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${title}</summary>\n`
126
+ : '</details>\n'
127
+ }
128
+
129
+ return token.nesting === 1
130
+ ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${title}</p>\n`
131
+ : '</div>\n'
132
+ },
133
+ },
134
+ ]
135
+ }
113
136
  ```
114
137
 
115
138
  ## Adding Titles
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@md-plugins/md-plugin-containers",
3
- "version": "0.1.0-alpha.7",
3
+ "version": "0.1.0-alpha.9",
4
4
  "description": "A markdown-it plugin for handling custom containers.",
5
5
  "keywords": [
6
6
  "markdown-it",
@@ -35,7 +35,7 @@
35
35
  "dependencies": {
36
36
  "markdown-it": "^14.1.0",
37
37
  "markdown-it-container": "^4.0.0",
38
- "@md-plugins/shared": "0.1.0-alpha.7"
38
+ "@md-plugins/shared": "0.1.0-alpha.9"
39
39
  },
40
40
  "publishConfig": {
41
41
  "access": "public"