The examples in this page serve a dual purpose: They act as unit tests, making it easy to spot bugs, and at the same time demonstrate what Prism can do, on simple and on edge cases.
p { color: red; }
p { color: red; }
p { color: red; }
p { color: red; }
p { color: red; }
No language, should inherit .language-markup
<p>hi!</p>
No language, should inherit .language-markup
<p>hi!</p>
Should not be highlighted.
<p>hi!</p>
<p></p>
<p
>hello!
</p>
<p></p>
<p class=prism></p>
<p data-foo></p>
<p data-foo ></p>
<html:p foo:bar="baz" foo:weee></html:p>
<?xml version="1.0" encoding="utf-8"?>
<svg></svg>
<!DOCTYPE html>
<html></html>
<ns1:description><![CDATA[
CDATA is <not> magical.
]]></ns1:description>
<!-- I'm a comment -->
And i'm not
& ♥   Œ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>I can haz embedded CSS and JS</title>
<style>
@media print {
p { color: red !important; }
}
</style>
</head>
<body>
<h1>I can haz embedded CSS and JS</h1>
<script>
if (true) {
console.log('foo');
}
</script>
</body>
</html>
*{} * {} p {}
ul,
ol {}
p { color: red; }
p { color: red !important; }
@media screen and (min-width: 100px) {}
/* Simple comment here */
content: 'foo';
content: url(foo.png);
var foo = "bar", baz = 5;
(1 + 2 * 3)/4 >= 3 && 4 < 5 || 6 > 7
if (true) {
while (true) {
doSomething();
}
}
var foo = /([^/])\/(\\?.|\[.+?])+?\/[gim]{0,3}/g;
var bar = /\/\*[\w\W]*?\*\//g;
// http://lea.verou.me
var comment = /\/\*[\w\W]*?\*\//g;
// http://lea.verou.me
/* http://lea.verou.me */
var foo = "foo", bar = "He \"said\" 'hi'!"
// "foo"
/* "foo" */
env.content + '</' + env.tag + '>'
var foo = "/" + "/";
// hey, /this doesn’t fail!/ :D
There are certain edge cases where Prism will fail. There are always such cases in every regex-based syntax highlighter. However, Prism dares to be open and honest about them. If a failure is listed here, it doesn’t mean it will never be fixed. This is more of a “known bugs” list, just with a certain type of bug.
"foo /* bar */ baz"; "foo // bar";
/"foo"/;
5 / 6 / 7