Prism

#Prism| 来源: 网络整理| 查看: 265

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 2KB 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 Used By

Prism is used on several websites, small and large. Some of them are:

Examples

The Prism source, highlighted with Prism (don’t you just love how meta this is?):

This page’s CSS code, highlighted with Prism:

This page’s HTML, highlighted with Prism:

This page’s logo (SVG), highlighted with Prism:

If you’re still not sold, you can view more examples or try it out for yourself.

Full list of features Only 2KB 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 (on its own) or . Prism forces you to use the correct element for marking up code: . On its own for inline code, or inside a 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-xxxx class 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. The 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: Edge, IE11, 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. 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). Limitations Any pre-existing HTML in the code will be stripped off. There are ways around it though. Regex-based so it *will* fail on certain edge cases, which are documented in the known failures page. Some of our themes have problems with certain layouts. Known cases are documented here. No IE 6-10 support. If someone can read code, they are probably in the 95% of the population with a modern browser. Basic usage

You will need to include the prism.css and prism.js files you downloaded in your page. Example:

... ...

Prism does its best to encourage good authoring practices. Therefore, it only works with elements, since marking up code without a element is semantically invalid. According to the HTML5 spec, the recommended way to define a code language is a language-xxxx class, which is what Prism uses. Alternatively, Prism also supports a shorter version: lang-xxxx.

The recommended way to mark up a code block (both for semantics and for Prism) is a element with a element inside, like so:

p { color: red }

If you use that pattern, the will automatically get the language-xxxx class (if it doesn’t already have it) and will be styled as a code block.

Inline code snippets are done like this:

p { color: red }

Note: You have to escape all

【本文地址】

Prism

Prism

今日新闻

推荐新闻