8000 Markup: Added support for CSS and JS inside of CDATAs (#1660) · PrismJS/prism@5712770 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 5712770

Browse files
RunDevelopmentRunDevelopment
authored
Markup: Added support for CSS and JS inside of CDATAs (#1660)
This adds support for CSS/JS inside of (any number of) CDATAs.
1 parent 16f2ad0 commit 5712770

File tree

11 files changed

+239
-71
lines changed

11 files changed

+239
-71
lines changed

‎components/prism-css.js

+1-9
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,7 @@ Prism.languages.css = {
2222
Prism.languages.css['atrule'].inside.rest = Prism.languages.css;
2323

2424
if (Prism.languages.markup) {
25-
Prism.languages.insertBefore('markup', 'tag', {
26-
'style': {
27-
pattern: /(<style[\s\S]*?>)[\s\S]*?(?=<\/style>)/i,
28-
lookbehind: true,
29-
inside: Prism.languages.css,
30-
alias: 'language-css',
31-
greedy: true
32-
}
33-
});
25+
Prism.languages.markup.tag.addInlined('style', 'css');
3426

3527
Prism.languages.insertBefore('inside', 'attr-value', {
3628
'style-attr': {

‎components/prism-css.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/prism-javascript.js

+1-9
Original file line numberDiff line numberDiff line change
@@ -77,15 +77,7 @@ Prism.languages.insertBefore('javascript', 'string', {
7777
});
7878

7979
if (Prism.languages.markup) {
80-
Prism.languages.insertBefore('markup', 'tag', {
81-
'script': {
82-
pattern: /(<script[\s\S]*?>)[\s\S]*?(?=<\/script>)/i,
83-
lookbehind: true,
84-
inside: Prism.languages.javascript,
85-
alias: 'language-javascript',
86-
greedy: true
87-
}
88-
});
80+
Prism.languages.markup.tag.addInlined('script', 'javascript');
8981
}
9082

9183
Prism.languages.js = Prism.languages.javascript;

‎components/prism-javascript.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/prism-markup.js

+44
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,50 @@ Prism.hooks.add('wrap', function(env) {
5050
}
5151
});
5252

53+
Object.defineProperty(Prism.languages.markup.tag, 'addInlined', {
54+
/**
55+
* Adds an inlined language to markup.
56+
*
57+
* An example of an inlined language is CSS with `<style>` tags.
58+
*
59+
* @param {string} tagName The name of the tag that contains the inlined language. This name will be treated as
60+
* case insensitive.
61+
* @param {string} lang The language key.
62+
* @example
63+
* addInlined('style', 'css');
64+
*/
65+
value: function addInlined(tagName, lang) {
66+
var inside = {};
67+
inside['language-' + lang] = {
68+
pattern: /[\s\S]+/,
69+
inside: Prism.languages[lang]
70+
};
71+
72+
var def = {};
73+
def[tagName] = {
74+
pattern: RegExp(/(<__[\s\S]*?>)(?:<!\[CDATA\[[\s\S]*?\]\]>\s*|[\s\S])*?(?=<\/__>)/.source.replace(/__/g, tagName), 'i'),
75+
lookbehind: true,
76+
greedy: true,
77+
inside: {
78+
'included-cdata': {
79+
pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
80+
inside: {
81+
'content': {
82+
pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
83+
lookbehind: true,
84+
inside: inside
85+
},
86+
'cdata': /^<!\[CDATA\[|\]\]>$/i
87+
}
88+
},
89+
rest: inside
90+
}
91+
};
92+
93+
Prism.languages.insertBefore('markup', 'cdata', def);
94+
}
95+
});
96+
5397
Prism.languages.xml = Prism.languages.extend('markup', {});
5498
Prism.languages.html = Prism.languages.markup;
5599
Prism.languages.mathml = Prism.languages.markup;

‎components/prism-markup.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎prism.js

+46-18
Original file line numberDiff line numberDiff line change
@@ -614,6 +614,50 @@ Prism.hooks.add('wrap', function(env) {
614614
}
615615
});
616616

617+
Object.defineProperty(Prism.languages.markup.tag, 'addInlined', {
618+
/**
619+
* Adds an inlined language to markup.
620+
*
621+
* An example of an inlined language is CSS with `<style>` tags.
622+
*
623+
* @param {string} tagName The name of the tag that contains the inlined language. This name will be treated as
624+
* case insensitive.
625+
* @param {string} lang The language key.
626+
* @example
627+
* addInlined('style', 'css');
628+
*/
629+
value: function addInlined(tagName, lang) {
630+
var inside = {};
631+
inside['language-' + lang] = {
632+
pattern: /[\s\S]+/,
633+
inside: Prism.languages[lang]
634+
};
635+
636+
var def = {};
637+
def[tagName] = {
638+
pattern: RegExp(/(<__[\s\S]*?>)(?:<!\[CDATA\[[\s\S]*?\]\]>\s*|[\s\S])*?(?=<\/__>)/.source.replace(/__/g, tagName), 'i'),
639+
lookbehind: true,
640+
greedy: true,
641+
inside: {
642+
'included-cdata': {
643+
pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
644+
inside: {
645+
'content': {
646+
pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
647+
lookbehind: true,
648+
inside: inside
649+
},
650+
'cdata': /^<!\[CDATA\[|\]\]>$/i
651+
}
652+
},
653+
rest: inside
654+
}
655+
};
656+
657+
Prism.languages.insertBefore('markup', 'cdata', def);
658+
}
659+
});
660+
617661
Prism.languages.xml = Prism.languages.extend('markup', {});
618662
Prism.languages.html = Prism.languages.markup;
619663
Prism.languages.mathml = Prism.languages.markup;
@@ -648,15 +692,7 @@ Prism.languages.css = {
648692
Prism.languages.css['atrule'].inside.rest = Prism.languages.css;
649693

650694< 47C5 code class="diff-text syntax-highlighted-line">
if (Prism.languages.markup) {
651-
Prism.languages.insertBefore('markup', 'tag', {
652-
'style': {
653-
pattern: /(<style[\s\S]*?>)[\s\S]*?(?=<\/style>)/i,
654-
lookbehind: true,
655-
inside: Prism.languages.css,
656-
alias: 'language-css',
657-
greedy: true
658-
}
659-
});
695+
Prism.languages.markup.tag.addInlined('style', 'css');
660696

661697
Prism.languages.insertBefore('inside', 'attr-value', {
662698
'style-attr': {
@@ -797,15 +833,7 @@ Prism.languages.insertBefore('javascript', 'string', {
797833
});
798834

799835
if (Prism.languages.markup) {
800-
Prism.languages.insertBefore('markup', 'tag', {
801-
'script': {
802-
pattern: /(<script[\s\S]*?>)[\s\S]*?(?=<\/script>)/i,
803-
lookbehind: true,
804-
inside: Prism.languages.javascript,
805-
alias: 'language-javascript',
806-
greedy: true
807-
}
808-
});
836+
Prism.languages.markup.tag.addInlined('script', 'javascript');
809837
}
810838

811839
Prism.languages.js = Prism.languages.javascript;

‎tests/languages/markup!+css+javascript/issue1240.test

+10-7
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
----------------------------------------------------
1010

1111
[
12-
1312
["tag", [
1413
["tag", [
1514
["punctuation", "<"],
@@ -18,11 +17,15 @@
1817
["punctuation", ">"]
1918
]],
2019
["script", [
21-
["keyword", "let"],
22-
" str ",
23-
["operator", "="],
24-
["template-string", [["string", "`\r\n\t\t<style>\r\n\t\t\t.foo { color: blue; }\r\n\t\t</style>\r\n\t`"]]],
25-
["punctuation", ";"]
20+
["language-javascript", [
21+
["keyword", "let"],
22+
" str ",
23+
["operator", "="],
24+
["template-string", [
25+
["string", "`\r\n\t\t<style>\r\n\t\t\t.foo { color: blue; }\r\n\t\t</style>\r\n\t`"]
26+
]],
27+
["punctuation", ";"]
28+
]]
2629
]],
2730
["tag", [
2831
["tag", [
@@ -35,4 +38,4 @@
3538

3639
----------------------------------------------------
3740

38-
Checks for Javascript usage inside Markup, using <script> tags.
41+
Checks for Javascript usage inside Markup, using <script> tags.

‎tests/languages/markup!+css/css_inclusion.test

+64-14
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,16 @@ foo {
44
}
55
</style>
66

7+
<style>
8+
.bar { }
9+
<![CDATA[
10+
foo {
11+
bar: baz;
12+
}
13+
]]>
14+
#foo { }
15+
</style>
16+
717
<foo style="bar:baz;">
818

919
----------------------------------------------------
@@ -14,9 +24,7 @@ foo {
1424
["punctuation", "<"],
1525
"style"
1626
]],
17-
["attr-name", [
18-
"type"
19-
]],
27+
["attr-name", ["type"]],
2028
["attr-value", [
2129
["punctuation", "="],
2230
["punctuation", "\""],
@@ -26,13 +34,57 @@ foo {
2634
["punctuation", ">"]
2735
]],
2836
["style", [
29-
["selector", "foo"],
30-
["punctuation", "{"],
31-
["property", "bar"],
32-
["punctuation", ":"],
33-
" baz",
34-
["punctuation", ";"],
35-
["punctuation", "}"]
37+
["language-css", [
38+
["selector", "foo"],
39+
["punctuation", "{"],
40+
["property", "bar"],
41+
["punctuation", ":"],
42+
" baz",
43+
["punctuation", ";"],
44+
["punctuation", "}"]
45+
]]
46+
]],
47+
["tag", [
48+
["tag", [
49+
["punctuation", "</"],
50+
"style"
51+
]],
52+
["punctuation", ">"]
53+
]],
54+
55+
["tag", [
56+
["tag", [
57+
["punctuation", "<"],
58+
"style"
59+
]],
60+
["punctuation", ">"]
61+
]],
62+
["style", [
63+
["language-css", [
64+
["selector", ".bar"],
65+
["punctuation", "{"],
66+
["punctuation", "}"]
67+
]],
68+
["included-cdata", [
69+
["cdata", "<![CDATA["],
70+
["content", [
71+
["language-css", [
72+
["selector", "foo"],
73+
["punctuation", "{"],
74+
["property", "bar"],
75+
["punctuation", ":"],
76+
" baz",
77+
["punctuation", ";"],
78+
["punctuation", "}"]
79+
]]
80+
]],
81+
["cdata", "]]>"]
82+
]],
83+
["language-css", [
84+
["selector", "#foo"],
85+
["punctuation", "{"],
86+
["punctuation", "}"]
87+
]]
3688
]],
3789
["tag", [
3890
["tag", [
@@ -49,9 +101,7 @@ foo {
49101
]],
50102
["style-attr", [
51103
["attr-name", [
52-
["attr-name", [
53-
"style"
54-
]]
104+
["attr-name", ["style"]]
55105
]],
56106
["punctuation", "=\""],
57107
["attr-value", [
@@ -68,4 +118,4 @@ foo {
68118

69119
----------------------------------------------------
70120

71-
Checks for CSS usage inside Markup, using <style> tag and style attribute.
121+
Checks for CSS usage inside Markup, using <style> tag and style attribute.

0 commit comments

Comments
 (0)
0