Skip to content

Commit 8dbbbb3

Browse files
RunDevelopmentRunDevelopment
authoredMar 5, 2021
Markup: Added support for DOM event attributes (#2702)
·
v1.30.0v1.24.0
1 parent 970674c commit 8dbbbb3

13 files changed

+168
-85
lines changed
 

‎components/prism-css.js

+1-28
Original file line numberDiff line numberDiff line change
@@ -49,34 +49,7 @@
4949
var markup = Prism.languages.markup;
5050
if (markup) {
5151
markup.tag.addInlined('style', 'css');
52-
53-
Prism.languages.insertBefore('inside', 'attr-value', {
54-
'style-attr': {
55-
pattern: /(^|["'\s])style\s*=\s*(?:"[^"]*"|'[^']*')/i,
56-
lookbehind: true,
57-
inside: {
58-
'attr-value': {
59-
pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
60-
inside: {
61-
'style': {
62-
pattern: /(["'])[\s\S]+(?=["']$)/,
63-
lookbehind: true,
64-
alias: 'language-css',
65-
inside: Prism.languages.css
66-
},
67-
'punctuation': [
68-
{
69-
pattern: /^=/,
70-
alias: 'attr-equals'
71-
},
72-
/"|'/
73-
]
74-
}
75-
},
76-
'attr-name': /^style/i
77-
}
78-
}
79-
}, markup.tag);
52+
markup.tag.addAttribute('style', 'css');
8053
}
8154

8255
}(Prism));

‎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

+7
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,13 @@ Prism.languages.insertBefore('javascript', 'string', {
9696

9797
if (Prism.languages.markup) {
9898
Prism.languages.markup.tag.addInlined('script', 'javascript');
99+
100+
// add attribute support for all DOM events.
101+
// https://developer.mozilla.org/en-US/docs/Web/Events#Standard_events
102+
Prism.languages.markup.tag.addAttribute(
103+
/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,
104+
'javascript'
105+
);
99106
}
100107

101108
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-jsx.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Prism.languages.insertBefore('inside', 'attr-name', {
3838
}
3939
}, Prism.languages.jsx.tag);
4040

41-
Prism.languages.insertBefore('inside', 'attr-value',{
41+
Prism.languages.insertBefore('inside', 'special-attr',{
4242
'script': {
4343
// Allow for two levels of nesting
4444
pattern: re(/=<BRACES>/.source),

‎components/prism-jsx.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
@@ -33,6 +33,7 @@ Prism.languages.markup = {
3333
'namespace': /^[^\s>\/:]+:/
3434
}
3535
},
36+
'special-attr': [],
3637
'attr-value': {
3738
pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
3839
inside: {
@@ -119,6 +120,49 @@ Object.defineProperty(Prism.languages.markup.tag, 'addInlined', {
119120
Prism.languages.insertBefore('markup', 'cdata', def);
120121
}
121122
});
123+
Object.defineProperty(Prism.languages.markup.tag, 'addAttribute', {
124+
/**
125+
* Adds an pattern to highlight languages embedded in HTML attributes.
126+
*
127+
* An example of an inlined language is CSS with `style` attributes.
128+
*
129+
* @param {string} attrName The name of the tag that contains the inlined language. This name will be treated as
130+
* case insensitive.
131+
* @param {string} lang The language key.
132+
* @example
133+
* addAttribute('style', 'css');
134+
*/
135+
value: function (attrName, lang) {
136+
Prism.languages.markup.tag.inside['special-attr'].push({
137+
pattern: RegExp(
138+
/(^|["'\s])/.source + '(?:' + attrName + ')' + /\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,
139+
'i'
140+
),
141+
lookbehind: true,
142+
inside: {
143+
'attr-name': /^[^\s=]+/,
144+
'attr-value': {
145+
pattern: /=[\s\S]+/,
146+
inside: {
147+
'value': {
148+
pattern: /(=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,
149+
lookbehind: true,
150+
alias: [lang, 'language-' + lang],
151+
inside: Prism.languages[lang]
152+
},
153+
'punctuation': [
154+
{
155+
pattern: /^=/,
156+
alias: 'attr-equals'
157+
},
158+
/"|'/
159+
]
160+
}
161+
}
162+
}
163+
});
164+
}
165+
});
122166

123167
Prism.languages.html = Prism.languages.markup;
124168
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

+52-28
Original file line numberDiff line numberDiff line change
@@ -1258,6 +1258,7 @@ Prism.languages.markup = {
12581258
'namespace': /^[^\s>\/:]+:/
12591259
}
12601260
},
1261+
'special-attr': [],
12611262
'attr-value': {
12621263
pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
12631264
inside: {
@@ -1344,6 +1345,49 @@ Object.defineProperty(Prism.languages.markup.tag, 'addInlined', {
13441345
Prism.languages.insertBefore('markup', 'cdata', def);
13451346
}
13461347
});
1348+
Object.defineProperty(Prism.languages.markup.tag, 'addAttribute', {
1349+
/**
1350+
* Adds an pattern to highlight languages embedded in HTML attributes.
1351+
*
1352+
* An example of an inlined language is CSS with `style` attributes.
1353+
*
1354+
* @param {string} attrName The name of the tag that contains the inlined language. This name will be treated as
1355+
* case insensitive.
1356+
* @param {string} lang The language key.
1357+
* @example
1358+
* addAttribute('style', 'css');
1359+
*/
1360+
value: function (attrName, lang) {
1361+
Prism.languages.markup.tag.inside['special-attr'].push({
1362+
pattern: RegExp(
1363+
/(^|["'\s])/.source + '(?:' + attrName + ')' + /\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,
1364+
'i'
1365+
),
1366+
lookbehind: true,
1367+
inside: {
1368+
'attr-name': /^[^\s=]+/,
1369+
'attr-value': {
1370+
pattern: /=[\s\S]+/,
1371+
inside: {
1372+
'value': {
1373+
pattern: /(=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,
1374+
lookbehind: true,
1375+
alias: [lang, 'language-' + lang],
1376+
inside: Prism.languages[lang]
1377+
},
1378+
'punctuation': [
1379+
{
1380+
pattern: /^=/,
1381+
alias: 'attr-equals'
1382+
},
1383+
/"|'/
1384+
]
1385+
}
1386+
}
1387+
}
1388+
});
1389+
}
1390+
});
13471391

13481392
Prism.languages.html = Prism.languages.markup;
13491393
Prism.languages.mathml = Prism.languages.markup;
@@ -1410,34 +1454,7 @@ Prism.languages.rss = Prism.languages.xml;
14101454
var markup = Prism.languages.markup;
14111455
if (markup) {
14121456
markup.tag.addInlined('style', 'css');
1413-
1414-
Prism.languages.insertBefore('inside', 'attr-value', {
1415-
'style-attr': {
1416-
pattern: /(^|["'\s])style\s*=\s*(?:"[^"]*"|'[^']*')/i,
1417-
lookbehind: true,
1418-
inside: {
1419-
'attr-value': {
1420-
pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
1421-
inside: {
1422-
'style': {
1423-
pattern: /(["'])[\s\S]+(?=["']$)/,
1424-
lookbehind: true,
1425-
alias: 'language-css',
1426-
inside: Prism.languages.css
1427-
},
1428-
'punctuation': [
1429-
{
1430-
pattern: /^=/,
1431-
alias: 'attr-equals'
1432-
},
1433-
/"|'/
1434-
]
1435-
}
1436-
},
1437-
'attr-name': /^style/i
1438-
}
1439-
}
1440-
}, markup.tag);
1457+
markup.tag.addAttribute('style', 'css');
14411458
}
14421459

14431460
}(Prism));
@@ -1582,6 +1599,13 @@ Prism.languages.insertBefore('javascript', 'string', {
15821599

15831600
if (Prism.languages.markup) {
15841601
Prism.languages.markup.tag.addInlined('script', 'javascript');
1602+
1603+
// add attribute support for all DOM events.
1604+
// https://developer.mozilla.org/en-US/docs/Web/Events#Standard_events
1605+
Prism.languages.markup.tag.addAttribute(
1606+
/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,
1607+
'javascript'
1608+
);
15851609
}
15861610

15871611
Prism.languages.js = Prism.languages.javascript;

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

+6-14
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,8 @@ foo {
3535
]],
3636
["style", [
3737
["language-css", [
38-
["selector", "foo"],
39-
["punctuation", "{"],
40-
["property", "bar"],
41-
["punctuation", ":"],
42-
" baz",
43-
["punctuation", ";"],
38+
["selector", "foo"], ["punctuation", "{"],
39+
["property", "bar"], ["punctuation", ":"], " baz", ["punctuation", ";"],
4440
["punctuation", "}"]
4541
]]
4642
]],
@@ -68,12 +64,8 @@ foo {
6864
["included-cdata", [
6965
["cdata", "<![CDATA["],
7066
["language-css", [
71-
["selector", "foo"],
72-
["punctuation", "{"],
73-
["property", "bar"],
74-
["punctuation", ":"],
75-
" baz",
76-
["punctuation", ";"],
67+
["selector", "foo"], ["punctuation", "{"],
68+
["property", "bar"], ["punctuation", ":"], " baz", ["punctuation", ";"],
7769
["punctuation", "}"]
7870
]],
7971
["cdata", "]]>"]
@@ -97,12 +89,12 @@ foo {
9789
["punctuation", "<"],
9890
"foo"
9991
]],
100-
["style-attr", [
92+
["special-attr", [
10193
["attr-name", "style"],
10294
["attr-value", [
10395
["punctuation", "="],
10496
["punctuation", "\""],
105-
["style", [
97+
["value", [
10698
["property", "bar"],
10799
["punctuation", ":"],
108100
"baz",

‎tests/languages/markup!+javascript/javascript_inclusion.test

+43
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ let foo = '</script>';
1212
"foo"
1313
</script>
1414

15+
<foo onclick="this.textContent='Clicked!'">
16+
<foo mouseover="this.textContent='Over!'">
17+
1518
----------------------------------------------------
1619

1720
[
@@ -107,6 +110,46 @@ let foo = '</script>';
107110
"script"
108111
]],
109112
["punctuation", ">"]
113+
]],
114+
115+
["tag", [
116+
["tag", [
117+
["punctuation", "<"],
118+
"foo"
119+
]],
120+
["special-attr", [
121+
["attr-name", "onclick"],
122+
["attr-value", [
123+
["punctuation", "="],
124+
["punctuation", "\""],
125+
["value", [
126+
["keyword", "this"],
127+
["punctuation", "."],
128+
"textContent",
129+
["operator", "="],
130+
["string", "'Clicked!'"]
131+
]],
132+
["punctuation", "\""]
133+
]]
134+
]],
135+
["punctuation", ">"]
136+
]],
137+
["tag", [
138+
["tag", [
139+
["punctuation", "<"],
140+
"foo"
141+
]],
142+
["attr-name", ["mouseover"]],
143+
["attr-value", [
144+
["punctuation", "="],
145+
["punctuation", "\""],
146+
"this.textContent=",
147+
["punctuation", "'"],
148+
"Over!",
149+
["punctuation", "'"],
150+
["punctuation", "\""]
151+
]],
152+
["punctuation", ">"]
110153
]]
111154
]
112155

‎tests/languages/markup+css+wiki/table-tag_feature.test

+8-8
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,12 @@ baz
6767
["punctuation", "{|"],
6868
["punctuation", "!"],
6969
["table-tag", [
70-
["style-attr", [
70+
["special-attr", [
7171
["attr-name", "style"],
7272
["attr-value", [
7373
["punctuation", "="],
7474
["punctuation", "\""],
75-
["style", [
75+
["value", [
7676
["property", "text-align"],
7777
["punctuation", ":"],
7878
"left",
@@ -94,12 +94,12 @@ baz
9494
["punctuation", "{|"],
9595
["punctuation", "!"],
9696
["table-tag", [
97-
["style-attr", [
97+
["special-attr", [
9898
["attr-name", "style"],
9999
["attr-value", [
100100
["punctuation", "="],
101101
["punctuation", "\""],
102-
["style", [
102+
["value", [
103103
["property", "color"],
104104
["punctuation", ":"],
105105
"red",
@@ -112,12 +112,12 @@ baz
112112
]], " Foo ",
113113
["punctuation", "!!"],
114114
["table-tag", [
115-
["style-attr", [
115+
["special-attr", [
116116
["attr-name", "style"],
117117
["attr-value", [
118118
["punctuation", "="],
119119
["punctuation", "\""],
120-
["style", [
120+
["value", [
121121
["property", "color"],
122122
["punctuation", ":"],
123123
"blue",
@@ -133,12 +133,12 @@ baz
133133
["punctuation", "|"], " foo ",
134134
["punctuation", "||"],
135135
["table-tag", [
136-
["style-attr", [
136+
["special-attr", [
137137
["attr-name", "style"],
138138
["attr-value", [
139139
["punctuation", "="],
140140
["punctuation", "\""],
141-
["style", [
141+
["value", [
142142
["property", "font-weight"],
143143
["punctuation", ":"],
144144
"bold",

‎tests/languages/php!+css-extras/issue2008.test

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
["punctuation", "<"],
99
"img"
1010
]],
11-
["style-attr", [
11+
["special-attr", [
1212
["attr-name", "style"],
1313
["attr-value", [
1414
["punctuation", "="],
1515
["punctuation", "\""],
16-
["style", [
16+
["value", [
1717
["property", "width"],
1818
["punctuation", ":"],
1919
["php", [

0 commit comments

Comments
 (0)
Please sign in to comment.