1 | # Prism themes
|
2 |
|
3 | [![Build Status](https://github.com/PrismJS/prism-themes/workflows/CI/badge.svg)](https://github.com/PrismJS/prism-themes/actions)
|
4 | [![npm](https://img.shields.io/npm/dw/prism-themes.svg)](https://www.npmjs.com/package/prism-themes)
|
5 |
|
6 | This repository lists a selection of additional themes for the [Prism syntax highlighting library](http://prismjs.com/).
|
7 |
|
8 | ## How to use a theme
|
9 |
|
10 | To use one of the themes, just include the theme's CSS file in your page. Example:
|
11 |
|
12 | ```html
|
13 | <!DOCTYPE html>
|
14 | <html>
|
15 | <head>
|
16 | ...
|
17 | <link href="themes/prism-ghcolors.css" rel="stylesheet" />
|
18 | </head>
|
19 | <body>
|
20 | ...
|
21 | <script src="prism.js"></script>
|
22 | </body>
|
23 | </html>
|
24 | ```
|
25 |
|
26 | ## Adding new themes
|
27 |
|
28 | To add your own theme/s, copy it/them into the `themes` directory and add your theme/s to the list of available themes in this readme.
|
29 | The filenames for your themes have to be `themes/prism-<your-theme>.css` for the theme itself and `screenshots/prism-<your-theme>.png` for the screenshot.
|
30 |
|
31 | The screenshot will be created for you by running the following command:
|
32 |
|
33 | ```bash
|
34 | npm i && npx gulp screenshot
|
35 | ```
|
36 |
|
37 | Before making a pull request, you can run the following command to verify that all checks pass:
|
38 |
|
39 | ```bash
|
40 | npm test
|
41 | ```
|
42 |
|
43 | Thank you so much for contributing!!
|
44 |
|
45 | ## Available themes
|
46 |
|
47 | * [__CB__](themes/prism-cb.css) (originally by [C. Bavota](https://bitbucket.org/cbavota), adapted by [atelierbram](https://github.com/atelierbram))<br />
|
48 | [![CB](screenshots/prism-cb.png)](themes/prism-cb.css)
|
49 |
|
50 | * [__GHColors__](themes/prism-ghcolors.css) (by [aviaryan](https://github.com/aviaryan))<br />
|
51 | [![GHColors](screenshots/prism-ghcolors.png)](themes/prism-ghcolors.css)
|
52 |
|
53 | * [__Pojoaque__](themes/prism-pojoaque.css) (originally by [Jason Tate](http://web-cms-designs.com/ftopict-10-pojoaque-style-for-highlight-js-code-highlighter.html), adapted by [atelierbram](https://github.com/atelierbram))<br />
|
54 | [![Pojoaque](screenshots/prism-pojoaque.png)](themes/prism-pojoaque.css)
|
55 |
|
56 | * [__Xonokai__](themes/prism-xonokai.css) (originally by [Maxime Thirouin (MoOx)](https://github.com/MoOx), adapted by [atelierbram](https://github.com/atelierbram))<br />
|
57 | [![Xonokai](screenshots/prism-xonokai.png)](themes/prism-xonokai.css)
|
58 |
|
59 | * [__Ateliersulphurpool-light__](themes/prism-base16-ateliersulphurpool.light.css) (by [Bram de Haan](https://github.com/atelierbram))<br />
|
60 | [![Ateliersulphurpool-light](screenshots/prism-base16-ateliersulphurpool.light.png)](themes/prism-base16-ateliersulphurpool.light.css)
|
61 |
|
62 | * [__Hopscotch__](themes/prism-hopscotch.css) (by [Jan T. Sott](https://github.com/idleberg))<br />
|
63 | [![Hopscotch](screenshots/prism-hopscotch.png)](themes/prism-hopscotch.css)
|
64 |
|
65 | * [__Atom Dark__](themes/prism-atom-dark.css) (by [gibsjose](https://github.com/gibsjose), based on [Atom Dark Syntax theme](https://github.com/atom/atom-dark-syntax))<br />
|
66 | [![Atom Dark](screenshots/prism-atom-dark.png)](themes/prism-atom-dark.css)
|
67 |
|
68 | * [__Duotone Dark__](themes/prism-duotone-dark.css) (by [Simurai](https://github.com/simurai), based on [Duotone Dark Syntax theme for Atom](https://github.com/simurai/duotone-dark-syntax))<br />
|
69 | [![Duotone Dark](screenshots/prism-duotone-dark.png)](themes/prism-duotone-dark.css)
|
70 |
|
71 | * [__Duotone Sea__](themes/prism-duotone-sea.css) (by [Simurai](https://github.com/simurai), based on [DuoTone Dark Sea Syntax theme for Atom](https://github.com/simurai/duotone-dark-sea-syntax))<br />
|
72 | [![Duotone Sea](screenshots/prism-duotone-sea.png)](themes/prism-duotone-sea.css)
|
73 |
|
74 | * [__Duotone Space__](themes/prism-duotone-space.css) (by [Simurai](https://github.com/simurai), based on [DuoTone Dark Space Syntax theme for Atom](https://github.com/simurai/duotone-dark-space-syntax))<br />
|
75 | [![Duotone Space](screenshots/prism-duotone-space.png)](themes/prism-duotone-space.css)
|
76 |
|
77 | * [__Duotone Earth__](themes/prism-duotone-earth.css) (by [Simurai](https://github.com/simurai), based on [DuoTone Dark Earth Syntax theme for Atom](https://github.com/simurai/duotone-dark-earth-syntax))<br />
|
78 | [![Duotone Earth](screenshots/prism-duotone-earth.png)](themes/prism-duotone-earth.css)
|
79 |
|
80 | * [__Duotone Forest__](themes/prism-duotone-forest.css) (by [Simurai](https://github.com/simurai), based on [DuoTone Dark Forest Syntax theme for Atom](https://github.com/simurai/duotone-dark-forest-syntax))<br />
|
81 | [![Duotone Forest](screenshots/prism-duotone-forest.png)](themes/prism-duotone-forest.css)
|
82 |
|
83 | * [__Duotone Light__](themes/prism-duotone-light.css) (by [Simurai](https://github.com/simurai), based on [DuoTone Light Syntax theme](https://github.com/simurai/duotone-light-syntax))<br />
|
84 | [![Duotone Light](screenshots/prism-duotone-light.png)](themes/prism-duotone-light.css)
|
85 |
|
86 | * [__VS__](themes/prism-vs.css) (by [andrewlock](https://github.com/andrewlock))<br />
|
87 | [![VS](screenshots/prism-vs.png)](themes/prism-vs.css)
|
88 |
|
89 | * [__VS Code Dark+__](themes/prism-vsc-dark-plus.css) (by [tabuckner](https://github.com/tabuckner))<br />
|
90 | [![VS](screenshots/prism-vsc-dark-plus.png)](themes/prism-vsc-dark-plus.css)
|
91 |
|
92 | * [__Darcula__](themes/prism-darcula.css) (by [service-paradis](https://github.com/service-paradis), based on Jetbrains' Darcula theme)<br />
|
93 | [![Darcula](screenshots/prism-darcula.png)](themes/prism-darcula.css)
|
94 |
|
95 | * [__a11y Dark__](themes/prism-a11y-dark.css) (by [ericwbailey](https://github.com/ericwbailey))<br />
|
96 | [![a11y Dark](screenshots/prism-a11y-dark.png)](themes/prism-a11y-dark.css)
|
97 |
|
98 | * [__Dracula__](themes/prism-dracula.css) (by [Byverdu](https://github.com/byverdu))<br />
|
99 | [![Dracula](screenshots/prism-dracula.png)](themes/prism-dracula.css)
|
100 |
|
101 | * [__Synthwave '84__](themes/prism-synthwave84.css) (originally by [Robb Owen](https://github.com/robb0wen), adapted by [Marc Backes](https://github.com/themarcba))<br />
|
102 | [![Synthwave '84](screenshots/prism-synthwave84.png)](themes/prism-synthwave84.css)
|
103 |
|
104 | * [__Shades of Purple__](themes/prism-shades-of-purple.css) (by [Ahmad Awais](https://github.com/ahmadawais))<br />
|
105 | [![Shades of Purple](screenshots/prism-shades-of-purple.png)](themes/prism-shades-of-purple.css)
|
106 |
|
107 | * [__Material Dark__](themes/prism-material-dark.css) (by [dutchenkoOleg](https://github.com/dutchenkoOleg))<br />
|
108 | [![Material Dark](screenshots/prism-material-dark.png)](themes/prism-material-dark.css)
|
109 |
|
110 | * [__Material Light__](themes/prism-material-light.css) (by [dutchenkoOleg](https://github.com/dutchenkoOleg))<br />
|
111 | [![Material Light](screenshots/prism-material-light.png)](themes/prism-material-light.css)
|
112 |
|
113 | * [__Material Oceanic__](themes/prism-material-oceanic.css) (by [dutchenkoOleg](https://github.com/dutchenkoOleg))<br />
|
114 | [![Material Oceanic](screenshots/prism-material-oceanic.png)](themes/prism-material-oceanic.css)
|
115 |
|
116 | * [__Nord__](themes/prism-nord.css) (originally by [Nord](https://www.nordtheme.com/), adapted by [Zane Hitchcox](https://github.com/zwhitchcox) and [Gabriel Ramos](https://github.com/gabrieluizramos))<br />
|
117 | [![Nord](screenshots/prism-nord.png)](themes/prism-nord.css)
|
118 |
|
119 | * [__Coldark Cold__](themes/prism-coldark-cold.css) (by [Armand Philippot](https://github.com/ArmandPhilippot), based on [Coldark](https://github.com/ArmandPhilippot/coldark))<br />
|
120 | [![Coldark Cold](screenshots/prism-coldark-cold.png)](themes/prism-coldark-cold.css)
|
121 |
|
122 | * [__Coldark Dark__](themes/prism-coldark-dark.css) (by [Armand Philippot](https://github.com/ArmandPhilippot), based on [Coldark](https://github.com/ArmandPhilippot/coldark))<br />
|
123 | [![Coldark Dark](screenshots/prism-coldark-dark.png)](themes/prism-coldark-dark.css)
|
124 |
|
125 | * [__Coy without shadows__](themes/prism-coy-without-shadows.css) (by [RunDevelopment](https://github.com/RunDevelopment), based on Tim Shedor's Coy theme)<br />
|
126 | [![Coy without shadows](screenshots/prism-coy-without-shadows.png)](themes/prism-coy-without-shadows.css)
|
127 |
|
128 | * [__Gruvbox Dark__](themes/prism-gruvbox-dark.css) (by [Azat S.](https://github.com/azat-io))<br />
|
129 | [![Gruvbox Dark](screenshots/prism-gruvbox-dark.png)](themes/prism-gruvbox-dark.css)
|
130 |
|
131 | * [__Gruvbox Light__](themes/prism-gruvbox-light.css) (by [Michael Schnerring](https://github.com/schnerring))<br />
|
132 | [![Gruvbox Light](screenshots/prism-gruvbox-light.png)](themes/prism-gruvbox-light.css)
|
133 |
|
134 | * [__Lucario__](themes/prism-lucario.css) (by [Christopher Kapic](https://github.com/christopher-kapic), based on [Raphael Amorim's](https://github.com/raphamorim) [Lucario Theme](https://github.com/raphamorim/lucario))<br />
|
135 | [![Lucario](screenshots/prism-lucario.png)](themes/prism-lucario.css)
|
136 |
|
137 | * [__Night Owl__](themes/prism-night-owl.css) (by [Souvik Mandal](https://github.com/SimpleIndian), based on [Sarah Drasner's](https://github.com/sdras) [Night Owl Theme](https://github.com/sdras/night-owl-vscode-theme))<br />
|
138 | [![Night Owl](screenshots/prism-night-owl.png)](themes/prism-night-owl.css)
|
139 |
|
140 | * [__Holi Theme__](themes/prism-holi-theme.css) (by [Ayush Saini](https://github.com/AyushSaini00), based on [Holi Theme for VS Code](https://github.com/AyushSaini00/holi-theme))<br />
|
141 | [![Holi Theme](screenshots/prism-holi-theme.png)](themes/prism-holi-theme.css)
|
142 |
|
143 | * [__Z-Touch__](themes/prism-z-touch.css) (by [Zeel Codder](https://github.com/zeel-codder))<br />
|
144 | [![Z-Touch](screenshots/prism-z-touch.png)](themes/prism-z-touch.css)
|
145 |
|
146 | * [__Solarized Dark Atom__](themes/prism-solarized-dark-atom.css) (by [Pranay Chauhan](https://github.com/PranayChauhan2516), based on [Solarized Dark Theme by Atom](https://github.com/atom/solarized-dark-syntax))<br />
|
147 | [![Solarized Dark Atom](screenshots/prism-solarized-dark-atom.png)](themes/prism-solarized-dark-atom.css)
|
148 |
|
149 | * [__One Dark__](themes/prism-one-dark.css) (by [Hoon Wei Ting](https://github.com/hoonweiting), based on [Atom's One Dark Syntax](https://github.com/atom/atom/tree/master/packages/one-dark-syntax))<br />
|
150 | [![One Dark](screenshots/prism-one-dark.png)](themes/prism-one-dark.css)
|
151 |
|
152 | * [__One Light__](themes/prism-one-light.css) (by [Hoon Wei Ting](https://github.com/hoonweiting), based on [Atom's One Light Syntax](https://github.com/atom/atom/tree/master/packages/one-light-syntax))<br />
|
153 | [![One Light](screenshots/prism-one-light.png)](themes/prism-one-light.css)
|