Extremely simple light box with syntax highlighting specifically for showing code
Developed on bitbucket, hosted on github, available on bower under code-box.
- include jQuery
- include CSS and JavaScript
- make CodeBoxes from pre elements
<head>
...
<link rel="stylesheet" href="code-box.css" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="code-box.js"></script>
</head>
<body>
...
<pre><code language="javascript">
var foo = bar();
</code></pre>
....
<script>
$(function () {
CodeBox('pre');
});
</script>You can specify most of the languages using <code language="javascript"> syntax, javascript by default.
I used two excellent libraries to open lightbox and perform syntax highlighting:
- Magnific Popup - simple and powerful lightbox
- Prism - simple and versatile syntax highlighting in JavaScript
Author: Gleb Bahmutov gleb.bahmutov@gmail.com @bahmutov License: MIT Copyright © 2013 Gleb Bahmutov