Skip to content

Commit bdca61b

Browse files
GolmoteGolmote
authored
Merge pull request #996 from Golmote/data-uri-highlight
Data-URI Highlight plugin Fix #485
2 parents 1b19ff0 + b6ab75b commit bdca61b

File tree

6 files changed

+197
-27
lines changed

6 files changed

+197
-27
lines changed

‎components.js

+5
Original file line numberDiff line numberDiff line change
@@ -645,6 +645,11 @@ var components = {
645645
"owner": "zeitgeist87",
646646
"after": "unescaped-markup",
647647
"noCSS": true
648+
},
649+
"data-uri-highlight": {
650+
"title": "Data-URI Highlight",
651+
"owner": "Golmote",
652+
"noCSS": true
648653
}
649654
}
650655
};

‎plugins/autolinker/prism-autolinker.js

+32-26
Original file line numberDiff line numberDiff line change
@@ -14,36 +14,42 @@ var url = /\b([a-z]{3,7}:\/\/|tel:)[\w\-+%~/.:#=?&]+/,
1414
// Tokens that may contain URLs and emails
1515
candidates = ['comment', 'url', 'attr-value', 'string'];
1616

17-
Prism.hooks.add('before-highlight', function(env) {
18-
// Abort if grammar has already been processed
19-
if (!env.grammar || env.grammar['url-link']) {
20-
return;
21-
}
22-
Prism.languages.DFS(env.grammar, function (key, def, type) {
23-
if (candidates.indexOf(type) > -1 && Prism.util.type(def) !== 'Array') {
24-
if (!def.pattern) {
25-
def = this[key] = {
26-
pattern: def
27-
};
28-
}
17+
Prism.plugins.autolinker = {
18+
processGrammar: function (grammar) {
19+
// Abort if grammar has already been processed
20+
if (!grammar || grammar['url-link']) {
21+
return;
22+
}
23+
Prism.languages.DFS(grammar, function (key, def, type) {
24+
if (candidates.indexOf(type) > -1 && Prism.util.type(def) !== 'Array') {
25+
if (!def.pattern) {
26+
def = this[key] = {
27+
pattern: def
28+
};
29+
}
2930

30-
def.inside = def.inside || {};
31+
def.inside = def.inside || {};
3132

32-
if (type == 'comment') {
33-
def.inside['md-link'] = linkMd;
34-
}
35-
if (type == 'attr-value') {
36-
Prism.languages.insertBefore('inside', 'punctuation', { 'url-link': url }, def);
37-
}
38-
else {
39-
def.inside['url-link'] = url;
33+
if (type == 'comment') {
34+
def.inside['md-link'] = linkMd;
35+
}
36+
if (type == 'attr-value') {
37+
Prism.languages.insertBefore('inside', 'punctuation', { 'url-link': url }, def);
38+
}
39+
else {
40+
def.inside['url-link'] = url;
41+
}
42+
43+
def.inside['email-link'] = email;
4044
}
45+
});
46+
grammar['url-link'] = url;
47+
grammar['email-link'] = email;
48+
}
49+
};
4150

42-
def.inside['email-link'] = email;
43-
}
44-
});
45-
env.grammar['url-link'] = url;
46-
env.grammar['email-link'] = email;
51+
Prism.hooks.add('before-highlight', function(env) {
52+
Prism.plugins.autolinker.processGrammar(env.grammar);
4753
});
4854

4955
Prism.hooks.add('wrap', function(env) {

‎plugins/autolinker/prism-autolinker.min.js

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

‎plugins/data-uri-highlight/index.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
5+
<meta charset="utf-8" />
6+
<link rel="shortcut icon" href="favicon.png" />
7+
<title>Data-URI Highlight ▲ Prism plugins</title>
8+
<base href="../.." />
9+
<link rel="stylesheet" href="style.css" />
10+
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
11+
<link rel="stylesheet" href="plugins/autolinker/prism-autolinker.css" data-noprefix />
12+
<script src="prefixfree.min.js"></script>
13+
14+
<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
15+
<script src="http://www.google-analytics.com/ga.js" async></script>
16+
</head>
17+
<body>
18+
19+
<header>
20+
<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
21+
22+
<h2>Data-URI Highlight</h2>
23+
<p>Highlights data-URI contents.</p>
24+
</header>
25+
26+
<section>
27+
<h1>How to use</h1>
28+
<p>Data-URIs will be highlighted automatically, provided the needed grammar is loaded.
29+
The grammar to use is guessed using the MIME type information.</p>
30+
</section>
31+
32+
<section>
33+
<h1>Example</h1>
34+
35+
<pre><code class="language-css">div {
36+
border: 40px solid transparent;
37+
border-image: 33.334% url('data:image/svg+xml,&lt;svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"> \
38+
&lt;circle cx="5" cy="5" r="5" fill="%23ab4"/>&lt;circle cx="15" cy="5" r="5" fill="%23655"/> \
39+
&lt;circle cx="25" cy="5" r="5" fill="%23e07"/>&lt;circle cx="5" cy="15" r="5" fill="%23655"/> \
40+
&lt;circle cx="15" cy="15" r="5" fill="hsl(15, 25%, 75%)"/> \
41+
&lt;circle cx="25" cy="15" r="5" fill="%23655"/>&lt;circle cx="5" cy="25" r="5" fill="%23fb3"/> \
42+
&lt;circle cx="15" cy="25" r="5" fill="%23655"/>&lt;circle cx="25" cy="25" r="5" fill="%2358a"/>&lt;/svg>');
43+
padding: 1em;
44+
max-width: 20em;
45+
font: 130%/1.6 Baskerville, Palatino, serif;
46+
}</code></pre>
47+
48+
</section>
49+
50+
<footer data-src="templates/footer.html" data-type="text/html"></footer>
51+
52+
<script src="prism.js"></script>
53+
<script src="plugins/data-uri-highlight/prism-data-uri-highlight.js"></script>
54+
<script src="utopia.js"></script>
55+
<script src="components.js"></script>
56+
<script src="code.js"></script>
57+
58+
59+
</body>
60+
</html>

‎plugins/data-uri-highlight/prism-data-uri-highlight.js

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
(function () {
2+
3+
if (
4+
typeof self !== 'undefined' && !self.Prism ||
5+
typeof global !== 'undefined' && !global.Prism
6+
) {
7+
return;
8+
}
9+
10+
var autoLinkerProcess = function (grammar) {
11+
if (Prism.plugins.autolinker) {
12+
Prism.plugins.autolinker.processGrammar(grammar);
13+
}
14+
return grammar;
15+
};
16+
var dataURI = {
17+
pattern: /(.)\bdata:[^\/]+\/[^,]+,(?:(?!\1)[\s\S]|\\\1)+(?=\1)/,
18+
lookbehind: true,
19+
inside: {
20+
'language-css': {
21+
pattern: /(data:[^\/]+\/(?:[^+,]+\+)?css,)[\s\S]+/,
22+
lookbehind: true
23+
},
24+
'language-javascript': {
25+
pattern: /(data:[^\/]+\/(?:[^+,]+\+)?javascript,)[\s\S]+/,
26+
lookbehind: true
27+
},
28+
'language-json': {
29+
pattern: /(data:[^\/]+\/(?:[^+,]+\+)?json,)[\s\S]+/,
30+
lookbehind: true
31+
},
32+
'language-markup': {
33+
pattern: /(data:[^\/]+\/(?:[^+,]+\+)?(?:html|xml),)[\s\S]+/,
34+
lookbehind: true
35+
}
36+
}
37+
};
38+
39+
// Tokens that may contain URLs
40+
var candidates = ['url', 'attr-value', 'string'];
41+
42+
Prism.plugins.dataURIHighlight = {
43+
processGrammar: function (grammar) {
44+
// Abort if grammar has already been processed
45+
if (!grammar || grammar['data-uri']) {
46+
return;
47+
}
48+
49+
Prism.languages.DFS(grammar, function (key, def, type) {
50+
if (candidates.indexOf(type) > -1 && Prism.util.type(def) !== 'Array') {
51+
if (!def.pattern) {
52+
def = this[key] = {
53+
pattern: def
54+
};
55+
}
56+
57+
def.inside = def.inside || {};
58+
59+
if (type == 'attr-value') {
60+
Prism.languages.insertBefore('inside', def.inside['url-link'] ? 'url-link' : 'punctuation', {
61+
'data-uri': dataURI
62+
}, def);
63+
}
64+
else {
65+
if (def.inside['url-link']) {
66+
Prism.languages.insertBefore('inside', 'url-link', {
67+
'data-uri': dataURI
68+
}, def);
69+
} else {
70+
def.inside['data-uri'] = dataURI;
71+
}
72+
}
73+
}
74+
});
75+
grammar['data-uri'] = dataURI;
76+
}
77+
};
78+
79+
Prism.hooks.add('before-highlight', function (env) {
80+
// Prepare the needed grammars for this code block
81+
if (dataURI.pattern.test(env.code)) {
82+
for (var p in dataURI.inside) {
83+
if (dataURI.inside.hasOwnProperty(p)) {
84+
if (!dataURI.inside[p].inside && dataURI.inside[p].pattern.test(env.code)) {
85+
var lang = p.match(/^language-(.+)/)[1];
86+
if (Prism.languages[lang]) {
87+
dataURI.inside[p].inside = {
88+
rest: autoLinkerProcess(Prism.languages[lang])
89+
};
90+
}
91+
}
92+
}
93+
}
94+
}
95+
96+
Prism.plugins.dataURIHighlight.processGrammar(env.grammar);
97+
});
98+
}());

‎plugins/data-uri-highlight/prism-data-uri-highlight.min.js

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

0 commit comments

Comments
 (0)