prismjs

What is prismjs?

PrismJS is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It's used to make code snippets in web pages prettier and more readable. It supports a wide range of programming languages and comes with a variety of themes.

What are prismjs's main functionalities?

Syntax Highlighting

This feature allows you to highlight syntax of various programming languages. The code sample demonstrates how to highlight JavaScript code using PrismJS.

Prism.highlight(code, Prism.languages.javascript, 'javascript');

Extensible Language Definitions

PrismJS allows you to extend existing language definitions to add new patterns or modify existing ones. The code sample shows how to add a new pattern to the JavaScript language definition.

Prism.languages.insertBefore('javascript', 'function-variable', {
  'function-variable': {
    pattern: /\bvar\s+[a-z0-9_]+\s*=\s*function\b/,
    alias: 'function'
  }
});

Custom Hooks

You can add custom hooks to modify code or the environment before or after the highlighting process. The code sample demonstrates a hook that replaces occurrences of 'foo' with 'bar' before highlighting.

Prism.hooks.add('before-highlight', function(env) {
  env.code = env.element.textContent.replace(/\bfoo\b/g, 'bar');
});

Themes

PrismJS comes with a variety of themes that can be easily included in your web page to change the appearance of highlighted code. The code sample shows how to include a PrismJS theme in an HTML document.

<link href="themes/prism.css" rel="stylesheet" />

Plugins

PrismJS supports plugins that add additional functionality, such as displaying line numbers. The code sample demonstrates how to include the line numbers plugin.

<script src="plugins/line-numbers/prism-line-numbers.js"></script>

Other packages similar to prismjs

highlight.js

Highlight.js is another popular syntax highlighter that is often compared to PrismJS. It supports more languages out of the box and is used by many projects. However, it is larger in size compared to PrismJS, which aims to be lightweight.

shjs

SHJS is a JavaScript syntax highlighting engine that can highlight source code in HTML documents. It is less popular and not as actively maintained as PrismJS, and it has a smaller community and fewer features.

rainbow

Rainbow is a small, fast, and customizable option for syntax highlighting. It is similar to PrismJS in terms of goals and size, but it has a different plugin system and fewer languages supported by default.

syntaxhighlighter

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. It is one of the older options available and offers a wide range of themes and brushes (language definitions), but it is bulkier compared to PrismJS.

README

Prism

Prism is a lightweight, robust, elegant syntax highlighting library. It's a spin-off project from Dabblet.

You can learn more on http://prismjs.com/.

Why another syntax highlighter?: http://lea.verou.me/2012/07/introducing-prism-an-awesome-new-syntax-highlighter/#more-1841

Contribute to Prism!

Prism depends on community contributions to expand and cover a wider array of use cases. If you like it, considering giving back by sending a pull request. Here are a few tips:

• Read the documentation. Prism was designed to be extensible.
• Do not edit prism.js, it’s just the version of Prism used by the Prism website and is built automatically. Limit your changes to the unminified files in the components/ folder. The minified files are also generated automatically.
• The build system uses gulp to minify the files and build prism.js. Having gulp installed, you just need to run the command gulp.
• Please follow the code conventions used in the files already. For example, I use tabs for indentation and spaces for alignment. Opening braces are on the same line, closing braces on their own line regardless of construct. There is a space before the opening brace. etc etc.
• Please try to err towards more smaller PRs rather than few huge PRs. If a PR includes changes I want to merge and changes I don't, handling it becomes difficult.
• My time is very limited these days, so it might take a long time to review longer PRs (short ones are usually merged very quickly), especially those modifying the Prism Core. This doesn't mean your PR is rejected.
• If you contribute a new language definition, you will be responsible for handling bug reports about that language definition.
• If you add a new language definition, theme or plugin, you need to add it to components.js as well, so that it becomes available to the download build page.

Thank you so much for contributing!!