DOCSEARCHbyAlgolia
Submit Docs

PrismJS

repository·v2·Indexed 12 days ago

https://github.com/prismjs/prism

A lightweight, robust, and extensible syntax highlighting library for the browser and Node.js. Version 1.29.0 includes a variety of plugins such as Autoloader for dynamic grammar fetching, Autolinker for converting URLs and emails into links, Command Line for terminal-style displays, and Copy to Clipboard for adding copy buttons to code blocks.

Tokens
21K
Snippets
67
Records
83
Agent score
96%

What's inside Prism

  2. How to use the Filter highlightAll plugin

    v2

    The filter-highlight-all plugin allows you to restrict which elements the highlightAll and highlightAllUnder methods actually process. This is useful when you want to exclude specific code blocks from Prism's automatic highlighting, such as blocks with specific classes or specific languages.

    An element is only highlighted if it passes all active filters. You can add inclusion filters (only highlight if...) or rejection filters (only highlight if NOT...).

    To use it, you can interact with the Prism.plugins.filterHighlightAll API or use shorthand data-* attributes on the plugin's <script> tag.

    // Example: Rejecting elements with a specific class
Prism.plugins.filterHighlightAll.reject.addSelector('code.no-highlight');

// Example: Only highlighting non-CSS languages
Prism.plugins.filterHighlightAll.add((env) => {
    return env.language !== 'css';
});

  3. Handle multi-file GitHub Gists

    v2

    GitHub Gists can contain multiple files. By default, the JSONP Highlight plugin will select the first file in the gist. To highlight a specific file from a multi-file gist, use the data-filename attribute on the <pre> element.

    Example:

    <pre class="language-markup" data-jsonp="https://api.github.com/gists/ID" data-filename="dabblet.html"></pre>

  4. CSS class naming convention for Highlight Keywords

    v2

    When using the Highlight Keywords plugin, Prism generates classes following this pattern:

    .token.keyword.keyword-[keyword-name]

    For example, if the keyword is if, the resulting HTML element will have the classes token, keyword, and keyword-if. This allows you to target specific keywords without affecting the general .token.keyword class used by the theme.

    /* Target a specific keyword like 'return' */
.token.keyword.keyword-return {
  color: #f92672;
}

  5. Integrate File Highlight with the Line Numbers plugin

    v2

    When using the data-range attribute in conjunction with the Line Numbers plugin, the File Highlight plugin automatically adds the correct data-start attribute to the element based on the specified range. This ensures line numbers align correctly with the displayed subset.

    If you need to override this automatic behavior, you can set the data-start attribute manually.

    <pre data-src="./file-highlight.js" data-range="12,111" class="line-numbers"></pre>

  6. Configure multi-line commands in the Command Line plugin

    v2

    For languages that support multi-line commands (like Bash) or require explicit continuation markers (like SQL), use the following attributes on the <pre> element:

    • data-continuation-str: The character used for line continuation (e.g., " for Bash).
    • data-filter-continuation: A prefix used to mark continuation lines (e.g., (con)). These lines will be displayed using the data-continuation-prompt.
    • data-continuation-prompt: The prompt displayed for continuation lines. Defaults to > if not specified.

    Example: SQL with continuation prefixes

    <pre class="command-line"
     data-prompt="mysql>"
     data-continuation-prompt="->"
     data-filter-output="(out)"
     data-filter-continuation="(con)">
    <pre class="command-line"
     data-prompt="mysql>"
     data-continuation-prompt="->"
     data-filter-output="(out)"
     data-filter-continuation="(con)">
```sql { .command-line data-prompt="mysql>" data-continuation-prompt="->" data-filter-output="(out)" data-filter-continuation="(con)" }
set @my_var = 'foo';
set @my_other_var = 'bar';
(out)
CREATE TABLE people (
(con)first_name VARCHAR(30) NOT NULL,
(con)last_name VARCHAR(30) NOT NULL
(con));
(out)Query OK, 0 rows affected (0.09 sec)
(out)
insert into people
(con)values ('John', 'Doe');
(out)Query OK, 1 row affected (0.02 sec)
(out)
select *
(con)from people
(con)order by last_name;
(out)+------------+-----------+
(out)| first_name | last_name |
(out)+------------+-----------+
(out)1 row in set (0.00 sec)

    </pre>

  8. Handle double highlighting with the drop-tokens class

    v2

    When using other plugins that perform re-highlighting (such as the Autoloader), Keep Markup might preserve markup from the first pass, leading to excessive DOM nodes and styling issues.

    To prevent this, add the drop-tokens class to the code block or any of its ancestor elements. When drop-tokens is present, Keep Markup will ignore all span.token elements created by Prism, allowing the second highlighting pass to proceed without interference from the first.

    <!-- Example of applying drop-tokens to a container to prevent issues with re-highlighting plugins -->
<div class="drop-tokens">
  <pre><code class="language-css">...</code></pre>
</div>

  9. Use the Highlight Keywords plugin

    v2

    The Highlight Keywords plugin adds specific CSS classes to every keyword identified by Prism. This allows you to apply fine-grained, keyword-specific styling using your own CSS rules.

    Important: This plugin does not provide any default CSS styles. You must define the CSS rules yourself to change the appearance of specific keywords.

    /* Example: Styling the 'if' keyword specifically */
.token.keyword.keyword-if {
  color: #f92672;
}

  10. How to use the Data URI Highlight plugin

    v2

    The Data URI Highlight plugin enables automatic syntax highlighting for the contents of Data-URIs.

    To use it, ensure that the plugin is loaded and that the corresponding grammar for the MIME type used within the Data-URI is also loaded. Prism will automatically detect the Data-URI and attempt to highlight its content by guessing the correct grammar based on the MIME type information provided in the URI.

    div {
    border: 40px solid transparent;
    border-image: 33.334% url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"> \\ 
                          <circle cx="5" cy="5" r="5" fill="%23ab4"/><circle cx="15" cy="5" r="5" fill="%23655"/> \\ 
                          <circle cx="25" cy="5" r="5" fill="%23e07"/><circle cx="5" cy="15" r="5" fill="%23655"/> \\ 
                          <circle cx="15" cy="15" r="5" fill="hsl(15, 25%, 75%)"/> \\ 
                          <circle cx="25" cy="15" r="5" fill="%23655"/><circle cx="5" cy="25" r="5" fill="%23fb3"/> \\ 
                          <circle cx="15" cy="25" r="5" fill="%23655"/><circle cx="25" cy="25" r="5" fill="%2358a"/></svg>');
    padding: 1em;
    max-width: 20em;
    font: 130%/1.6 Baskerville, Palatino, serif;
}

  12. Use the Inline Color plugin

    v2

    The Inline Color plugin adds small inline color previews for color values found within style sheets or inline styles. This plugin is designed to work with CSS and HTML markup.

    Requirement: This plugin requires the css-extras language component to function correctly.

    /* Example CSS usage */
span.foo {
	background-color: navy;
	color: #BFD;
}

/* Example HTML inline style usage */
<body style="color: black"></body>