= (md, options) => {
31 | const isEnableInlineCss = options?.isEnableInlineCss ?? false;
32 |
33 | const defaultRender = md.renderer.rules?.fence;
34 | if (!defaultRender) {
35 | throw new Error("defaultRender is undefined");
36 | }
37 |
38 | md.renderer.rules.fence = (
39 | tokens: Token[],
40 | idx: number,
41 | options: Options,
42 | env: Env,
43 | self: Renderer
44 | ) => {
45 | const token = tokens[idx];
46 | const orgInfo = token.info;
47 | const info = token.info ? String(token.info).trim() : "";
48 | let parsedFenceInfo: ParsedFenceInfo;
49 |
50 | if (info) {
51 | parsedFenceInfo = parseInfo(info);
52 | updateTokenInfo(token, parsedFenceInfo);
53 | } else {
54 | parsedFenceInfo = { langName: "", fileName: "", langAttrs: "" };
55 | }
56 |
57 | const rootElement = parse(defaultRender(tokens, idx, options, env, self));
58 | token.info = orgInfo;
59 |
60 | updateElement(rootElement, parsedFenceInfo, isEnableInlineCss);
61 |
62 | return rootElement.toString();
63 | };
64 | };
65 |
66 | function updateElement(
67 | element: HTMLElement,
68 | parsedFenceInfo: ParsedFenceInfo,
69 | isEnableInlineCss: boolean
70 | ): void {
71 | if (parsedFenceInfo.fileName && parsedFenceInfo.langName) {
72 | addNamedFenceBlockAttr(element, isEnableInlineCss);
73 |
74 | addNamedFenceFilenameAtrr(
75 | element,
76 | parsedFenceInfo.fileName,
77 | isEnableInlineCss
78 | );
79 | }
80 | }
81 |
82 | function addNamedFenceBlockAttr(
83 | element: HTMLElement,
84 | isEnableInlineCss: boolean
85 | ): void {
86 | if (element.firstChild instanceof HTMLElement) {
87 | const existClass = element.firstChild.getAttribute("class");
88 |
89 | if (element.firstChild.getAttribute("class")) {
90 | element.firstChild.setAttribute(
91 | "class",
92 | `${existClass} ${fencBlockName}`
93 | );
94 | } else {
95 | element.firstChild.setAttribute("class", fencBlockName);
96 | }
97 |
98 | if (isEnableInlineCss) {
99 | element.firstChild.setAttribute("style", defaultStyleOptions.mincbBlock);
100 | }
101 | }
102 | }
103 |
104 | function addNamedFenceFilenameAtrr(
105 | element: HTMLElement,
106 | fileName: string,
107 | isEnableInlineCss: boolean
108 | ): void {
109 | const node = parse(`${fileName}
`);
110 |
111 | const firstChild = node.firstChild;
112 |
113 | if (firstChild instanceof HTMLElement && isEnableInlineCss) {
114 | firstChild.setAttribute("style", defaultStyleOptions.mincbName);
115 | }
116 |
117 | if (element.firstChild instanceof HTMLElement) {
118 | element.firstChild.appendChild(node);
119 | }
120 | }
121 |
122 | function parseInfo(info: string): ParsedFenceInfo {
123 | // https://regex101.com/r/PacPRb/4
124 | const data = { langName: "", fileName: "", langAttrs: "" };
125 | const arr = info.split(/(\s+)/g);
126 | const match = arr[0].match(/^([^:\n]+)?(:([^:\n]*))?([^:\n]*)?$/);
127 | const langAttrs = arr.slice(2).join("");
128 | if (match) {
129 | data.langName = match[1] || "";
130 | data.fileName = match[3] || "";
131 | data.langAttrs = langAttrs;
132 | return data;
133 | }
134 |
135 | return data;
136 | }
137 |
138 | function updateTokenInfo(token: Token, parsedFenceInfo: ParsedFenceInfo): void {
139 | if (parsedFenceInfo.langName) {
140 | token.info = parsedFenceInfo.langName + " " + parsedFenceInfo.langAttrs;
141 | } else {
142 | token.info = "";
143 | }
144 | }
145 |
146 | // export default namedCodeBlocks;
147 | export = namedCodeBlocks;
148 |
--------------------------------------------------------------------------------
/test/fixture/hljs10/codeblock.txt:
--------------------------------------------------------------------------------
1 | none
2 | .
3 | ```
4 | console.log("Hello World!");
5 | ```
6 | .
7 | console.log("Hello World!");
8 |
9 | .
10 |
11 | js
12 | .
13 | ```js
14 | console.log("Hello World!");
15 | ```
16 | .
17 | console.log("Hello World!");
18 |
19 | .
20 |
21 | js:
22 | .
23 | ```js:
24 | console.log("Hello World!");
25 | ```
26 | .
27 | console.log("Hello World!");
28 |
29 | .
30 |
31 | js:hello.js (named code blocks)
32 | .
33 | ```js:hello.js
34 | console.log("Hello World!");
35 | ```
36 | .
37 | console.log("Hello World!");
38 | hello.js
39 | .
40 |
41 | :hello.js
42 | .
43 | ```:hello.js
44 | console.log("Hello World!");
45 | ```
46 | .
47 | console.log("Hello World!");
48 |
49 | .
50 |
51 | hello.js
52 | .
53 | ```hello.js
54 | console.log("Hello World!");
55 | ```
56 | .
57 | console.log("Hello World!");
58 |
59 | .
60 |
61 | js:hello.js:second.js
62 | .
63 | ```js:hello.js:second.js
64 | console.log("Hello World!");
65 | ```
66 | .
67 | console.log("Hello World!");
68 |
69 | .
70 |
71 | hello.js:second.js (named code blocks, but language is incorrect)
72 | .
73 | ```hello.js:second.js
74 | console.log("Hello World!");
75 | ```
76 | .
77 | console.log("Hello World!");
78 | second.js
79 | .
80 |
81 | js langAttr
82 | .
83 | ```js langAttr
84 | console.log("Hello World!");
85 | ```
86 | .
87 | console.log("Hello World!");
88 |
89 | .
90 |
91 | js:hello.js langAttr
92 | .
93 | ```js:hello.js langAttr
94 | console.log("Hello World!");
95 | ```
96 | .
97 | console.log("Hello World!");
98 | hello.js
99 | .
--------------------------------------------------------------------------------
/test/fixture/hljs10/codeblock_highlightjs.txt:
--------------------------------------------------------------------------------
1 | none
2 | .
3 | ```
4 | console.log("Hello World!");
5 | ```
6 | .
7 | console.log("Hello World!");
8 |
9 | .
10 |
11 | js
12 | .
13 | ```js
14 | console.log("Hello World!");
15 | ```
16 | .
17 | console.log("Hello World!");
18 |
19 | .
20 |
21 | js:
22 | .
23 | ```js:
24 | console.log("Hello World!");
25 | ```
26 | .
27 | console.log("Hello World!");
28 |
29 | .
30 |
31 | js:hello.js (named code blocks)
32 | .
33 | ```js:hello.js
34 | console.log("Hello World!");
35 | ```
36 | .
37 | console.log("Hello World!");
38 | hello.js
39 | .
40 |
41 | :hello.js
42 | .
43 | ```:hello.js
44 | console.log("Hello World!");
45 | ```
46 | .
47 | console.log("Hello World!");
48 |
49 | .
50 |
51 | hello.js
52 | .
53 | ```hello.js
54 | console.log("Hello World!");
55 | ```
56 | .
57 | console.log("Hello World!");
58 |
59 | .
60 |
61 | js:hello.js:second.js
62 | .
63 | ```js:hello.js:second.js
64 | console.log("Hello World!");
65 | ```
66 | .
67 | console.log("Hello World!");
68 |
69 | .
70 |
71 | hello.js:second.js (named code blocks, but language is incorrect)
72 | .
73 | ```hello.js:second.js
74 | console.log("Hello World!");
75 | ```
76 | .
77 | console.log("Hello World!");
78 | second.js
79 | .
80 |
81 | js langAttr
82 | .
83 | ```js langAttr
84 | console.log("Hello World!");
85 | ```
86 | .
87 | console.log("Hello World!");
88 |
89 | .
90 |
91 | js:hello.js langAttr
92 | .
93 | ```js:hello.js langAttr
94 | console.log("Hello World!");
95 | ```
96 | .
97 | console.log("Hello World!");
98 | hello.js
99 | .
--------------------------------------------------------------------------------
/test/fixture/hljs10/codeblock_highlightjs_full_override.txt:
--------------------------------------------------------------------------------
1 | none
2 | .
3 | ```
4 | console.log("Hello World!");
5 | ```
6 | .
7 | console.log("Hello World!");
8 |
9 | .
10 |
11 | js
12 | .
13 | ```js
14 | console.log("Hello World!");
15 | ```
16 | .
17 | console.log("Hello World!");
18 |
19 | .
20 |
21 | js:
22 | .
23 | ```js:
24 | console.log("Hello World!");
25 | ```
26 | .
27 | console.log("Hello World!");
28 |
29 | .
30 |
31 | js:hello.js (named code blocks)
32 | .
33 | ```js:hello.js
34 | console.log("Hello World!");
35 | ```
36 | .
37 | console.log("Hello World!");
38 | hello.js
39 | .
40 |
41 | :hello.js
42 | .
43 | ```:hello.js
44 | console.log("Hello World!");
45 | ```
46 | .
47 | console.log("Hello World!");
48 |
49 | .
50 |
51 | hello.js
52 | .
53 | ```hello.js
54 | console.log("Hello World!");
55 | ```
56 | .
57 | console.log("Hello World!");
58 |
59 | .
60 |
61 | js:hello.js:second.js
62 | .
63 | ```js:hello.js:second.js
64 | console.log("Hello World!");
65 | ```
66 | .
67 | console.log("Hello World!");
68 |
69 | .
70 |
71 | hello.js:second.js (named code blocks, but language is incorrect)
72 | .
73 | ```hello.js:second.js
74 | console.log("Hello World!");
75 | ```
76 | .
77 | console.log("Hello World!");
78 | second.js
79 | .
80 |
81 | js langAttr
82 | .
83 | ```js langAttr
84 | console.log("Hello World!");
85 | ```
86 | .
87 | console.log("Hello World!");
88 |
89 | .
90 |
91 | js:hello.js langAttr
92 | .
93 | ```js:hello.js langAttr
94 | console.log("Hello World!");
95 | ```
96 | .
97 | console.log("Hello World!");
98 | hello.js
99 | .
--------------------------------------------------------------------------------
/test/fixture/hljs10/codeblock_inline_css.txt:
--------------------------------------------------------------------------------
1 | none
2 | .
3 | ```
4 | console.log("Hello World!");
5 | ```
6 | .
7 | console.log("Hello World!");
8 |
9 | .
10 |
11 | js
12 | .
13 | ```js
14 | console.log("Hello World!");
15 | ```
16 | .
17 | console.log("Hello World!");
18 |
19 | .
20 |
21 | js:
22 | .
23 | ```js:
24 | console.log("Hello World!");
25 | ```
26 | .
27 | console.log("Hello World!");
28 |
29 | .
30 |
31 | js:hello.js (named code blocks)
32 | .
33 | ```js:hello.js
34 | console.log("Hello World!");
35 | ```
36 | .
37 | console.log("Hello World!");
38 | hello.js
39 | .
40 |
41 | :hello.js
42 | .
43 | ```:hello.js
44 | console.log("Hello World!");
45 | ```
46 | .
47 | console.log("Hello World!");
48 |
49 | .
50 |
51 | hello.js
52 | .
53 | ```hello.js
54 | console.log("Hello World!");
55 | ```
56 | .
57 | console.log("Hello World!");
58 |
59 | .
60 |
61 | js:hello.js:second.js
62 | .
63 | ```js:hello.js:second.js
64 | console.log("Hello World!");
65 | ```
66 | .
67 | console.log("Hello World!");
68 |
69 | .
70 |
71 | hello.js:second.js (named code blocks, but language is incorrect)
72 | .
73 | ```hello.js:second.js
74 | console.log("Hello World!");
75 | ```
76 | .
77 | console.log("Hello World!");
78 | second.js
79 | .
80 |
81 | js langAttr
82 | .
83 | ```js langAttr
84 | console.log("Hello World!");
85 | ```
86 | .
87 | console.log("Hello World!");
88 |
89 | .
90 |
91 | js:hello.js langAttr
92 | .
93 | ```js:hello.js langAttr
94 | console.log("Hello World!");
95 | ```
96 | .
97 | console.log("Hello World!");
98 | hello.js
99 | .
--------------------------------------------------------------------------------
/test/fixture/hljs11/codeblock.txt:
--------------------------------------------------------------------------------
1 | none
2 | .
3 | ```
4 | console.log("Hello World!");
5 | ```
6 | .
7 | console.log("Hello World!");
8 |
9 | .
10 |
11 | js
12 | .
13 | ```js
14 | console.log("Hello World!");
15 | ```
16 | .
17 | console.log("Hello World!");
18 |
19 | .
20 |
21 | js:
22 | .
23 | ```js:
24 | console.log("Hello World!");
25 | ```
26 | .
27 | console.log("Hello World!");
28 |
29 | .
30 |
31 | js:hello.js (named code blocks)
32 | .
33 | ```js:hello.js
34 | console.log("Hello World!");
35 | ```
36 | .
37 | console.log("Hello World!");
38 | hello.js
39 | .
40 |
41 | :hello.js
42 | .
43 | ```:hello.js
44 | console.log("Hello World!");
45 | ```
46 | .
47 | console.log("Hello World!");
48 |
49 | .
50 |
51 | hello.js
52 | .
53 | ```hello.js
54 | console.log("Hello World!");
55 | ```
56 | .
57 | console.log("Hello World!");
58 |
59 | .
60 |
61 | js:hello.js:second.js
62 | .
63 | ```js:hello.js:second.js
64 | console.log("Hello World!");
65 | ```
66 | .
67 | console.log("Hello World!");
68 |
69 | .
70 |
71 | hello.js:second.js (named code blocks, but language is incorrect)
72 | .
73 | ```hello.js:second.js
74 | console.log("Hello World!");
75 | ```
76 | .
77 | console.log("Hello World!");
78 | second.js
79 | .
80 |
81 | js langAttr
82 | .
83 | ```js langAttr
84 | console.log("Hello World!");
85 | ```
86 | .
87 | console.log("Hello World!");
88 |
89 | .
90 |
91 | js:hello.js langAttr
92 | .
93 | ```js:hello.js langAttr
94 | console.log("Hello World!");
95 | ```
96 | .
97 | console.log("Hello World!");
98 | hello.js
99 | .
--------------------------------------------------------------------------------
/test/fixture/hljs11/codeblock_highlightjs.txt:
--------------------------------------------------------------------------------
1 | none
2 | .
3 | ```
4 | console.log("Hello World!");
5 | ```
6 | .
7 | console.log("Hello World!");
8 |
9 | .
10 |
11 | js
12 | .
13 | ```js
14 | console.log("Hello World!");
15 | ```
16 | .
17 | console.log("Hello World!");
18 |
19 | .
20 |
21 | js:
22 | .
23 | ```js:
24 | console.log("Hello World!");
25 | ```
26 | .
27 | console.log("Hello World!");
28 |
29 | .
30 |
31 | js:hello.js (named code blocks)
32 | .
33 | ```js:hello.js
34 | console.log("Hello World!");
35 | ```
36 | .
37 | console.log("Hello World!");
38 | hello.js
39 | .
40 |
41 | :hello.js
42 | .
43 | ```:hello.js
44 | console.log("Hello World!");
45 | ```
46 | .
47 | console.log("Hello World!");
48 |
49 | .
50 |
51 | hello.js
52 | .
53 | ```hello.js
54 | console.log("Hello World!");
55 | ```
56 | .
57 | console.log("Hello World!");
58 |
59 | .
60 |
61 | js:hello.js:second.js
62 | .
63 | ```js:hello.js:second.js
64 | console.log("Hello World!");
65 | ```
66 | .
67 | console.log("Hello World!");
68 |
69 | .
70 |
71 | hello.js:second.js (named code blocks, but language is incorrect)
72 | .
73 | ```hello.js:second.js
74 | console.log("Hello World!");
75 | ```
76 | .
77 | console.log("Hello World!");
78 | second.js
79 | .
80 |
81 | js langAttr
82 | .
83 | ```js langAttr
84 | console.log("Hello World!");
85 | ```
86 | .
87 | console.log("Hello World!");
88 |
89 | .
90 |
91 | js:hello.js langAttr
92 | .
93 | ```js:hello.js langAttr
94 | console.log("Hello World!");
95 | ```
96 | .
97 | console.log("Hello World!");
98 | hello.js
99 | .
--------------------------------------------------------------------------------
/test/fixture/hljs11/codeblock_highlightjs_full_override.txt:
--------------------------------------------------------------------------------
1 | none
2 | .
3 | ```
4 | console.log("Hello World!");
5 | ```
6 | .
7 | console.log("Hello World!");
8 |
9 | .
10 |
11 | js
12 | .
13 | ```js
14 | console.log("Hello World!");
15 | ```
16 | .
17 | console.log("Hello World!");
18 |
19 | .
20 |
21 | js:
22 | .
23 | ```js:
24 | console.log("Hello World!");
25 | ```
26 | .
27 | console.log("Hello World!");
28 |
29 | .
30 |
31 | js:hello.js (named code blocks)
32 | .
33 | ```js:hello.js
34 | console.log("Hello World!");
35 | ```
36 | .
37 | console.log("Hello World!");
38 | hello.js
39 | .
40 |
41 | :hello.js
42 | .
43 | ```:hello.js
44 | console.log("Hello World!");
45 | ```
46 | .
47 | console.log("Hello World!");
48 |
49 | .
50 |
51 | hello.js
52 | .
53 | ```hello.js
54 | console.log("Hello World!");
55 | ```
56 | .
57 | console.log("Hello World!");
58 |
59 | .
60 |
61 | js:hello.js:second.js
62 | .
63 | ```js:hello.js:second.js
64 | console.log("Hello World!");
65 | ```
66 | .
67 | console.log("Hello World!");
68 |
69 | .
70 |
71 | hello.js:second.js (named code blocks, but language is incorrect)
72 | .
73 | ```hello.js:second.js
74 | console.log("Hello World!");
75 | ```
76 | .
77 | console.log("Hello World!");
78 | second.js
79 | .
80 |
81 | js langAttr
82 | .
83 | ```js langAttr
84 | console.log("Hello World!");
85 | ```
86 | .
87 | console.log("Hello World!");
88 |
89 | .
90 |
91 | js:hello.js langAttr
92 | .
93 | ```js:hello.js langAttr
94 | console.log("Hello World!");
95 | ```
96 | .
97 | console.log("Hello World!");
98 | hello.js
99 | .
--------------------------------------------------------------------------------
/test/fixture/hljs11/codeblock_inline_css.txt:
--------------------------------------------------------------------------------
1 | none
2 | .
3 | ```
4 | console.log("Hello World!");
5 | ```
6 | .
7 | console.log("Hello World!");
8 |
9 | .
10 |
11 | js
12 | .
13 | ```js
14 | console.log("Hello World!");
15 | ```
16 | .
17 | console.log("Hello World!");
18 |
19 | .
20 |
21 | js:
22 | .
23 | ```js:
24 | console.log("Hello World!");
25 | ```
26 | .
27 | console.log("Hello World!");
28 |
29 | .
30 |
31 | js:hello.js (named code blocks)
32 | .
33 | ```js:hello.js
34 | console.log("Hello World!");
35 | ```
36 | .
37 | console.log("Hello World!");
38 | hello.js
39 | .
40 |
41 | :hello.js
42 | .
43 | ```:hello.js
44 | console.log("Hello World!");
45 | ```
46 | .
47 | console.log("Hello World!");
48 |
49 | .
50 |
51 | hello.js
52 | .
53 | ```hello.js
54 | console.log("Hello World!");
55 | ```
56 | .
57 | console.log("Hello World!");
58 |
59 | .
60 |
61 | js:hello.js:second.js
62 | .
63 | ```js:hello.js:second.js
64 | console.log("Hello World!");
65 | ```
66 | .
67 | console.log("Hello World!");
68 |
69 | .
70 |
71 | hello.js:second.js (named code blocks, but language is incorrect)
72 | .
73 | ```hello.js:second.js
74 | console.log("Hello World!");
75 | ```
76 | .
77 | console.log("Hello World!");
78 | second.js
79 | .
80 |
81 | js langAttr
82 | .
83 | ```js langAttr
84 | console.log("Hello World!");
85 | ```
86 | .
87 | console.log("Hello World!");
88 |
89 | .
90 |
91 | js:hello.js langAttr
92 | .
93 | ```js:hello.js langAttr
94 | console.log("Hello World!");
95 | ```
96 | .
97 | console.log("Hello World!");
98 | hello.js
99 | .
--------------------------------------------------------------------------------
/test/index.test.ts:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import path from "path";
4 |
5 | const generate = require("markdown-it-testgen"); // eslint-disable-line @typescript-eslint/no-var-requires
6 | import hljs from "highlight.js";
7 | import MarkdownIt from "markdown-it";
8 | import namedCodeBlocks from "../src";
9 |
10 | const hljsVersion = require("highlight.js/package.json").version;
11 | const fixturePath = hljsVersion.startsWith("10")
12 | ? "fixture/hljs10"
13 | : "fixture/hljs11";
14 |
15 | console.log(`Running tests with highlight.js version: ${hljsVersion}`);
16 |
17 | describe("markdown-it-named-code-blocks", () => {
18 | const md = new MarkdownIt().use(namedCodeBlocks);
19 |
20 | generate(
21 | path.join(__dirname, `./${fixturePath}/codeblock.txt`),
22 | { header: true },
23 | md
24 | );
25 | });
26 |
27 | describe("markdown-it-named-code-blocks-default-highlight", () => {
28 | const md = new MarkdownIt({
29 | highlight: function (str: string, lang: string) {
30 | if (lang && hljs.getLanguage(lang)) {
31 | return hljs.highlight(str, { language: lang }).value;
32 | }
33 | return "";
34 | }
35 | }).use(namedCodeBlocks);
36 |
37 | generate(
38 | path.join(__dirname, `./${fixturePath}/codeblock_highlightjs.txt`),
39 | { header: true },
40 | md
41 | );
42 | });
43 |
44 | describe("markdown-it-named-code-blocks-override-highlight", () => {
45 | const md: MarkdownIt = new MarkdownIt({
46 | highlight: function (str: string, lang: string) {
47 | if (lang && hljs.getLanguage(lang)) {
48 | return (
49 | '' +
50 | hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
51 | "
"
52 | );
53 | }
54 |
55 | return (
56 | '' + md.utils.escapeHtml(str) + "
"
57 | );
58 | }
59 | }).use(namedCodeBlocks);
60 |
61 | generate(
62 | path.join(
63 | __dirname,
64 | `./${fixturePath}/codeblock_highlightjs_full_override.txt`
65 | ),
66 | { header: true },
67 | md
68 | );
69 | });
70 |
71 | describe("markdown-it-named-code-blocks-inline-css", () => {
72 | const md = new MarkdownIt().use(namedCodeBlocks, {
73 | isEnableInlineCss: true
74 | });
75 |
76 | generate(
77 | path.join(__dirname, `./${fixturePath}/codeblock_inline_css.txt`),
78 | { header: true },
79 | md
80 | );
81 | });
82 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "module": "commonjs",
5 | "outDir": "./dist",
6 | "rootDir": "./src",
7 | "strict": true,
8 | "esModuleInterop": true,
9 | "declaration": true
10 | },
11 | "include": ["src/**/*.ts"],
12 | "exclude": ["node_modules", "dist", "demo"]
13 | }
14 |
--------------------------------------------------------------------------------