How to use

Filter highlightAll provides you with ways to filter the element the highlightAll and highlightAllUnder methods actually highlight. This can be very useful when you use Prism’s automatic highlighting when loading the page but want to exclude certain code blocks.

API

In Prism.plugins.filterHighlightAll you can find the following:

add(condition: (value: { element, language: string }) => boolean): void: Adds a new filter which will only allow an element to be highlighted if the given function returns true for that element.
This can be used to define a custom language filter.
addSelector(selector: string): void: Adds a new filter which will only allow an element to be highlighted if the element matches the given CSS selector.
reject.add(condition: (value: { element, language: string }) => boolean): void: Same as add, but only elements which do not fulfill the condition will be highlighted.
reject.addSelector(selector: string): void: Same as addSelector, but only elements which do not match the selector will be highlighted.
filterKnown: boolean = false: Set this to true to only allow known languages. Code blocks without a set language or an unknown language will not be highlighted.

An element will only be highlighted by the highlightAll and highlightAllUnder methods if all of the above accept the element.

Attributes

You can also add the following data-* attributes to the script which contains the Filter highlightAll plugin.

<script src="..." data-filter-selector="<css selector>">: This attribute is a shorthand for Prism.plugins.filterHighlightAll.addSelector. The value of the attribute will be passed as is to the addSelector function.
<script src="..." data-reject-selector="<css selector>">: This attribute is a shorthand for Prism.plugins.filterHighlightAll.reject.addSelector. The value of the attribute will be passed as is to the rejectSelector function.
<script src="..." data-filter-known>: This attribute can be used to set the value of Prism.plugins.filterHighlightAll.filterKnown. filterKnown will be set to true if the attribute is present, false otherwise.

Examples

The following code is used to define a filter on this page.

// <code> elements with a .no-highlight class will be ignored
Prism.plugins.filterHighlightAll.reject.addSelector('code.no-highlight');
Prism.plugins.filterHighlightAll.reject.addSelector('pre.no-highlight > code');

// don't highlight CSS code
Prism.plugins.filterHighlightAll.add(function (env) {
	return env.language !== 'css';
});

The results:

let foo = "I'm not being highlighted";

a.link::after {
	content: 'also not being highlighted';
	color: #F00;
}

Prism will ignore these blocks, so you can even define your own static highlighting which Prism would normally remove.

a.link::before {
	content: 'I just do my own highlighting';
	color: #F00;
}