Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Markup: Added support for CSS and JS inside of CDATAs #1660

Merged
merged 5 commits into from Mar 4, 2019
Merged

Markup: Added support for CSS and JS inside of CDATAs #1660

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3c917ed
Added support for CSS styles and JS scripts inside of CDATAs
RunDevelopment Dec 11, 2018
1f97d1a
Resolved merge conflict
RunDevelopment Dec 24, 2018
39caad3
Any number of CDATAs can be used
RunDevelopment Dec 24, 2018
cbd5b8b
Resolved conflicts
RunDevelopment Feb 13, 2019
366fab8
Resolved conflict
RunDevelopment Mar 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 1 addition & 9 deletions components/prism-css.js
View file
Open in desktop
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
Open in desktop

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
Open in desktop
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
Open in desktop

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
Open in desktop
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.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
Open in desktop

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
Open in desktop
Expand Up @@ -609,6 +609,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.markup;
Prism.languages.html = Prism.languages.markup;
Prism.languages.mathml = Prism.languages.markup;
Expand Down Expand Up @@ -643,15 +687,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 @@ -792,15 +828,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
Open in desktop
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
Open in desktop
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.