mikel-markdown 0.19.1 → 0.20.1
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 +19 -1
- package/index.js +23 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -52,7 +52,25 @@ m.use(mikelMarkdown());
|
|
|
52
52
|
|
|
53
53
|
And finally, compile your template:
|
|
54
54
|
```javascript
|
|
55
|
-
const result = m({}); // --> 'Hello <strong>world</strong>'
|
|
55
|
+
const result = m({}); // --> '<p>Hello <strong>world</strong></p>'
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Helpers
|
|
59
|
+
|
|
60
|
+
### `#markdown`
|
|
61
|
+
|
|
62
|
+
The `#markdown` helper is used to convert Markdown content into HTML markup. It takes the content inside the helper and processes it using a Markdown parser, returning the resulting HTML.
|
|
63
|
+
|
|
64
|
+
```javascript
|
|
65
|
+
m(`{{#markdown}}Hello **world**{{/markdown}}`); // --> '<p>Hello <strong>world</strong></p>'
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### `#inlineMarkdown`
|
|
69
|
+
|
|
70
|
+
The `#inlineMarkdown` helper is used to convert inline Markdown content into HTML markup. This helper is useful for rendering Markdown content that is not block-level, such as inline code, emphasis, or links.
|
|
71
|
+
|
|
72
|
+
```javascript
|
|
73
|
+
m(`{{#inlineMarkdown}}Hello **world**{{/inlineMarkdown}}`); // --> 'Hello <strong>world</strong>'
|
|
56
74
|
```
|
|
57
75
|
|
|
58
76
|
## License
|
package/index.js
CHANGED
|
@@ -9,6 +9,11 @@ const escapedChars = {
|
|
|
9
9
|
const escape = s => s.toString().replace(/[&<>\"']/g, m => escapedChars[m]);
|
|
10
10
|
|
|
11
11
|
// @description custom method to render the provided tag and content
|
|
12
|
+
// @param tag {string} tag to render
|
|
13
|
+
// @param props {object} attributes to add to the tag
|
|
14
|
+
// @param content {string} content to add to the tag
|
|
15
|
+
// @return {string} the rendered tag
|
|
16
|
+
// @example render("div", {class: "my-class"}, "Hello world") --> '<div class="my-class">Hello world</div>'
|
|
12
17
|
const render = (tag, props = {}, content = "") => {
|
|
13
18
|
const attrs = Object.keys(props).filter(k => !!props[k]).map(k => `${k}="${props[k]}"`);
|
|
14
19
|
if (tag === "hr" || tag === "img") {
|
|
@@ -17,7 +22,8 @@ const render = (tag, props = {}, content = "") => {
|
|
|
17
22
|
return `<${[tag, ...attrs].join(" ")}>${content}</${tag}>`;
|
|
18
23
|
};
|
|
19
24
|
|
|
20
|
-
|
|
25
|
+
// @description all available expressions
|
|
26
|
+
const allExpressions = {
|
|
21
27
|
pre: {
|
|
22
28
|
regex: /(?:^```(?:[^\n]*)\n([\s\S]*?)\n``` *$)/gm,
|
|
23
29
|
replace: (args, cn) => render("pre", {class: cn.pre}, escape(args[1])),
|
|
@@ -35,7 +41,7 @@ const expressions = {
|
|
|
35
41
|
replace: (args, cn) => render("code", {class: cn.code}, escape(args[1])),
|
|
36
42
|
},
|
|
37
43
|
image: {
|
|
38
|
-
regex:
|
|
44
|
+
regex: /\!\[([^\]]*?)\]\(([^)]*?)\)/g,
|
|
39
45
|
replace: (args, cn) => render("img", {class: cn.image, alt: args[1], src: args[2]}),
|
|
40
46
|
},
|
|
41
47
|
table: {
|
|
@@ -104,15 +110,17 @@ const expressions = {
|
|
|
104
110
|
}
|
|
105
111
|
};
|
|
106
112
|
|
|
113
|
+
// @description inline expressions
|
|
114
|
+
const inlineExpressions = Object.fromEntries(["link", "strong", "emphasis", "code"].map(key => {
|
|
115
|
+
return [key, allExpressions[key]];
|
|
116
|
+
}));
|
|
117
|
+
|
|
107
118
|
// @description markdown parser
|
|
108
|
-
const parser = (str, options = {}) => {
|
|
119
|
+
const parser = (str = "", options = {}) => {
|
|
109
120
|
const classNames = options?.classNames || {}; // custom classNames
|
|
121
|
+
const expressions = options?.expressions || allExpressions; // custom expressions
|
|
110
122
|
const ignoredBlocks = []; // chunks to ignore
|
|
111
123
|
str = str.replace(/\r\n/g, "\n");
|
|
112
|
-
// replace all <script> tags
|
|
113
|
-
// str = str.replace(/<script[^\0]*?>([^\0]*?)<\/script>/gmi, function (match, content) {
|
|
114
|
-
// return "<script>" + content + "</script>";
|
|
115
|
-
// });
|
|
116
124
|
// replace all expressions
|
|
117
125
|
Object.keys(expressions).forEach(key => {
|
|
118
126
|
str = str.replace(expressions[key].regex, (...args) => {
|
|
@@ -129,10 +137,6 @@ const parser = (str, options = {}) => {
|
|
|
129
137
|
str = str.replace(expressions[key].afterRegex, "");
|
|
130
138
|
}
|
|
131
139
|
});
|
|
132
|
-
// Replace all line breaks expressions
|
|
133
|
-
// str = str.replace(/^\n\n+/gm, function () {
|
|
134
|
-
// return renderer("br", {});
|
|
135
|
-
// });
|
|
136
140
|
// Replace all the ignored blocks
|
|
137
141
|
for (let i = ignoredBlocks.length - 1; i >= 0; i--) {
|
|
138
142
|
str = str.replace(`<pre>{IGNORED%${i}}</pre>`, ignoredBlocks[i]);
|
|
@@ -148,13 +152,20 @@ const markdownPlugin = (options = {}) => {
|
|
|
148
152
|
markdown: params => {
|
|
149
153
|
return parser(params.fn(params.data) || "", options);
|
|
150
154
|
},
|
|
155
|
+
inlineMarkdown: params => {
|
|
156
|
+
return parser(params.fn(params.data) || "", {
|
|
157
|
+
expressions: inlineExpressions,
|
|
158
|
+
...options,
|
|
159
|
+
});
|
|
160
|
+
},
|
|
151
161
|
},
|
|
152
162
|
};
|
|
153
163
|
};
|
|
154
164
|
|
|
155
165
|
// assign additional options for this plugin
|
|
156
166
|
markdownPlugin.parser = parser;
|
|
157
|
-
markdownPlugin.
|
|
167
|
+
markdownPlugin.render = render;
|
|
168
|
+
markdownPlugin.expressions = allExpressions;
|
|
158
169
|
|
|
159
170
|
// export the plugin
|
|
160
171
|
export default markdownPlugin;
|