@md-plugins/md-plugin-containers 0.1.0-alpha.9 → 0.1.0-beta.0
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.
- package/README.md +64 -33
- package/dist/index.d.mts +11 -6
- package/dist/index.d.ts +11 -6
- package/dist/index.mjs +1 -1
- package/package.json +15 -17
package/README.md
CHANGED
|
@@ -14,12 +14,12 @@ A **Markdown-It** plugin that provides custom container support for enhanced Mar
|
|
|
14
14
|
Install the plugin via your preferred package manager:
|
|
15
15
|
|
|
16
16
|
```bash
|
|
17
|
-
#
|
|
18
|
-
npm install @md-plugins/md-plugin-containers
|
|
19
|
-
# Or with Yarn:
|
|
20
|
-
yarn add @md-plugins/md-plugin-containers
|
|
21
|
-
# Or with pnpm:
|
|
17
|
+
# with pnpm:
|
|
22
18
|
pnpm add @md-plugins/md-plugin-containers
|
|
19
|
+
# with Yarn:
|
|
20
|
+
yarn add @md-plugins/md-plugin-containers
|
|
21
|
+
# with npm:
|
|
22
|
+
npm install @md-plugins/md-plugin-containers
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
## Usage
|
|
@@ -30,34 +30,54 @@ pnpm add @md-plugins/md-plugin-containers
|
|
|
30
30
|
import MarkdownIt from 'markdown-it'
|
|
31
31
|
import { containersPlugin } from '@md-plugins/md-plugin-containers'
|
|
32
32
|
import container from 'markdown-it-container'
|
|
33
|
+
import type {
|
|
34
|
+
ContainerDetails,
|
|
35
|
+
CreateContainerFn,
|
|
36
|
+
Container,
|
|
37
|
+
ContainerOptions,
|
|
38
|
+
} from '@md-plugins/md-plugin-containers'
|
|
33
39
|
|
|
34
40
|
const md = new MarkdownIt()
|
|
35
41
|
|
|
36
|
-
const containers = [
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
const containers: ContainerDetails[] = [
|
|
43
|
+
{ type: 'tip', defaultTitle: 'TIP' },
|
|
44
|
+
{ type: 'warning', defaultTitle: 'WARNING' },
|
|
45
|
+
{ type: 'danger', defaultTitle: 'WARNING' },
|
|
46
|
+
{ type: 'details', defaultTitle: 'Details' },
|
|
47
|
+
]
|
|
41
48
|
|
|
42
|
-
|
|
49
|
+
const createContainer: CreateContainerFn = (
|
|
50
|
+
container: Container,
|
|
51
|
+
containerType: string,
|
|
52
|
+
defaultTitle: string,
|
|
53
|
+
md: MarkdownIt,
|
|
54
|
+
): [Container, string, ContainerOptions] => {
|
|
43
55
|
const containerTypeLen = containerType.length
|
|
44
56
|
|
|
45
57
|
return [
|
|
46
58
|
container,
|
|
47
59
|
containerType,
|
|
48
60
|
{
|
|
49
|
-
render(tokens, idx) {
|
|
61
|
+
render(tokens: Token[], idx: number): string {
|
|
50
62
|
const token = tokens[idx]
|
|
51
|
-
|
|
63
|
+
if (!token) {
|
|
64
|
+
return ''
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// Get the title from token info or use defaultTitle
|
|
68
|
+
const rawTitle = token.info.trim().slice(containerTypeLen).trim() || defaultTitle
|
|
69
|
+
|
|
70
|
+
// Process the title as inline markdown
|
|
71
|
+
const titleHtml = md ? md.renderInline(rawTitle) : rawTitle
|
|
52
72
|
|
|
53
73
|
if (containerType === 'details') {
|
|
54
74
|
return token.nesting === 1
|
|
55
|
-
? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${
|
|
75
|
+
? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${titleHtml}</summary>\n`
|
|
56
76
|
: '</details>\n'
|
|
57
77
|
}
|
|
58
78
|
|
|
59
79
|
return token.nesting === 1
|
|
60
|
-
? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${
|
|
80
|
+
? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${titleHtml}</p>\n`
|
|
61
81
|
: '</div>\n'
|
|
62
82
|
},
|
|
63
83
|
},
|
|
@@ -67,11 +87,11 @@ function createContainer(container, containerType, defaultTitle) {
|
|
|
67
87
|
md.use(containersPlugin, containers, createContainer)
|
|
68
88
|
|
|
69
89
|
const markdownContent = `
|
|
70
|
-
:::
|
|
71
|
-
This is a
|
|
90
|
+
::: tip
|
|
91
|
+
This is a tip.
|
|
72
92
|
:::
|
|
73
93
|
|
|
74
|
-
:::warning
|
|
94
|
+
::: warning
|
|
75
95
|
This is a warning!
|
|
76
96
|
:::
|
|
77
97
|
`
|
|
@@ -86,12 +106,14 @@ console.log('Rendered Output:', renderedOutput)
|
|
|
86
106
|
The rendered output will look like this:
|
|
87
107
|
|
|
88
108
|
```html
|
|
89
|
-
<div class="note">
|
|
90
|
-
<p>
|
|
109
|
+
<div class="markdown-note markdown-note--tip">
|
|
110
|
+
<p class="markdown-note__title">TIP</p>
|
|
111
|
+
<p>This is a tip container.</p>
|
|
91
112
|
</div>
|
|
92
113
|
|
|
93
|
-
<div class="warning">
|
|
94
|
-
<p>
|
|
114
|
+
<div class="markdown-note markdown-note--warning">
|
|
115
|
+
<p class="markdown-note__title">WARNING</p>
|
|
116
|
+
<p>This is a warning container.</p>
|
|
95
117
|
</div>
|
|
96
118
|
```
|
|
97
119
|
|
|
@@ -99,17 +121,19 @@ The rendered output will look like this:
|
|
|
99
121
|
|
|
100
122
|
The `md-plugin-containers` plugin supports the following options:
|
|
101
123
|
|
|
102
|
-
| Option
|
|
103
|
-
|
|
|
104
|
-
| containers
|
|
105
|
-
| render
|
|
124
|
+
| Option | Type | Default | Description |
|
|
125
|
+
| ------------ | --------------------------------------------- | ------- | ------------------------------------------------------- |
|
|
126
|
+
| containers | Array<{ type: string; defaultTitle: string }> | [] | List of containers with their types and default titles. |
|
|
127
|
+
| render | Function | null | Custom rendering function for containers. |
|
|
128
|
+
| defaultTitle | string | null | Default title for containers. |
|
|
129
|
+
| md | MarkdownIt | null | Markdown-It instance for rendering. |
|
|
106
130
|
|
|
107
131
|
## Defining Custom Containers
|
|
108
132
|
|
|
109
133
|
You can define custom containers with their own styles or components:
|
|
110
134
|
|
|
111
135
|
```js
|
|
112
|
-
function createContainer(container, containerType, defaultTitle) {
|
|
136
|
+
function createContainer(container, containerType, defaultTitle, md) {
|
|
113
137
|
const containerTypeLen = containerType.length
|
|
114
138
|
|
|
115
139
|
return [
|
|
@@ -118,16 +142,19 @@ function createContainer(container, containerType, defaultTitle) {
|
|
|
118
142
|
{
|
|
119
143
|
render(tokens, idx) {
|
|
120
144
|
const token = tokens[idx]
|
|
121
|
-
const
|
|
145
|
+
const rawTitle = token.info.trim().slice(containerTypeLen).trim() || defaultTitle
|
|
146
|
+
|
|
147
|
+
// Process the title as inline markdown
|
|
148
|
+
const titleHtml = md ? md.renderInline(rawTitle) : rawTitle
|
|
122
149
|
|
|
123
150
|
if (containerType === 'details') {
|
|
124
151
|
return token.nesting === 1
|
|
125
|
-
? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${
|
|
152
|
+
? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${titleHtml}</summary>\n`
|
|
126
153
|
: '</details>\n'
|
|
127
154
|
}
|
|
128
155
|
|
|
129
156
|
return token.nesting === 1
|
|
130
|
-
? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${
|
|
157
|
+
? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${titleHtml}</p>\n`
|
|
131
158
|
: '</div>\n'
|
|
132
159
|
},
|
|
133
160
|
},
|
|
@@ -140,7 +167,7 @@ function createContainer(container, containerType, defaultTitle) {
|
|
|
140
167
|
Containers can include titles by default or allow custom titles to be specified:
|
|
141
168
|
|
|
142
169
|
```markup
|
|
143
|
-
:::note Custom Note Title
|
|
170
|
+
::: note Custom Note Title
|
|
144
171
|
This is a custom note with a title.
|
|
145
172
|
:::
|
|
146
173
|
```
|
|
@@ -159,8 +186,8 @@ Rendered Output:
|
|
|
159
186
|
Containers can be nested if your rendering logic supports it:
|
|
160
187
|
|
|
161
188
|
```markup
|
|
162
|
-
:::note Outer Note
|
|
163
|
-
:::warning Inner Warning
|
|
189
|
+
::: note Outer Note
|
|
190
|
+
::: warning Inner Warning
|
|
164
191
|
Be cautious!
|
|
165
192
|
::::::
|
|
166
193
|
```
|
|
@@ -184,6 +211,10 @@ To run the tests for this plugin, use the following command:
|
|
|
184
211
|
pnpm test
|
|
185
212
|
```
|
|
186
213
|
|
|
214
|
+
## Documentation
|
|
215
|
+
|
|
216
|
+
In case this README falls out of date, please refer to the [documentation](https://md-plugins.netlify.app/md-plugins/containers/overview) for the latest information.
|
|
217
|
+
|
|
187
218
|
## License
|
|
188
219
|
|
|
189
220
|
This plugin is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.
|
package/dist/index.d.mts
CHANGED
|
@@ -3,7 +3,7 @@ import Token from 'markdown-it/lib/token.mjs';
|
|
|
3
3
|
import container from 'markdown-it-container';
|
|
4
4
|
|
|
5
5
|
type Container = typeof container;
|
|
6
|
-
type CreateContainerFn = (container: Container, type: string, defaultTitle: string) => [Container, string, any?];
|
|
6
|
+
type CreateContainerFn = (container: Container, type: string, defaultTitle: string, md: MarkdownIt) => [Container, string, any?];
|
|
7
7
|
interface ContainerDetails {
|
|
8
8
|
type: string;
|
|
9
9
|
defaultTitle: string;
|
|
@@ -32,6 +32,7 @@ interface ContainerOptions {
|
|
|
32
32
|
* container: Container,
|
|
33
33
|
* containerType: string,
|
|
34
34
|
* defaultTitle: string
|
|
35
|
+
* md: MarkdownIt,
|
|
35
36
|
* ): [Container, string, ContainerOptions] {
|
|
36
37
|
* const containerTypeLen = containerType.length;
|
|
37
38
|
*
|
|
@@ -41,17 +42,20 @@ interface ContainerOptions {
|
|
|
41
42
|
* {
|
|
42
43
|
* render(tokens: Token[], idx: number): string {
|
|
43
44
|
* const token = tokens[idx];
|
|
44
|
-
*
|
|
45
|
-
*
|
|
45
|
+
* // Get the title from token info or use defaultTitle
|
|
46
|
+
* const rawTitle = token.info.trim().slice(containerTypeLen).trim() || defaultTitle
|
|
47
|
+
*
|
|
48
|
+
* // Process the title as inline markdown
|
|
49
|
+
* const titleHtml = md ? md.renderInline(rawTitle) : rawTitle
|
|
46
50
|
*
|
|
47
51
|
* if (containerType === 'details') {
|
|
48
52
|
* return token.nesting === 1
|
|
49
|
-
* ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${
|
|
53
|
+
* ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${titleHtml}</summary>\n`
|
|
50
54
|
* : '</details>\n';
|
|
51
55
|
* }
|
|
52
56
|
*
|
|
53
57
|
* return token.nesting === 1
|
|
54
|
-
* ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${
|
|
58
|
+
* ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${titleHtml}</p>\n`
|
|
55
59
|
* : '</div>\n';
|
|
56
60
|
* },
|
|
57
61
|
* },
|
|
@@ -61,4 +65,5 @@ interface ContainerOptions {
|
|
|
61
65
|
*/
|
|
62
66
|
declare function containersPlugin(md: MarkdownIt, containers: ContainerDetails[], createContainer: CreateContainerFn): void;
|
|
63
67
|
|
|
64
|
-
export {
|
|
68
|
+
export { containersPlugin };
|
|
69
|
+
export type { Container, ContainerDetails, ContainerOptions, CreateContainerFn };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import Token from 'markdown-it/lib/token.mjs';
|
|
|
3
3
|
import container from 'markdown-it-container';
|
|
4
4
|
|
|
5
5
|
type Container = typeof container;
|
|
6
|
-
type CreateContainerFn = (container: Container, type: string, defaultTitle: string) => [Container, string, any?];
|
|
6
|
+
type CreateContainerFn = (container: Container, type: string, defaultTitle: string, md: MarkdownIt) => [Container, string, any?];
|
|
7
7
|
interface ContainerDetails {
|
|
8
8
|
type: string;
|
|
9
9
|
defaultTitle: string;
|
|
@@ -32,6 +32,7 @@ interface ContainerOptions {
|
|
|
32
32
|
* container: Container,
|
|
33
33
|
* containerType: string,
|
|
34
34
|
* defaultTitle: string
|
|
35
|
+
* md: MarkdownIt,
|
|
35
36
|
* ): [Container, string, ContainerOptions] {
|
|
36
37
|
* const containerTypeLen = containerType.length;
|
|
37
38
|
*
|
|
@@ -41,17 +42,20 @@ interface ContainerOptions {
|
|
|
41
42
|
* {
|
|
42
43
|
* render(tokens: Token[], idx: number): string {
|
|
43
44
|
* const token = tokens[idx];
|
|
44
|
-
*
|
|
45
|
-
*
|
|
45
|
+
* // Get the title from token info or use defaultTitle
|
|
46
|
+
* const rawTitle = token.info.trim().slice(containerTypeLen).trim() || defaultTitle
|
|
47
|
+
*
|
|
48
|
+
* // Process the title as inline markdown
|
|
49
|
+
* const titleHtml = md ? md.renderInline(rawTitle) : rawTitle
|
|
46
50
|
*
|
|
47
51
|
* if (containerType === 'details') {
|
|
48
52
|
* return token.nesting === 1
|
|
49
|
-
* ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${
|
|
53
|
+
* ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${titleHtml}</summary>\n`
|
|
50
54
|
* : '</details>\n';
|
|
51
55
|
* }
|
|
52
56
|
*
|
|
53
57
|
* return token.nesting === 1
|
|
54
|
-
* ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${
|
|
58
|
+
* ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${titleHtml}</p>\n`
|
|
55
59
|
* : '</div>\n';
|
|
56
60
|
* },
|
|
57
61
|
* },
|
|
@@ -61,4 +65,5 @@ interface ContainerOptions {
|
|
|
61
65
|
*/
|
|
62
66
|
declare function containersPlugin(md: MarkdownIt, containers: ContainerDetails[], createContainer: CreateContainerFn): void;
|
|
63
67
|
|
|
64
|
-
export {
|
|
68
|
+
export { containersPlugin };
|
|
69
|
+
export type { Container, ContainerDetails, ContainerOptions, CreateContainerFn };
|
package/dist/index.mjs
CHANGED
|
@@ -10,7 +10,7 @@ function containersPlugin(md, containers, createContainer) {
|
|
|
10
10
|
}
|
|
11
11
|
containers.forEach(({ type, defaultTitle }) => {
|
|
12
12
|
try {
|
|
13
|
-
md.use(...createContainer(container, type, defaultTitle));
|
|
13
|
+
md.use(...createContainer(container, type, defaultTitle, md));
|
|
14
14
|
} catch (error) {
|
|
15
15
|
console.error(`Failed to create container for type: ${type}`, error);
|
|
16
16
|
}
|
package/package.json
CHANGED
|
@@ -1,24 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@md-plugins/md-plugin-containers",
|
|
3
|
-
"version": "0.1.0-
|
|
3
|
+
"version": "0.1.0-beta.0",
|
|
4
4
|
"description": "A markdown-it plugin for handling custom containers.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"markdown-it",
|
|
7
7
|
"quasarframework",
|
|
8
|
-
"
|
|
9
|
-
"
|
|
8
|
+
"types",
|
|
9
|
+
"vue"
|
|
10
10
|
],
|
|
11
11
|
"homepage": "https://github.com/md-plugins",
|
|
12
12
|
"bugs": {
|
|
13
13
|
"url": "https://github.com/md-plugins/md-plugins/issues"
|
|
14
14
|
},
|
|
15
|
+
"license": "MIT",
|
|
16
|
+
"author": "hawkeye64 <galbraith64@gmail.com>",
|
|
15
17
|
"repository": {
|
|
16
18
|
"type": "git",
|
|
17
19
|
"url": "git+https://github.com/md-plugins/md-plugins.git"
|
|
18
20
|
},
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
+
"files": [
|
|
22
|
+
"./dist"
|
|
23
|
+
],
|
|
21
24
|
"type": "module",
|
|
25
|
+
"module": "./dist/index.mjs",
|
|
26
|
+
"types": "./dist/index.d.ts",
|
|
22
27
|
"exports": {
|
|
23
28
|
".": {
|
|
24
29
|
"import": {
|
|
@@ -27,22 +32,15 @@
|
|
|
27
32
|
}
|
|
28
33
|
}
|
|
29
34
|
},
|
|
30
|
-
"module": "./dist/index.mjs",
|
|
31
|
-
"types": "./dist/index.d.ts",
|
|
32
|
-
"files": [
|
|
33
|
-
"./dist"
|
|
34
|
-
],
|
|
35
|
-
"dependencies": {
|
|
36
|
-
"markdown-it": "^14.1.0",
|
|
37
|
-
"markdown-it-container": "^4.0.0",
|
|
38
|
-
"@md-plugins/shared": "0.1.0-alpha.9"
|
|
39
|
-
},
|
|
40
35
|
"publishConfig": {
|
|
41
36
|
"access": "public"
|
|
42
37
|
},
|
|
43
38
|
"devDependencies": {
|
|
44
|
-
"@types/markdown-it
|
|
45
|
-
"@types/markdown-it": "^
|
|
39
|
+
"@types/markdown-it": "^14.1.2",
|
|
40
|
+
"@types/markdown-it-container": "^4.0.0",
|
|
41
|
+
"markdown-it": "^14.1.1",
|
|
42
|
+
"markdown-it-container": "^4.0.0",
|
|
43
|
+
"@md-plugins/shared": "0.1.0-beta.0"
|
|
46
44
|
},
|
|
47
45
|
"peerDependencies": {
|
|
48
46
|
"markdown-it": "^14.1.0",
|