Prism. languages


This namespace contains all currently loaded languages and the some helper functions to create and modify languages.


(static) extend(id, redef) → {Grammar}


Creates a deep copy of the language with the given id and appends the given tokens.

If a token in redef also appears in the copied language, then the existing token in the copied language will be overwritten at its original position.

Best practices

Since the position of overwriting tokens (token in redef that overwrite tokens in the copied language) doesn't matter, they can technically be in any order. However, this can be confusing to others that trying to understand the language definition because, normally, the order of tokens matters in Prism grammars.

Therefore, it is encouraged to order overwriting tokens according to the positions of the overwritten tokens. Furthermore, all non-overwriting tokens should be placed after the overwriting ones.

Prism.languages['css-with-colors'] = Prism.languages.extend('css', {
    // Prism.languages.css already has a 'comment' token, so this token will overwrite CSS' 'comment' token
    // at its original position
    'comment': { ... },
    // CSS doesn't have a 'color' token, so this token will be appended
    'color': /\b(?:red|green|blue)\b/
Name Type Description
id string

The id of the language to extend. This has to be a key in Prism.languages.

redef Grammar

The new tokens to append.


The new language created.


(static) insertBefore(inside, before, insert, rootopt) → {Grammar}


Inserts tokens before another token in a language definition or any other grammar.


This helper method makes it easy to modify existing languages. For example, the CSS language definition not only defines CSS highlighting for CSS documents, but also needs to define highlighting for CSS embedded in HTML through <style> elements. To do this, it needs to modify Prism.languages.markup and add the appropriate tokens. However, Prism.languages.markup is a regular JavaScript object literal, so if you do this: = {
    // token

then the style token will be added (and processed) at the end. insertBefore allows you to insert tokens before existing tokens. For the CSS example above, you would use it like this:

Prism.languages.insertBefore('markup', 'cdata', {
    'style': {
        // token

Special cases

If the grammars of inside and insert have tokens with the same name, the tokens in inside's grammar will be ignored.

This behavior can be used to insert tokens after before:

Prism.languages.insertBefore('markup', 'comment', {
    'comment': Prism.languages.markup.comment,
    // tokens after 'comment'


The main problem insertBefore has to solve is iteration order. Since ES2015, the iteration order for object properties is guaranteed to be the insertion order (except for integer keys) but some browsers behave differently when keys are deleted and re-inserted. So insertBefore can't be implemented by temporarily deleting properties which is necessary to insert at arbitrary positions.

To solve this problem, insertBefore doesn't actually insert the given tokens into the target object. Instead, it will create a new object and replace all references to the target object with the new one. This can be done without temporarily deleting properties, so the iteration order is well-defined.

However, only references that can be reached from Prism.languages or insert will be replaced. I.e. if you hold the target object in a variable, then the value of the variable will not change.

var oldMarkup = Prism.languages.markup;
var newMarkup = Prism.languages.insertBefore('markup', 'comment', { ... });

assert(oldMarkup !== Prism.languages.markup);
assert(newMarkup === Prism.languages.markup);
Name Type Attributes Description
inside string

The property of root (e.g. a language id in Prism.languages) that contains the object to be modified.

before string

The key to insert before.

insert Grammar

An object containing the key-value pairs to be inserted.

root Object.<string, any> <optional>

The object containing inside, i.e. the object that contains the object to be modified.

Defaults to Prism.languages.


The new grammar object.