DOCSEARCHbyAlgolia
Submit Docs

Prism Themes

repository·master·Indexed 23 days ago

https://github.com/prismjs/prism-themes

A collection of additional CSS themes for the PrismJS syntax highlighting library, including styles such as Dracula, Material Light, Nord, and One Dark. The package provides a variety of visual styles and exports a configuration object containing the absolute path to the theme CSS files directory.

Tokens
736
Snippets
1
Records
3
Agent score
31%

What's inside prism-themes

  1. How to use a Prism theme

    master

    To apply a theme to your project, include the specific theme's CSS file in the <head> section of your HTML document. Ensure that the prism.js library script is also included in your page (typically before the closing </body> tag) to enable syntax highlighting.

    <!DOCTYPE html>
<html    <head>
        ...
        <link href="themes/prism-ghcolors.css" rel="stylesheet" />
    </head>
    <body>
        ...
        <script src="prism.js"></script>
    </body>
</html>

  2. List of available Prism themes

    master

    This repository provides a collection of CSS themes for PrismJS. Below is a reference of the available theme files and their corresponding CSS paths:

    Theme NameCSS File Path
    CBthemes/prism-cb.css
    GHColorsthemes/prism-ghcolors.css
    Pojoaquethemes/prism-pojoaque.css
    Xonokaithemes/prism-xonokai.css
    Ateliersulphurpool-lightthemes/prism-base16-ateliersulphurpool.light.css
    Hopscotchthemes/prism-hopscotch.css
    Atom Darkthemes/prism-atom-dark.css
    Duotone Darkthemes/prism-duotone-dark.css
    Duotone Seathemes/prism-duotone-sea.css
    Duotone Spacethemes/prism-duotone-space.css
    Duotone Earththemes/prism-duotone-earth.css
    Duotone Forestthemes/prism-duotone-forest.css
    Duotone Lightthemes/prism-duotone-light.css
    VSthemes/prism-vs.css
    VS Code Dark+themes/prism-vsc-dark-plus.css
    Darculathemes/prism-darcula.css
    a11y Darkthemes/prism-a11y-dark.css
    Draculathemes/prism-dracula.css
    Synthwave '84themes/prism-synthwave84.css
    Shades of Purplethemes/prism-shades-of-purple.css
    Material Darkthemes/prism-material-dark.css
    Material Lightthemes/prism-material-light.css
    Material Oceanicthemes/prism-material-oceanic.css
    Nordthemes/prism-nord.css
    Coldark Coldthemes/prism-coldark-cold.css
    Coldark Darkthemes/prism-coldark-dark.css
    Coy without shadowsthemes/prism-coy-without-shadows.css
    Gruvbox Darkthemes/prism-gruvbox-dark.css
    Gruvbox Lightthemes/prism-gruvbox-light.css
    Lucariothemes/prism-lucario.css
    Night Owlthemes/prism-night-owl.css
    Holi Themethemes/prism-holi-theme.css
    Z-Touchthemes/prism-z-touch.css
    Solarized Dark Atomthemes/prism-solarized-dark-atom.css
    One Darkthemes/prism-one-dark.css
    One Lightthemes/prism-one-light.css
    Laserwavethemes/prism-laserwave.css

  3. Access the themes directory path

    master
    The prism-themes package exports a configuration object containing the absolute path to the directory where all theme CSS files are located. You can use this path to programmatically locate and import specific Prism themes.