# 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 highlighted';
    	color: #F00;
    }