GitHub image
prismjs
⌘K
Exports
Readme
Classes
1
Token
Docs
Import
Tests
3
References
2
class Token {

Creates a new token.

constructor(

See {@link Prism.Token#type type}

type: string,

See {@link Prism.Token#content content}

content: TokenStream,

The alias(es) of the token.

alias?: string | string[],

A copy of the full string this token was created from.

matchedStr?: string,

See {@link Prism.Token#greedy greedy}

greedy?: boolean
): Token

Converts the given token or token stream to an HTML representation.

The following hooks will be run:

  1. wrap: On each Prism.Token.
static stringify: (

The token or token stream to be converted.

token: TokenStream,

The name of current language.

language: string,

The parent token stream, if any. @return The HTML representation of the token or token stream.

parent?: (string | Token)[]
) => string

The type of the token.

This is usually the key of a pattern in a Grammar.

type: string

The strings or tokens contained by this token.

This will be a token stream if the pattern matched also defined an inside grammar.

content: TokenStream

The alias(es) of the token.

alias: string | string[]

The length of the matched string or 0.

length: number

Whether the pattern that created this token is greedy or not.

greedy: boolean
}
Functions
5
highlightAll
Docs
Import
Tests
3
References
2

This is the most high-level function in Prism’s API. It fetches all the elements that have a .language-xxxx class and then calls Prism.highlightElement on each one of them.

This is equivalent to Prism.highlightAllUnder(document, async, callback).

function highlightAll(

Same as in Prism.highlightAllUnder.

async?: boolean,

Same as in Prism.highlightAllUnder.

callback?: HighlightCallback
): void
highlightAllUnder
Docs
Import
Tests
3
References
2

Fetches all the descendants of container that have a .language-xxxx class and then calls Prism.highlightElement on each one of them.

The following hooks will be run:

  1. before-highlightall
  2. All hooks of Prism.highlightElement for each element.
function highlightAllUnder(

The root element, whose descendants that have a .language-xxxx class will be highlighted.

container: ParentNode,

Whether each element is to be highlighted asynchronously using Web Workers.

async?: boolean,

An optional callback to be invoked on each element after its highlighting is done.

callback?: HighlightCallback
): void
highlightElement
Docs
Import
Tests
3
References
2

Highlights the code inside a single element.

The following hooks will be run:

  1. before-sanity-check
  2. before-highlight
  3. All hooks of Prism.highlightElement. These hooks will only be run by the current worker if async is true.
  4. before-insert
  5. after-highlight
  6. complete
function highlightElement(

The element containing the code. It must have a class of language-xxxx to be processed, where xxxx is a valid language identifier.

element: Element,

Whether the element is to be highlighted asynchronously using Web Workers to improve performance and avoid blocking the UI when highlighting very large chunks of code. This option is disabled by default. Note: All language definitions required to highlight the code must be included in the main prism.js file for asynchronous highlighting to work. You can build your own bundle on the Download page.

async?: boolean,

An optional callback to be invoked after the highlighting is done. Mostly useful when async is true, since in that case, the highlighting is done asynchronously.

callback?: HighlightCallback
): void
highlight
Docs
Import
Tests
3
References
2

Low-level function, only use if you know what you’re doing. It accepts a string of text as input and the language definitions to use, and returns a string with the HTML produced.

The following hooks will be run:

  1. before-tokenize
  2. after-tokenize
  3. wrap: On each Prism.Token.
function highlight(

A string with the code to be highlighted.

text: string,

An object containing the tokens to use. Usually a language definition like Prism.languages.markup.

grammar: Grammar,

The name of the language definition passed to grammar.

language: string
): string
Example
1
Prism.highlight('var foo = true;', Prism.languages.js, 'js');
tokenize
Docs
Import
Tests
3
References
2

This is the heart of Prism, and the most low-level function you can use. It accepts a string of text as input and the language definitions to use, and returns an array with the tokenized code.

When the language definition includes nested tokens, the function is called recursively on each of these tokens.

This method could be useful in other contexts as well, as a very crude parser.

function tokenize(

A string with the code to be highlighted.

text: string,

An object containing the tokens to use. Usually a language definition like Prism.languages.markup.

grammar: Grammar
): (string | Token)[]
Type Aliases
7
languages
Docs
Import
Tests
3
References
2
type Languages = LanguageMapProtocol & LanguageMap
plugins
Docs
Import
Tests
3
References
2
type Record<K', T'> = Record
HighlightCallback
Docs
Import
Tests
3
References
2

A function which will be invoked after an element was successfully highlighted.

type HighlightCallback = (element: Element) => void
GrammarValue
Docs
Import
Tests
3
References
2
type GrammarValue = RegExp | TokenObject | (RegExp | TokenObject)[]
Grammar
Docs
Import
Tests
3
References
2
type Grammar = GrammarRest & Record<string, GrammarValue>
Languages
Docs
Import
Tests
3
References
2
type Languages = LanguageMapProtocol & LanguageMap
TokenStream
Docs
Import
Tests
3
References
2
type TokenStream = string | Token | (string | Token)[]
Namespaces
2
util
encode
Docs
Import
Tests
3
References
2

Encode raw strings in tokens in preparation to display as HTML

function encode(tokens: TokenStream): TokenStream
type
Docs
Import
Tests
3
References
2

Determine the type of the object

function type(o: null): "Null"+8
objId
Docs
Import
Tests
3
References
2

Get the unique id of this object or give it one if it does not have one

function objId(obj: any): Identifier
clone
Docs
Import
Tests
3
References
2

Deep clone a language definition (e.g. to extend it)

function clone<T'>(o: T'): T'
Identifier
Docs
Import
Tests
3
References
2
interface Identifier {
value: number
}
hooks
add
Docs
Import
Tests
3
References
2

Adds the given callback to the list of callbacks for the given hook.

The callback will be invoked when the hook it is registered for is run. Hooks are usually directly run by a highlight function but you can also run hooks yourself.

One callback function can be registered to multiple hooks and the same hook multiple times.

function add<K'>(

The name of the hook.

name: K',

The callback function which is given environment variables.

callback: (env: HookEnvironmentMap[K]) => void
): void+1
run
Docs
Import
Tests
3
References
2

Runs a hook invoking all registered callbacks with the given environment variables.

Callbacks will be invoked synchronously and in the order in which they were registered.

function run<K'>(

The name of the hook.

name: K',

The environment variables of the hook passed to all callbacks registered.

env: HookEnvironmentMap[K]
): void+1
HookCallback
Docs
Import
Tests
3
References
2
type HookCallback = (env: Environment) => void
HookTypes
Docs
Import
Tests
3
References
2
type HookTypes =
|
"before-highlightall"
|
"before-sanity-check"
|
"before-highlight"
|
"before-insert"
|
"after-highlight"
|
"complete"
|
"before-tokenize"
|
"after-tokenize"
|
"wrap"
HookEnvironmentMap
Docs
Import
Tests
3
References
2
interface HookEnvironmentMap {
"before-highlightall": RequiredEnvironment<"selector", Environment>
"before-sanity-check": ElementEnvironment
"before-highlight": ElementEnvironment
"before-tokenize": TokenizeEnvironment
"after-tokenize": TokenizeEnvironment
wrap: RequiredEnvironment<
("language" | "type" | "content" | "tag" | "classes" | "attributes"),
>
}
RequiredEnvironment
Docs
Import
Tests
3
References
2
type RequiredEnvironment<T', U' = Environment> = U' & Required<Pick<U', T'>>
ElementEnvironment
Docs
Import
Tests
3
References
2
type ElementEnvironment = RequiredEnvironment<
("element" | "language" | "grammar" | "code"),
>
ElementHighlightedEnvironment
Docs
Import
Tests
3
References
2
type ElementHighlightedEnvironment = RequiredEnvironment<
"highlightedCode",
>
TokenizeEnvironment
Docs
Import
Tests
3
References
2
type TokenizeEnvironment = RequiredEnvironment<("language" | "grammar" | "code")>
RegisteredHooks
Docs
Import
Tests
3
References
2
interface RegisteredHooks {
}
all
Docs
Import
Tests
3
References
2
interface RegisteredHooks {
}
Interfaces
5
Environment
Docs
Import
Tests
3
References
2
interface Environment {
selector?: string
element?: Element
language?: string
grammar?: Grammar
code?: string
highlightedCode?: string
type?: string
content?: string
tag?: string
classes?: string[]
attributes?: Record<string, string>
parent?: (string | Token)[]
}
GrammarRest
Docs
Import
Tests
3
References
2
interface GrammarRest {
keyword?: GrammarValue
number?: GrammarValue
function?: GrammarValue
string?: GrammarValue
boolean?: GrammarValue
operator?: GrammarValue
punctuation?: GrammarValue
atrule?: GrammarValue
selector?: GrammarValue
property?: GrammarValue
important?: GrammarValue
style?: GrammarValue
comment?: GrammarValue
"class-name"?: GrammarValue

An optional grammar object that will appended to this grammar.

rest?: Grammar
}
TokenObject
Docs
Import
Tests
3
References
2

The expansion of a simple RegExp literal to support additional properties.

interface TokenObject {

The regular expression of the token.

pattern: RegExp

If true, then the first capturing group of pattern will (effectively) behave as a lookbehind group meaning that the captured text will not be part of the matched text of the new token.

lookbehind?: boolean

Whether the token is greedy.

greedy?: boolean

An optional alias or list of aliases.

alias?: string | string[]

The nested tokens of this token.

This can be used for recursive language definitions.

Note that this can cause infinite recursion.

inside?: Grammar
}
LanguageMap
Docs
Import
Tests
3
References
2
interface LanguageMap {
}
LanguageMapProtocol
Docs
Import
Tests
3
References
2
interface LanguageMapProtocol {

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.

extend: (

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

id: string,

The new tokens to append.

redef: Grammar
) => Grammar

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

As this needs to recreate the object (we cannot actually insert before keys in object literals), we cannot just provide an object, we need an object and a key.

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

All references of the old object accessible from Prism.languages or insert will be replace with the new one.

insertBefore: (

The property of root that contains the object to be modified. This is usually a language id.

inside: string,

The key to insert before.

before: string,

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

insert: Grammar,

The object containing inside, i.e. the object that contains the object that will be modified. Defaults to Prism.languages.

root?: LanguageMap
) => Grammar
}
Description
Lightweight, robust, elegant syntax highlighting. A spin-off project from Dabblet.
Install
yarn add prismjs
Copy
Details
MIT License
0 Dependencies
Definitely Typed
Metrics
Weekly Downloads