/code-box

Extremely simple light box with syntax highlighting specifically for showing code

Primary LanguageJavaScriptMIT LicenseMIT

code-box

Extremely simple light box with syntax highlighting specifically for showing code

Developed on bitbucket, hosted on github, available on bower under code-box.

endorse

codeship status

Usage

  • 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.

3rd Party Libraries

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

Details

Author: Gleb Bahmutov gleb.bahmutov@gmail.com @bahmutov License: MIT Copyright © 2013 Gleb Bahmutov