Skip to content

Commit

Permalink
Markup: Added support for CSS and JS inside of CDATAs (#1660)
Browse files Browse the repository at this point in the history 
This adds support for CSS/JS inside of (any number of) CDATAs.
  • Loading branch information
@RunDevelopment
RunDevelopment authored Mar 4, 2019
1 parent 16f2ad0 commit 5712770
Show file tree
Hide file tree
Showing 11 changed files with 239 additions and 71 deletions.
10 changes: 1 addition & 9 deletions components/prism-css.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,7 @@ Prism.languages.css = {
Prism.languages.css['atrule'].inside.rest = Prism.languages.css;

if (Prism.languages.markup) {
Prism.languages.insertBefore('markup', 'tag', {
'style': {
pattern: /(<style[\s\S]*?>)[\s\S]*?(?=<\/style>)/i,
lookbehind: true,
inside: Prism.languages.css,
alias: 'language-css',
greedy: true
}
});
Prism.languages.markup.tag.addInlined('style', 'css');

Prism.languages.insertBefore('inside', 'attr-value', {
'style-attr': {
Expand Down
2 changes: 1 addition & 1 deletion components/prism-css.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 1 addition & 9 deletions components/prism-javascript.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,15 +77,7 @@ Prism.languages.insertBefore('javascript', 'string', {
});

if (Prism.languages.markup) {
Prism.languages.insertBefore('markup', 'tag', {
'script': {
pattern: /(<script[\s\S]*?>)[\s\S]*?(?=<\/script>)/i,
lookbehind: true,
inside: Prism.languages.javascript,
alias: 'language-javascript',
greedy: true
}
});
Prism.languages.markup.tag.addInlined('script', 'javascript');
}

Prism.languages.js = Prism.languages.javascript;
2 changes: 1 addition & 1 deletion components/prism-javascript.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

44 changes: 44 additions & 0 deletions components/prism-markup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,50 @@ Prism.hooks.add('wrap', function(env) {
}
});

Object.defineProperty(Prism.languages.markup.tag, 'addInlined', {
/**
* Adds an inlined language to markup.
*
* An example of an inlined language is CSS with `<style>` tags.
*
* @param {string} tagName The name of the tag that contains the inlined language. This name will be treated as
* case insensitive.
* @param {string} lang The language key.
* @example
* addInlined('style', 'css');
*/
value: function addInlined(tagName, lang) {
var inside = {};
inside['language-' + lang] = {
pattern: /[\s\S]+/,
inside: Prism.languages[lang]
};

var def = {};
def[tagName] = {
pattern: RegExp(/(<__[\s\S]*?>)(?:<!\[CDATA\[[\s\S]*?\]\]>\s*|[\s\S])*?(?=<\/__>)/.source.replace(/__/g, tagName), 'i'),
lookbehind: true,
greedy: true,
inside: {
'included-cdata': {
pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
inside: {
'content': {
pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
lookbehind: true,
inside: inside
},
'cdata': /^<!\[CDATA\[|\]\]>$/i
}
},
rest: inside
}
};

Prism.languages.insertBefore('markup', 'cdata', def);
}
});

Prism.languages.xml = Prism.languages.extend('markup', {});
Prism.languages.html = Prism.languages.markup;
Prism.languages.mathml = Prism.languages.markup;
Expand Down
2 changes: 1 addition & 1 deletion components/prism-markup.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

64 changes: 46 additions & 18 deletions prism.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -614,6 +614,50 @@ Prism.hooks.add('wrap', function(env) {
}
});

Object.defineProperty(Prism.languages.markup.tag, 'addInlined', {
/**
* Adds an inlined language to markup.
*
* An example of an inlined language is CSS with `<style>` tags.
*
* @param {string} tagName The name of the tag that contains the inlined language. This name will be treated as
* case insensitive.
* @param {string} lang The language key.
* @example
* addInlined('style', 'css');
*/
value: function addInlined(tagName, lang) {
var inside = {};
inside['language-' + lang] = {
pattern: /[\s\S]+/,
inside: Prism.languages[lang]
};

var def = {};
def[tagName] = {
pattern: RegExp(/(<__[\s\S]*?>)(?:<!\[CDATA\[[\s\S]*?\]\]>\s*|[\s\S])*?(?=<\/__>)/.source.replace(/__/g, tagName), 'i'),
lookbehind: true,
greedy: true,
inside: {
'included-cdata': {
pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
inside: {
'content': {
pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
lookbehind: true,
inside: inside
},
'cdata': /^<!\[CDATA\[|\]\]>$/i
}
},
rest: inside
}
};

Prism.languages.insertBefore('markup', 'cdata', def);
}
});

Prism.languages.xml = Prism.languages.extend('markup', {});
Prism.languages.html = Prism.languages.markup;
Prism.languages.mathml = Prism.languages.markup;
Expand Down Expand Up @@ -648,15 +692,7 @@ Prism.languages.css = {
Prism.languages.css['atrule'].inside.rest = Prism.languages.css;

if (Prism.languages.markup) {
Prism.languages.insertBefore('markup', 'tag', {
'style': {
pattern: /(<style[\s\S]*?>)[\s\S]*?(?=<\/style>)/i,
lookbehind: true,
inside: Prism.languages.css,
alias: 'language-css',
greedy: true
}
});
Prism.languages.markup.tag.addInlined('style', 'css');

Prism.languages.insertBefore('inside', 'attr-value', {
'style-attr': {
Expand Down Expand Up @@ -797,15 +833,7 @@ Prism.languages.insertBefore('javascript', 'string', {
});

if (Prism.languages.markup) {
Prism.languages.insertBefore('markup', 'tag', {
'script': {
pattern: /(<script[\s\S]*?>)[\s\S]*?(?=<\/script>)/i,
lookbehind: true,
inside: Prism.languages.javascript,
alias: 'language-javascript',
greedy: true
}
});
Prism.languages.markup.tag.addInlined('script', 'javascript');
}

Prism.languages.js = Prism.languages.javascript;
Expand Down
17 changes: 10 additions & 7 deletions tests/languages/markup!+css+javascript/issue1240.test
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
----------------------------------------------------

[

["tag", [
["tag", [
["punctuation", "<"],
Expand All @@ -18,11 +17,15 @@
["punctuation", ">"]
]],
["script", [
["keyword", "let"],
" str ",
["operator", "="],
["template-string", [["string", "`\r\n\t\t<style>\r\n\t\t\t.foo { color: blue; }\r\n\t\t</style>\r\n\t`"]]],
["punctuation", ";"]
["language-javascript", [
["keyword", "let"],
" str ",
["operator", "="],
["template-string", [
["string", "`\r\n\t\t<style>\r\n\t\t\t.foo { color: blue; }\r\n\t\t</style>\r\n\t`"]
]],
["punctuation", ";"]
]]
]],
["tag", [
["tag", [
Expand All @@ -35,4 +38,4 @@

----------------------------------------------------

Checks for Javascript usage inside Markup, using <script> tags.
Checks for Javascript usage inside Markup, using <script> tags.
78 changes: 64 additions & 14 deletions tests/languages/markup!+css/css_inclusion.test
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,16 @@ foo {
}
</style>

<style>
.bar { }
<![CDATA[
foo {
bar: baz;
}
]]>
#foo { }
</style>

<foo style="bar:baz;">

----------------------------------------------------
Expand All @@ -14,9 +24,7 @@ foo {
["punctuation", "<"],
"style"
]],
["attr-name", [
"type"
]],
["attr-name", ["type"]],
["attr-value", [
["punctuation", "="],
["punctuation", "\""],
Expand All @@ -26,13 +34,57 @@ foo {
["punctuation", ">"]
]],
["style", [
["selector", "foo"],
["punctuation", "{"],
["property", "bar"],
["punctuation", ":"],
" baz",
["punctuation", ";"],
["punctuation", "}"]
["language-css", [
["selector", "foo"],
["punctuation", "{"],
["property", "bar"],
["punctuation", ":"],
" baz",
["punctuation", ";"],
["punctuation", "}"]
]]
]],
["tag", [
["tag", [
["punctuation", "</"],
"style"
]],
["punctuation", ">"]
]],

["tag", [
["tag", [
["punctuation", "<"],
"style"
]],
["punctuation", ">"]
]],
["style", [
["language-css", [
["selector", ".bar"],
["punctuation", "{"],
["punctuation", "}"]
]],
["included-cdata", [
["cdata", "<![CDATA["],
["content", [
["language-css", [
["selector", "foo"],
["punctuation", "{"],
["property", "bar"],
["punctuation", ":"],
" baz",
["punctuation", ";"],
["punctuation", "}"]
]]
]],
["cdata", "]]>"]
]],
["language-css", [
["selector", "#foo"],
["punctuation", "{"],
["punctuation", "}"]
]]
]],
["tag", [
["tag", [
Expand All @@ -49,9 +101,7 @@ foo {
]],
["style-attr", [
["attr-name", [
["attr-name", [
"style"
]]
["attr-name", ["style"]]
]],
["punctuation", "=\""],
["attr-value", [
Expand All @@ -68,4 +118,4 @@ foo {

----------------------------------------------------

Checks for CSS usage inside Markup, using <style> tag and style attribute.
Checks for CSS usage inside Markup, using <style> tag and style attribute.
Loading

0 comments on commit 5712770

Please sign in to comment.