Skip to content

Commit bba5bfc

Browse files
LeaVerouLeaVerou
committed
Added File Highlight plugin
1 parent cbe9e52 commit bba5bfc

File tree

6 files changed

+177
-33
lines changed

6 files changed

+177
-33
lines changed

‎code.js

+1-31
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ if(!document.body.addEventListener) {
44
return;
55
}
66

7-
$$('[data-src]').forEach(function(element) {
7+
$$('[data-src][data-type="text/html"]').forEach(function(element) {
88
var src = element.getAttribute('data-src'),
99
html = element.getAttribute('data-type') === 'text/html',
1010
contentProperty = html? 'innerHTML' : 'textContent';
@@ -22,42 +22,12 @@ $$('[data-src]').forEach(function(element) {
2222
parent.removeChild(script);
2323
document.head.appendChild(script);
2424
});
25-
26-
$u.event.fire(element, 'contentreceived', {
27-
src: src
28-
});
2925
}
3026
catch (e) {}
3127
}
3228
});
3329
});
3430

35-
document.body.addEventListener('contentreceived', function(evt) {
36-
var pre = evt.target;
37-
38-
if(!/pre/i.test(pre.nodeName)) {
39-
return;
40-
}
41-
42-
var language = {
43-
'js': 'javascript',
44-
'css': 'css',
45-
'html': 'markup',
46-
'svg': 'markup'
47-
}[(evt.src.match(/\.(\w+)$/) || [,''])[1]];
48-
49-
var code = document.createElement('code');
50-
51-
code.className = 'lang-' + language;
52-
53-
code.textContent = pre.textContent;
54-
pre.textContent = '';
55-
56-
pre.appendChild(code);
57-
58-
Prism.highlightElement(code);
59-
});
60-
6131
})();
6232

6333
/**

‎components.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ var components = {
2929
'line-highlight': 'Line Highlight',
3030
'show-invisibles': 'Show Invisibles',
3131
'autolinker': 'Autolinker',
32-
'wpd': 'WebPlatform Docs'
32+
'wpd': 'WebPlatform Docs',
33+
'file-highlight': 'File Highlight'
3334
},
3435
languages: {
3536
meta: {

‎plugins/file-highlight/index.html

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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>File Highlight ▲ Prism plugins</title>
8+
<base href="../.." />
9+
<link rel="stylesheet" href="style.css" />
10+
<link rel="stylesheet" href="prism.css" data-noprefix />
11+
<script src="prefixfree.min.js"></script>
12+
13+
<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
14+
<script src="http://www.google-analytics.com/ga.js" async></script>
15+
</head>
16+
<body>
17+
18+
<header>
19+
<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
20+
21+
<h2>File Highlight</h2>
22+
<p>Fetch external files and highlight them with Prism. Used on the Prism website itself.</p>
23+
</header>
24+
25+
<section class="language-markup">
26+
<h1>How to use</h1>
27+
28+
<p>Use the <code>data-src</code> attribute on empty <code>&lt;pre></code> elements, like so:</p>
29+
30+
<pre><code>&lt;pre data-src="myfile.js">&lt;/pre></code></pre>
31+
32+
<p>You don’t need to specify the language, it’s automatically determined by the file extension.
33+
If, however, the language cannot be determined from the file extension or the file extension is incorrect, you may specify a language as well (with the usual class name way).</p>
34+
35+
<p>Please note that the files are fetched with XMLHttpRequest. This means that if the file is on a different origin, fetching it will fail, unless CORS is enabled on that website.</p>
36+
</section>
37+
38+
<section>
39+
<h1>Examples</h1>
40+
41+
<p>The plugin’s JS code:</p>
42+
<pre data-src="plugins/file-highlight/prism-file-highlight.js"></pre>
43+
44+
<p>This page:</p>
45+
<pre data-src="plugins/file-highlight/index.html"></pre>
46+
47+
<p>File that doesn’t exist:</p>
48+
<pre data-src="foobar.js"></pre>
49+
50+
<p>For more examples, browse around the Prism website. Most large code samples are actually files fetched with this plugin.</p>
51+
</section>
52+
53+
<footer data-src="templates/footer.html" data-type="text/html"></footer>
54+
55+
<script src="prism.js"></script>
56+
<script src="plugins/file-highlight/prism-file-highlight.js"></script>
57+
<script src="utopia.js"></script>
58+
<script src="components.js"></script>
59+
<script src="code.js"></script>
60+
61+
62+
</body>
63+
</html>

‎plugins/file-highlight/prism-file-highlight.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
(function(){
2+
3+
if (!window.Prism || !document.querySelector) {
4+
return;
5+
}
6+
7+
var Extensions = {
8+
'js': 'javascript',
9+
'html': 'markup',
10+
'svg': 'markup'
11+
};
12+
13+
Array.prototype.slice.call(document.querySelectorAll('pre[data-src]')).forEach(function(pre) {
14+
var src = pre.getAttribute('data-src');
15+
var extension = (src.match(/\.(\w+)$/) || [,''])[1];
16+
var language = Extensions[extension] || extension;
17+
18+
var code = document.createElement('code');
19+
code.className = 'language-' + language;
20+
21+
pre.textContent = '';
22+
23+
code.textContent = 'Loading…';
24+
25+
pre.appendChild(code);
26+
27+
var xhr = new XMLHttpRequest();
28+
29+
xhr.open('GET', src, true);
30+
31+
xhr.onreadystatechange = function() {
32+
console.log(xhr.readyState, xhr.status, src);
33+
if (xhr.readyState == 4) {
34+
35+
if (xhr.status < 400 && xhr.responseText) {
36+
code.textContent = xhr.responseText;
37+
38+
Prism.highlightElement(code);
39+
}
40+
else if (xhr.status >= 400) {
41+
code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText;
42+
}
43+
else {
44+
code.textContent = '✖ Error: File does not exist or is empty';
45+
}
46+
}
47+
};
48+
49+
xhr.send(null);
50+
});
51+
52+
})();

‎plugins/file-highlight/prism-file-highlight.min.js

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

‎prism.js

+58-1
Original file line numberDiff line numberDiff line change
@@ -491,4 +491,61 @@ if (Prism.languages.markup) {
491491
}
492492
}
493493
});
494-
}
494+
}
495+
496+
/* **********************************************
497+
Begin prism-file-highlight.js
498+
********************************************** */
499+
500+
(function(){
501+
502+
if (!window.Prism || !document.querySelector) {
503+
return;
504+
}
505+
506+
var Extensions = {
507+
'js': 'javascript',
508+
'html': 'markup',
509+
'svg': 'markup'
510+
};
511+
512+
Array.prototype.slice.call(document.querySelectorAll('pre[data-src]')).forEach(function(pre) {
513+
var src = pre.getAttribute('data-src');
514+
var extension = (src.match(/\.(\w+)$/) || [,''])[1];
515+
var language = Extensions[extension] || extension;
516+
517+
var code = document.createElement('code');
518+
code.className = 'language-' + language;
519+
520+
pre.textContent = '';
521+
522+
code.textContent = 'Loading…';
523+
524+
pre.appendChild(code);
525+
526+
var xhr = new XMLHttpRequest();
527+
528+
xhr.open('GET', src, true);
529+
530+
xhr.onreadystatechange = function() {
531+
console.log(xhr.readyState, xhr.status, src);
532+
if (xhr.readyState == 4) {
533+
534+
if (xhr.status < 400 && xhr.responseText) {
535+
code.textContent = xhr.responseText;
536+
537+
Prism.highlightElement(code);
538+
}
539+
else if (xhr.status >= 400) {
540+
code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText;
541+
}
542+
else {
543+
code.textContent = '✖ Error: File does not exist or is empty';
544+
}
545+
}
546+
};
547+
548+
xhr.send(null);
549+
});
550+
551+
})();

0 commit comments

Comments
 (0)