Submit A Resource
Subscribe By Email (265+)
Jul 31, 2012
Prism - A New Lightweight, Extensible Syntax Highlighter, Built With Modern Web Standards In Mind
Prism is a new lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.
License: MIT License
- Dead simple - Include prism.css and prism.js, use proper HTML5 code tags (code.language-xxxx), done!
- Intuitive - Language classes are inherited so you can only define the language once for multiple code snippets.
- Light as a feather - The core is 1.5KB minified & gzipped. Languages add 0.3-0.5KB each, themes are around 1KB.
- Blazing fast - Supports parallelism with Web Workers, if available.
- Extensible - Define new languages or extend existing ones. Add new features thanks to Prism’s plugin architecture.
- Easy styling - All styling is done through CSS, with sensible class names like .comment, .string, .property etc
Full list of features
- Only 1.5KB minified & gzipped (core). Each language definition adds roughly 300-500 bytes.
- Encourages good author practices. Other highlighters encourage or even force you to use elements that are semantically wrong, like <pre> (on its own) or <script>. Prism forces you to use the correct element for marking up code: <code>. On its own for inline code, or inside a <pre> for blocks of code. In addition, the language is defined through the way recommended in the HTML5 draft: through a language-xxxx class.
- The language definition is inherited. This means that if multiple code snippets have the same language, you can just define it once, in one of their common ancestors.
- Supports parallelism with Web Workers, if available. Disabled by default (why?).
- Very easy to extend without modifying the code, due to Prism’s plugin architecture. Multiple hooks are scattered throughout the source.
- Very easy to define new languages. Only thing you need is a good understanding of regular expressions
- All styling is done through CSS, with sensible class names rather than ugly namespaced abbreviated nonsense.
- Wide browser support: IE9+, Firefox, Chrome, Safari, Opera, most Mobile browsers
- Highlights inline code as well, not just code blocks
- It doesn’t force you to use any Prism-specific markup, not even a Prism-specific class name, only standard markup you should be using anyway. So, you can just try it for a while, remove it if you don’t like it and leave no traces behind.
- Highlight specific lines and/or line ranges (requires plugin)
- Show invisible characters like tabs, line breaks etc (requires plugin)
- Autolink URLs and emails, use Markdown links in comments (requires plugin)
License: MIT License
Trending Posts On Functionn This Week
Other Interesting Resources:
- 20 Fresh, High-Quality Free WordPress Themes 2012
- 50 Fresh, High-Quality Free WordPress Themes 2012 - Edition #2
- The Most Comprehensive Index Of Free Icon Fonts/Iconic Web Fonts
- BLUR.JS - A JQUERY PLUGIN PRODUCING PSUEDO-TRANSPARENT BLURRED ELEMENTS
- Selene - A Stunning & Sleek jQuery UI Theme
- jQuery UI Bootstrap Theme - Bootstrap v2.X's Theme For jQuery UI
- JQuery (275)
- Libraries (132)
- CSS (115)
- frameworks (113)
- Tools (112)
- html (86)
- Github (79)
- html5 (72)
- Node.js (58)
- mobile (52)
- Responsive (49)
- CSS3 (47)
- page effects (45)
- Web Design (41)
- Bootstrap (35)
- twitter (31)
- image effets (22)
- MVC (18)
- generators (18)
- CoffeeScript (16)
- graphics (10)