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.

Features

• 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 embedded languages (e.g. CSS inside HTML, JavaScript inside HTML)
• Highlights inline code as well, not just code blocks
• Highlights nested languages (CSS in HTML, JavaScript in HTML
• 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)

Requirements: None
Demo: http://prismjs.com/#examples
License: MIT License

Daily Posts, Be Updated, Subscribe:

Want Free Web Resources? Enter Your Email And We'll Send It To You - Daily! (265+ Subscribers)

Yup, it's that straight forward! Enter your email address below and we'll send you the latest web resources to your inbox, everyday. We don't do spam. Ever.

Your Email Address

Trending Posts On Functionn This Week

Share:

Other Interesting Resources: