https://prismjs.com

PrismPrism 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 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 < and & characters inside  elements (code blocks and inline snippets) with < and & respectively, or else the browser might interpret them as an HTML tag or entity. If you have large portions of HTML code, you can use the Unescaped Markup plugin to work around this. Language inheritance To make things easier however, Prism assumes that the language class is inherited. Therefore, if multiple  elements have the same language, you can add the language-xxxx class on one of their common ancestors. This way, you can also define a document-wide default language, by adding a language-xxxx class on the  or  element. If you want to opt-out of highlighting a  element that inherits its language, you can add the language-none class to it. The none language can also be inherited to disable highlighting for the element with the class and all of its descendants. If you want to opt-out of highlighting but still use plugins like Show Invisibles, add use language-plain class instead. Manual highlighting If you want to prevent any elements from being automatically highlighted and instead use the API, you can set Prism.manual to true before the DOMContentLoaded event is fired. By setting the data-manual attribute on the  or   Usage with CDNs In combination with CDNs, we recommend using the Autoloader plugin which automatically loads languages when necessary. The setup of the Autoloader, will look like the following. You can also add your own themes of course.    ...    ...     Please note that links in the above code sample serve as placeholders. You have to replace them with valid links to the CDN of your choice. CDNs which provide PrismJS are e.g. cdnjs, jsDelivr, and UNPKG. Usage with Webpack, Browserify, & Other Bundlers If you want to use Prism with a bundler, install Prism with npm: $ npm install prismjs You can then import into your bundle: import Prism from 'prismjs'; To make it easy to configure your Prism instance with only the languages and plugins you need, use the babel plugin, babel-plugin-prismjs. This will allow you to load the minimum number of languages and plugins to satisfy your needs. See that plugin's documentation for configuration details. Usage with Node If you want to use Prism on the server or through the command line, Prism can be used with Node.js as well. This might be useful if you're trying to generate static HTML pages with highlighted code for environments that don't support browser-side JS, like AMP pages. Example: const Prism = require('prismjs'); // The code snippet you want to highlight, as a string const code = `var data = 1;`; // Returns a highlighted HTML string const html = Prism.highlight(code, Prism.languages.javascript, 'javascript'); Requiring prismjs will load the default languages: markup, css, clike and javascript. You can load more languages with the loadLanguages() utility, which will automatically handle any required dependencies. Example: const Prism = require('prismjs'); const loadLanguages = require('prismjs/components/'); loadLanguages(['haml']); // The code snippet you want to highlight, as a string const code = `= ['hi', 'there', 'reader!'].join " "`; // Returns a highlighted HTML string const html = Prism.highlight(code, Prism.languages.haml, 'haml'); Note: Do not use loadLanguages() with Webpack or another bundler, as this will cause Webpack to include all languages and plugins. Use the babel plugin described above. Note: loadLanguages() will ignore unknown languages and log warning messages to the console. You can prevent the warnings by setting loadLanguages.silent = true. Supported languages This is the list of all languages currently supported by Prism, with their corresponding alias, to use in place of xxxx in the language-xxxx (or lang-xxxx) class: Couldn’t find the language you were looking for? Request it! Plugins Plugins are additional scripts (and CSS code) that extend Prism’s functionality. Many of the following plugins are official, but are released as plugins to keep the Prism Core small for those who don’t need the extra functionality. No assembly required to use them. Just select them in the download page. It’s very easy to write your own Prism plugins. Did you write a plugin for Prism that you want added to this list? Send a pull request! Third-party language definitions SassDoc Sass/Scss comments Liquibase CLI Bash language extension Third-party tutorials Several tutorials have been written by members of the community to help you integrate Prism into multiple different website types and configurations: How to Add Prism.js Syntax Highlighting to Your WordPress Site Escape HTML Inside  or 
 Tag to Entities to Display Raw Code with PrismJS Adding a Syntax Highlighter Shortcode Using Prism.js | WPTuts+ Implement PrismJs Syntax Highlighting to your Blogger/BlogSpot How To Re-Run Prism.js On AJAX Content Highlight your code syntax with Prism.js A code snippet content element powered by Prism.js for TYPO3 CMS Code syntax highlighting with Angular and Prism.js Code syntax highlighting in Gutenberg, WordPress block editor Code Highlighting with Prism.js in Drupal Code highlighting in React using Prism.js Using Prism.js in React Native PrismJS Tutorial | Implement Prism in HTML and React Code syntax highlighting in Pug with :highlight and :markdown filters using pug-loader and Prism.js Please note that the tutorials listed here are not verified to contain correct information. Read at your risk and always check the official documentation here if something doesn’t work :) Have you written a tutorial about Prism that’s not already included here? Send a pull request! Credits Special thanks to Michael Schmidt, James DiGioia, Golmote and Jannik Zschiesche for their contributions and for being amazing maintainers. Prism would not have been able to keep up without their help. To Roman Komarov for his contributions, feedback and testing. To Zachary Forrest for coming up with the name “Prism” To stellarr for the spectrum background used on this page To Jason Hobbs for encouraging me to release this script as standalone
en
en
1727670738
https://prismjs.com

Sahypaňyzy redaktirläňmi?































Näme edýärsiň?