Lightweight, robust, elegant syntax highlighting.

Overview

Prism

Build Status npm

Prism is a lightweight, robust, and 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, consider 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. prism.js and all minified files are also generated automatically by our build system.
  • The build system uses gulp to minify the files and build prism.js. With all of Prism's dependencies installed, you just need to run the command npm run build.
  • 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 a few huge PRs. If a PR includes changes that I want to merge and also changes that I don't, handling it becomes difficult.
  • My time is very limited these days, so it might take a long time to review bigger PRs (small 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 or plugin, you need to add it to components.json as well and rebuild Prism by running npm run build, 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.
  • Go to prism-themes if you want to add a new theme.

Thank you so much for contributing!!

Software requirements

Prism will run on almost any browser and Node.js version but you need the following software to contribute:

  • Node.js >= 10.x
  • npm >= 6.x

Translations

Comments
  • Plugins: Toolbar & Copy to Clipboard

    Plugins: Toolbar & Copy to Clipboard

    I'm using Prism as the syntax highlighter for my WordPress plugin, WP-Gistpen. I've built a toolbar plugin that I'd like to contribute to Prism. I've got a first pass at extracting the plugin from its CommonJS origins,, but I need some feedback on how to change it to fit the Prism way of doing things, e.g. the HTML API. I also see some possible synergy with the Parse Settings plugin.

    The Toolbar exposes two methods: a hook method, which is registered with Prism's complete hook, and a registerButton method, which takes a callback that creates the buttons. The callback will be passed the env and should return an a or span element, which other plugins can use to register themselves with the Toolbar to get their text or link to display.

    I've also created a Clipboard plugin is an example of this callback, which creates an anchor tag that, when clicked, copies the code to the clipboard. I plan to extract that into a Prism plugin as well, but I'm not sure how Prism wants to handle dependencies like Clipboard.js, or how the download page will work with internal dependencies like this. In the interest of user friendliness, what's the best approach to take here?

    Prior art:

    • https://github.com/PrismJS/prism/issues/280
    • https://github.com/PrismJS/prism/issues/286
    • http://dev.misterphilip.com/prism/plugins/toolbar/
    • https://github.com/PrismJS/prism/pull/142/files

    Open Questions:

    • [x] Should the registerButton method be polymorphic?
    • [x] How can the CSS styles be improved?
    • [x] How should we handle 3rd party dependencies, like Clipboard.js?
    • [x] What should the HTML API be? (See: #910)
    • [x] How do we deal with this plugin & filename plugin conflicts? (See: #910, #914)
    opened by mAAdhaTTah 70
  • Combine regexes in arrays if possible

    Combine regexes in arrays if possible

    It is often useful to split up a big regex into separate logical units. Unfortunately this is bad for performance, because the input string has to be separately traversed for every unit.

    This patch adds a simple optimization function, which walks through a grammar and combines regexes that are split up in an array into one single regex.

    This can only be done, if the array contains only regexes, which all have the same modifiers and no back references.

    enhancement needs consensus 
    opened by zeitgeist87 54
  • Without master branch, bower doesn't work

    Without master branch, bower doesn't work

    bower install prism --save-dev
    bower not-cached    git://github.com/LeaVerou/prism.git#*
    bower resolve       git://github.com/LeaVerou/prism.git#*
    bower ENORESTARGET  Tag/branch master does not exist
    
    opened by kud 47
  • Partial solution for the

    Partial solution for the "Comment-like substrings"-problem

    This patch introduces a new attribute called greedy. The attribute is a simple boolean flag. If there is no match for a greedy pattern it can concatenate the next two tokens into a single string and try to match on this string again. If a match is found on the second attempt, then the old tokens are deleted and replaced by the new match.

    This solves the "Comment-like substrings"-problem for exactly one comment at very little cost. With this patch the following code is highlighted correctly:

    "foo /* bar */ baz"; "foo // bar";
    /lala"test"sdf/;
    

    This approach fails if there are more than one comments inside the string:

    "foo /* bar */ baz /* bar */ baz";
    
    opened by zeitgeist87 45
  • Higlighting issue with strings & comments

    Higlighting issue with strings & comments

    This is the combined issue for all related issues (#187, #183, #155, #153).

    There is a fight between the highlighting of strings vs. comments. Currently only one of them can work

    // this is "a string"
    "string with /* comment";
    

    I will take a look whether this issue can be "fixed" (it can't be fixed for all cases due to the limited power of regular expressions though).

    bug language-definitions 
    opened by apfelbox 43
  • Add support for Command Line highlighting

    Add support for Command Line highlighting

    Adds the ability to style shell examples as shown in this article:

    https://chriswells.io/blog/view/style-shell-commands-with-css

    Please let me know if I missed any files that I should have created or edited.

    opened by chriswells0 35
  • Implement test suite runner

    Implement test suite runner

    I finally got around on implementing a simple (?) test suite runner. For now, the test suite runs in node, so just the language definitions will be tested, not the integration with the browser. We won't catch things like unsupported methods in old browser for now. (So, if your language definition uses [].forEach the test suite will pass (as node supports this), but IEold will fail as the method is unsupported there.)

    Test case location

    All tests are located in /tests/languages/${language}/${file}. ${language} must match the name of the language definition in components.js. ${file} is just a file name and only used to provide an info to the test runner.

    So if the directory looks like this:

    .
    └── languages
        ├── css
        │   └── blabla.css
        └── javascript
            └── testcase1.js
    

    your output will look like this: screen shot 2015-06-01 at 20 51 10

    As you can see the file name doesn't matter, it is only included in the test description (that you can quickly find your failing tests).

    Test case specification

    Please provide feedback / better ideas than mine here.

    An example test case file looks like this:

    var a = 5;
    
    --------
    
    [
        ["keyword", "var"],
        ["operator", "="],
        ["number", "5"],
        ["punctuation", ";"]
    ]
    

    It consists of

    ... language snippet...
    
    /^----*\w*$/m                        <-- yep, thats the exact regex that splits the test case file
    
    ... JSON of expected token stream ...
    

    Please consider that the test case specification does use some simplifications / expectations. I tried to find a well enough mix of "too much magic" and "way too much to write and manage". Please be lenient with me here.

    1. The expected token stream is not an array of objects (like the result of Prism.tokenize()), but it is an array of two-element arrays. The only reason to do this is to reduce the amount of text you need to write for a test case.
    2. Only token.type and token.content are compared, something like token.alias is just ignored.
    3. The JSON part must be valid JSON. Although a little bit uncomfortable, this is my take against reinventing the wheel.
    4. If the test case file can't be properly parsed (the split produces more or less that two parts) the test case is failed.
    5. All non-matched parts (strings in the compiled token stream) are simply ignored.
    6. An entry in the expected token stream consists of [${type}, ${content}]
    7. The Prism test instances are isolated.

    Implemention

    The implemention looks like this:

    1. Load the complete test suite (= a nested array of all test case files).
    2. Define the test for all tests.
    3. Run the tests using mocha, chai and an isolated Prism instance.

    As the language definitions (and Prism itself) doesn't use proper encapsulation (Prism is a global singleton), some hoop-jumping is required for this work: we need to run the source code in a vm in node (natively supported in require("vm"), docs) and pass the context manually in their. This way we can build completely fresh and isolated Prism instances for each test (so that they won't interfere with each other).

    This kills performance but as we can't just use new Prism(), this is required for ensuring that the tests run in isolation (even different tests in the same language should ideally use different instances – as they currently do).

    This is not exactly ideal for performance... but let's write tests and worry about testing performance later! :tada:

    ToDo

    • [x] test it / review it
    • [x] discuss the test case file format
    • [x] write tests for the languages (PRs welcome :sunglasses:)
    • [x] add travis integration
    • [x] write documentation explaining the testing procedure

    Intended to replace/refresh #355

    opened by apfelbox 34
  • Use languages with node.js

    Use languages with node.js

    Currently I'm using Prism with node, I can do syntax highlight for the few languages that are part of prism.js file. How can I use the ones found on components directoy?

    Thank you

    opened by am 31
  • IE8 support discussion

    IE8 support discussion

    I understand a decision has been made not to support these browsers. Your blog post mentioned nothing would break in IE8, though — would you be open to updating Prism.js so it doesn’t throw errors in IE6?

    (I quickly “tested” this by opening prismjs.com in IE6, so perhaps the issue is not in Prism.js at all — but either way it would be nice to have this mentioned on the home page.)

    opened by mathiasbynens 30
  • Defer breaks autoload (when loading page without having resources cached)

    Defer breaks autoload (when loading page without having resources cached)

    Information:

    • Prism version: 1.17.1
    • Plugins: autoloader
    • Environment: Browser

    Description When the page is loaded without the JS resources being cached and the scripts are marked with defer then the syntax highlighting is not applied.

    Example Without defer (workking): https://jsfiddle.net/f5vj903e/
    With defer (not working): https://jsfiddle.net/f5vj903e/1/

    bug 
    opened by BrainStone 29
  • New language: CIL

    New language: CIL

    I discovered that Prism.js doesn't have CIL (Common Intermediate Language, from .NET) support when I wrote a blog post that contained some - so I decided to create my own grammar, since the process looked fairly easy (it was!).

    opened by sbrl 27
  • Autolinks not tokenized in Markdown

    Autolinks not tokenized in Markdown

    Information

    • Language: Markdown
    • Plugins: none

    Description

    Autolinks (URLs wrapped with < and >) are not tokenized like normal links in Markdown.

    CommonMark spec

    CommonMark dingus

    Code snippet

    Test page

    The code being highlighted incorrectly.
    <https://example.com>
    
    [example.com](https://example.com)
    
    language-definitions 
    opened by MattIPv4 0
  • Fenced code in quotes not tokenized in Markdown

    Fenced code in quotes not tokenized in Markdown

    Information

    • Language: Markdown
    • Plugins: None

    Description

    Fenced code blocks that are within a block quote are not tokenized as as code block in Markdown.

    Under the CommonMark spec, code blocks are valid within a block quote: CommonMark Dingus

    Code snippet

    Test page

    The code being highlighted incorrectly.
    ```
    test
    ```
    
    > ```
    > test
    > ```
    
    language-definitions 
    opened by MattIPv4 0
  • Python highlighter does not accepts accented characters

    Python highlighter does not accepts accented characters

    Information

    • Language: Python
    • Plugins: none

    Description

    In python we can use accents in identifiers but the highlighting breaks on accented identifiers.

    Frame 15token

    Frame 16 no token

    Code snippet

    Test page

    language-definitions 
    opened by fcrozatier 0
  • Starlark

    Starlark

    Language A configuration language from Google which is a Python subset. Previously named "skylark".

    Used by

    • build tools like Bazel, Buck
    • deployment tools like Tilt
    • source transformation tools like Copybara

    Additional resources Specification: https://github.com/bazelbuild/starlark/blob/master/spec.md GitHub syntax highlighter supports it: https://github.com/github/linguist/pull/4759

    language-definitions new language 
    opened by alexeagle 0
  • Request: Alternate output formats, including SVG, images

    Request: Alternate output formats, including SVG, images

    Motivation

    I'd like to be able to produce syntax highlighting of code that is able to display in places where custom html/css is not allowed... for example inside of markdown on github. Additionally: inside PDFs, in comments on reddit/stackoverflow, etc.

    As such, it'd be preferable if there was an alternate output mode besides the default.

    Description

    If this library could produce SVG (with all the colors/styling included inline), that SVG output could be sent to a .svg file, which could then be displayed in these places. For markdown display, the solution I've seen in other places is including the image itself and then right below it, a <details> element (collapsed by default) with a code block in it, to be able to easily copy-paste the code that was rendered in the image.

    Additionally, an image rendering library could be included/used to produce a .PNG file equivalent of the syntax highlighting. Again, the <details> trick for markdown makes the text still accessible/copy-paste'able.

    Alternatives

    Converting the HTML/CSS to SVG is possible, but it seems to be rather messy in my early experiments.

    Additional context...

    I have designed a new programming language, and written my own tokenizer logic (in JS). Right now, I can output HTML/CSS for syntax highlighting. But I don't yet have a way for my syntax highlighting to be shown on markdown pages/etc.

    While I was exploring just building this SVG output capability into my own tool, I decided to explore if perhaps this could just be something that the popular syntax highlighter tools (PrismJS, HighlightJS) could support.

    That way, I could use the same tool/workflow for producing syntax highlighting of my language, but other languages as well (JS, Haskell, etc). This would be useful in showing people comparisons of the same code snippet equivalent in various languages.

    I searched and didn't find anyone talking about this type of alternate output. Apologies if I missed prior support/discussions of such capabilities.

    enhancement 
    opened by getify 0
Releases(v1.29.0)
JavaScript syntax highlighter with language auto-detection and zero dependencies.

Highlight.js Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It can work with pretty muc

highlight.js 20.8k Jan 5, 2023
Syntax implementation of Laravel's's Blade language for highlight.js

Blade language definition for Highlight.js Syntax implementation of Laravel's's Blade language for highlight.js. Support us We invest a lot of resourc

Spatie 12 Jul 6, 2022
lightweight (~5kb) code editor custom element with syntax highlighting

code-edit lightweight (~5kb) code editor custom element with syntax highlighting ?? Install · ?? Example · ?? API docs · ?? Releases · ???? Contribute

stagas 5 Apr 14, 2022
Pug – robust, elegant, feature rich template engine for Node.js

Pug Full documentation is at pugjs.org Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.j

Pug 21.1k Dec 30, 2022
A refined tool for exploring open-source projects on GitHub with a file tree, rich Markdown and image previews, multi-pane multi-tab layouts and first-class support for Ink syntax highlighting.

Ink codebase browser, "Kin" ?? The Ink codebase browser is a tool to explore open-source code on GitHub, especially my side projects written in the In

Linus Lee 20 Oct 30, 2022
Adds Syntax Highlighting & Hint for TiddlyWiki5 tiddlers (text/vnd.tiddlywiki) to the CodeMirror.

CodeMirror-Mode-TiddlyWiki5 Adds Syntax Highlighting for TiddlyWiki5 tiddlers (text/vnd.tiddlywiki) to the CodeMirror, along with some other useful ed

Ke Wang 18 Dec 30, 2022
Opinionated syntax highlighting with shiki for markdown-it.

式神 shikigami Opinionated syntax highlighting with shiki for markdown-it. Installation Just use your favorite package manager. npm i @nrsk/shikigami Th

Vladislav Mamon 6 Sep 30, 2022
React component library for displaying code samples with syntax highlighting!!

react-code-samples usage example: import {} from 'react-code-samples'; import 'highlight.js/styles/default.css'; // or use another highlight js style

Pranav Teegavarapu 8 Jan 3, 2022
Vite plugin to convert markdown to html with front-matter extraction and build-time syntax highlighting

Vite plugin to convert markdown to html with front-matter extraction and build-time syntax highlighting

Saurabh Daware 9 Sep 18, 2022
Syntax highlighting, like GitHub

Close up of The Starry Night by Vincent van Gogh (1889) with examples of starry-night over it starry-night Syntax highlighting, like what GitHub uses

Titus 585 Dec 21, 2022
Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes.

render-gfm Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes. GitHub Repository npm Package Do

Shaun Bharat 12 Oct 10, 2022
Syntax Highlighter supporting multiple languages, themes, fonts, highlighting from a URL, local file or post text.

Crayon Syntax Highlighter Supports multiple languages, themes, fonts, highlighting from a URL, local file or post text. Written in PHP and jQuery. Cra

Aram Kocharyan 1.1k Nov 26, 2022
Elegant, responsive, flexible and lightweight modal plugin with jQuery.

iziModal Elegant, responsive, flexible and lightweight modal plugin with jQuery. izimodal.marcelodolza.com Fast Responsive Animated Lightweight Custom

Marcelo Dolza 2.1k Dec 30, 2022
Elegant, responsive, flexible and lightweight notification plugin with no dependencies.

iziToast Elegant, responsive, flexible and lightweight notification plugin with no dependencies. izitoast.marcelodolza.com Fast Responsive Animated Li

Marcelo Dolza 2.5k Jan 2, 2023
Coloris - A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.

Coloris A lightweight and elegant JavaScript color picker written in vanilla ES6. Convert any text input field into a color field. View demo Features

Momo Bassit 126 Dec 27, 2022
A Bower wrapper for @bartaz modification to the jQuery Term Highlighting plugin.

jQuery.Highlight.js Text highlighting plugin for jQuery. Original code and documentation. Install API Examples Attribution Install How to use this plu

Ilya Radchenko 46 Dec 30, 2022
Highlighting the best apps and builders on the Farcaster community.

FarApps Highlighting the best apps and builders on the Farcaster community. Getting Started This project uses Next.js. Install dependencies and run th

null 15 Dec 30, 2022
A lib for text highlighting by using Canvas.

canvas-highlighter 基于 canvas 实现的文本划词高亮,与文本展示的结构完全解耦,不改变文本内容的 DOM 结构。 Installation npm install canvas-highlighter Usage 最简单的实现文本划词直接高亮 import CanvasHig

null 72 Dec 24, 2022
✏️ Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped

Sugar High Introduction Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped Usage npm install --save sugar-high import { h

Jiachi Liu 67 Dec 8, 2022
A professional front-end template for building fast, robust, and adaptable web apps or sites.

HTML5 Boilerplate HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites. This project is t

H5BP 53.8k Dec 28, 2022