Socket
Socket
Sign inDemoInstall

prismjs

Package Overview
Dependencies
5
Maintainers
7
Versions
37
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    prismjs

Lightweight, robust, elegant syntax highlighting. A spin-off project from Dabblet.


Version published
Maintainers
7
Install size
1.49 MB
Created

Package description

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

Changelog

Source

1.19.0 (2020-01-13)

New components

  • Latte (#2140) 694a81b8
  • Neon (#2140) 694a81b8
  • QML (#2139) c40d96c6

Updated components

Updated plugins

  • Custom Class

Updated themes

Other

Readme

Source

Prism

Build Status npm

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

You can learn more on prismjs.com.

Why another syntax highlighter?

More themes for Prism!

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.json as well and rebuild Prism by running gulp, so that it becomes available to the download build page. For new languages, please also add a few tests and an example in the examples/ folder.

Thank you so much for contributing!!

Translations

  • 中文说明

Keywords

FAQs

Last updated on 13 Jan 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc