Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: PrismJS/prism-themes
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v1.1.0
Choose a base ref
...
head repository: PrismJS/prism-themes
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v1.2.0
Choose a head ref
  • 6 commits
  • 43 files changed
  • 5 contributors

Commits on Mar 25, 2019

  1. Add Dracula theme assets and README updated (#77)

    Based in the well known Dracula theme.
    byverdu authored and mAAdhaTTah committed Mar 25, 2019
    Copy the full SHA
    dc4f1b7 View commit details

Commits on Sep 3, 2019

  1. Add Synthwave '84 theme (#81)

    Added the Synthwave '84 VS Code theme, originally by Robb Owen (I acquired his permission before publishing it).
    themarcba authored and mAAdhaTTah committed Sep 3, 2019
    Copy the full SHA
    45992b9 View commit details

Commits on Sep 4, 2019

  1. 📦 NEW: Shades of Purple Theme (#83)

    Thank you for the excellent project of Prism.js.
    
    This PR adds 🦄 Shades of Purple theme to the mix:
    
    - [x] Shades of Purple CSS
    - [x] Shades of Purple Screenshot with 250px x 180px
    - [x] Addition to the README.md file as per the format
    
    ### Context
    
    🦄 Shades of Purple theme is used by over 2,000,000 developers. I have built other `Shades of Purple` themes for different software. Here's a list.
    
    - 🦄 [VSCode theme](https://github.com/ahmadawais/shades-of-purple-vscode) — Shades of Purple
    - 🦄 [iTerm2 theme](https://github.com/ahmadawais/shades-of-purple-iterm2) — Shades of Purple
    - 🦄 [Hyper™ theme](https://github.com/ahmadawais/shades-of-purple-hyper) — Shades of Purple
    - 🦄 [HighlightJS theme](https://github.com/ahmadawais/Shades-of-Purple-HighlightJS) — Shades of Purple
    - 🦄 [Konsole theme](https://github.com/ahmadawais/shades-of-purple-konsole) — Shades of Purple
    - 🦄 [Slack theme](https://github.com/ahmadawais/shades-of-purple-slack) — Shades of Purple
    - 🦄 [Alfred theme](https://github.com/ahmadawais/shades-of-purple-alfred) — Shades of Purple
    - 🦄 [Cygwin theme](https://github.com/ahmadawais/Shades-of-Purple-Cygwin) — Shades of Purple
    - 🦄 [WordPress theme](https://ahmadawais.com/shades-of-purple-wordpress/) — Shades of Purple
    - 🦄 [Prism JS](https://github.com/FormidableLabs/prism-react-renderer/blob/master/themes/shadesOfPurple.js) + [Prism CSS](https://codepen.io/ahmadawais/pen/mgjRRr?editors=0100#0) + [Code-Surfer](https://code-surfer.netlify.com/theming/#8) theme — Shades of Purple
    
    ## SOP's Syntax Colors
    
    Shades of purple theme is built with several shades of purple and a few contrast colors to make things pop. This also makes SOP a very good theme for teaching, presenting, and using on your site via Prisma or HighlightJS. A rough collection of important colors in SOP theme is listed below.
    
    |      USAGE       |                                HEX CODES                                 |
    | ---------------- | ------------------------------------------------------------------------ |
    | Background       | ![#2D2B55](https://placehold.it/15/2D2B55/000000?text=%20) `#2D2B55`       |
    | Background Dark  | ![#1E1E3F](https://placehold.it/15/1E1E3F/000000?text=%20) `#1E1E3F`       |
    | Foreground       | ![#A599E9](https://placehold.it/15/A599E9/000000?text=%20) `#A599E9`       |
    | Hover Background | ![#4D21FC](https://placehold.it/15/4D21FC/000000?text=%20) `#4D21FC`       |
    | Contrast         | ![#FAD000](https://placehold.it/15/FAD000/000000?text=%20) `#FAD000`       |
    | Contrast Lite    | ![#FFEE80](https://placehold.it/15/FFEE80/000000?text=%20) `#FFEE80`       |
    | Contrast Lite II | ![#FAEFA5](https://placehold.it/15/FAEFA5/000000?text=%20) `#FAEFA5`       |
    | Highlight        | ![#FF7200](https://placehold.it/15/FF7200/000000?text=%20) `#FF7200`       |
    | Comment          | ![#B362FF](https://placehold.it/15/B362FF/000000?text=%20) `#B362FF`       |
    | Constants        | ![#FF628C](https://placehold.it/15/FF628C/000000?text=%20) `#FF628C`       |
    | Keywords         | ![#FF9D00](https://placehold.it/15/FF9D00/000000?text=%20) `#FF9D00`       |
    | Other            | ![#9EFFFF](https://placehold.it/15/9EFFFF/000000?text=%20) `#9EFFFF`       |
    | Strings          | ![#A5FF90](https://placehold.it/15/A5FF90/000000?text=%20) `#A5FF90`       |
    | Templates        | ![#3AD900](https://placehold.it/15/3AD900/000000?text=%20) `#3AD900`       |
    | Definitions      | ![#FB94FF](https://placehold.it/15/FB94FF/000000?text=%20) `#FB94FF`       |
    | Invalid          | ![#EC3A37F5](https://placehold.it/15/EC3A37F5/000000?text=%20) `#EC3A37F5` |
    | Diff Added       | ![#00FF009A](https://placehold.it/15/00FF009A/000000?text=%20) `#00FF009A` |
    | Diff Removed     | ![#FF000D81](https://placehold.it/15/FF000D81/000000?text=%20) `#FF000D81` |
    ahmadawais authored and mAAdhaTTah committed Sep 4, 2019
    Copy the full SHA
    ca328a9 View commit details
  2. Added automated screenshot task (#80)

    This adds a gulp task for automatically redoing all screenshots.
    The task can be run using `npx gulp screenshot`.
    
    I used [capture-website](https://github.com/sindresorhus/capture-website) to take the screenshot which uses Chrome under the hood.
    
    A few improvements compared to the current screenshots:
    
    - All images have the same width.
    - Proper transparency for rounded corners.
    - Proper centering and clipping for all images.
    - All screenshots reflect how the theme actually looks in the browser (all Duotone * screenshots have increased padding).
    RunDevelopment authored and mAAdhaTTah committed Sep 4, 2019
    Copy the full SHA
    87a2c4a View commit details

Commits on Sep 24, 2019

  1. Line number fix (#79)

    This fixes [prism#1946](PrismJS/prism#1946).
    
    The problem was that the `<code>` element nested inside the `<pre>` element has to have the same font size as the `pre`.  I added a little rule to nearly every theme to enforce just this.
    
    ```css
    pre > code[class*="language-"] {
    	font-size: 1em;
    }
    ```
    
    ---
    
    This also enforces tabs for indentation for all theme.
    RunDevelopment authored and mAAdhaTTah committed Sep 24, 2019
    Copy the full SHA
    d42d341 View commit details

Commits on Sep 25, 2019

  1. 1.2.0

    mAAdhaTTah committed Sep 25, 2019

    Verified

    This commit was signed with the committer’s verified signature.
    mAAdhaTTah James DiGioia
    Copy the full SHA
    be5bbfe View commit details
Showing with 1,321 additions and 701 deletions.
  1. +1 −0 .gitignore
  2. +24 −2 README.md
  3. +64 −0 gulpfile.js
  4. +6 −2 package.json
  5. +36 −0 screenshots/code.html
  6. BIN screenshots/prism-a11y-dark.png
  7. BIN screenshots/prism-ateliersulphurpool-light.png
  8. BIN screenshots/prism-atom-dark.png
  9. BIN screenshots/prism-base16-ateliersulphurpool.light.png
  10. BIN screenshots/prism-cb.png
  11. BIN screenshots/prism-darcula.png
  12. BIN screenshots/prism-dracula.png
  13. BIN screenshots/prism-duotone-dark.png
  14. BIN screenshots/prism-duotone-earth.png
  15. BIN screenshots/prism-duotone-forest.png
  16. BIN screenshots/prism-duotone-light.png
  17. BIN screenshots/prism-duotone-sea.png
  18. BIN screenshots/prism-duotone-space.png
  19. BIN screenshots/prism-ghcolors.png
  20. BIN screenshots/prism-hopscotch.png
  21. BIN screenshots/prism-pojoaque.png
  22. BIN screenshots/prism-shades-of-purple.png
  23. BIN screenshots/prism-synthwave84.png
  24. BIN screenshots/prism-vs.png
  25. BIN screenshots/prism-xonokai.png
  26. +9 −9 themes/prism-atom-dark.css
  27. +57 −53 themes/prism-base16-ateliersulphurpool.light.css
  28. +26 −26 themes/prism-cb.css
  29. +14 −14 themes/prism-darcula.css
  30. +106 −0 themes/prism-dracula.css
  31. +55 −51 themes/prism-duotone-dark.css
  32. +55 −51 themes/prism-duotone-earth.css
  33. +55 −51 themes/prism-duotone-forest.css
  34. +55 −51 themes/prism-duotone-light.css
  35. +55 −51 themes/prism-duotone-sea.css
  36. +55 −51 themes/prism-duotone-space.css
  37. +44 −44 themes/prism-ghcolors.css
  38. +69 −65 themes/prism-hopscotch.css
  39. +56 −52 themes/prism-pojoaque.css
  40. +199 −0 themes/prism-shades-of-purple.css
  41. +142 −0 themes/prism-synthwave84.css
  42. +57 −53 themes/prism-vs.css
  43. +81 −75 themes/prism-xonokai.css
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/
26 changes: 24 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -20,6 +20,19 @@ To use one of the themes, just include the theme's CSS file in your page. Exampl
</html>
```

## Adding a New Theme

To add your own theme, copy it into the `themes` directory and add your themes to the list of available themes in the readme.
The links for your themes have to be `themes/prism-<your theme>.css` for the theme itself and `screenshots/prism-<your theme>.png` for the screenshot.

The screenshot will be created for you by running the following command:

```bash
npm ci && npx gulp screenshot
```

Thank you so much for contributing!!

## Available themes

* [__CB__](themes/prism-cb.css) (originally by [C. Bavota](https://bitbucket.org/cbavota), adapted by [atelierbram](https://github.com/atelierbram))<br />
@@ -35,7 +48,7 @@ To use one of the themes, just include the theme's CSS file in your page. Exampl
[![Xonokai](screenshots/prism-xonokai.png)](themes/prism-xonokai.css)

* [__Ateliersulphurpool-light__](themes/prism-base16-ateliersulphurpool.light.css) (by [Bram de Haan](https://github.com/atelierbram))<br />
[![Ateliersulpherpool-light](screenshots/prism-ateliersulphurpool-light.png)](themes/prism-base16-ateliersulphurpool.light.css)
[![Ateliersulpherpool-light](screenshots/prism-base16-ateliersulphurpool.light.png)](themes/prism-base16-ateliersulphurpool.light.css)

* [__Hopscotch__](themes/prism-hopscotch.css) (by [Jan T. Sott](https://github.com/idleberg))<br />
[![Hopscotch](screenshots/prism-hopscotch.png)](themes/prism-hopscotch.css)
@@ -68,4 +81,13 @@ To use one of the themes, just include the theme's CSS file in your page. Exampl
[![Darcula](screenshots/prism-darcula.png)](themes/prism-darcula.css)

* [__a11y Dark__](themes/prism-a11y-dark.css) (by [ericwbailey](https://github.com/ericwbailey))<br />
[![a11y Dark](screenshots/prism-a11y-dark.png)](themes/prism-a11y-dark.css)
[![a11y Dark](screenshots/prism-a11y-dark.png)](themes/prism-a11y-dark.css)

* [__Dracula__](themes/prism-dracula.css) (by [Byverdu](https://github.com/byverdu))<br />
[![a11y Dark](screenshots/prism-dracula.png)](themes/prism-dracula.css)

* [__Synthwave '84__](themes/prism-synthwave84.css) (originally by [Robb Owen](https://github.com/robb0wen), adapted by [Marc Backes](https://github.com/themarcba))<br />
[![Synthwave '84](screenshots/prism-synthwave84.png)](themes/prism-synthwave84.css)

* [__Shades of Purple__](themes/prism-shades-of-purple.css) (by [Ahmad Awais](https://github.com/ahmadawais))<br />
[![Shades of Purple](screenshots/prism-shades-of-purple.png)](themes/prism-shades-of-purple.css)
64 changes: 64 additions & 0 deletions gulpfile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
const fs = require('fs').promises;
const captureWebsite = require('capture-website');
const path = require('path');


const themesDir = path.join(__dirname, 'themes');
const screenshotDir = path.join(__dirname, 'screenshots');

/**
* Returns the names of all themes. This includes the `prism-` prefix.
*/
async function getThemes() {
return (await fs.readdir(themesDir)).map(f => (/^.+(?=\.css$)/.exec(f) || [''])[0]).filter(f => f);
}

/**
* Takes a screenshot of all themes overwriting the old ones.
*/
async function screenshotAllThemes() {
for (const theme of await getThemes()) {
await screenshotTheme(theme, true);
}
}

/**
* Takes a screenshot of themes which don't have one already.
*/
async function screenshotMissingThemes() {
for (const theme of await getThemes()) {
await screenshotTheme(theme, false);
}
}

/**
* Takes a screenshot of the given themes and saves the image file in the screenshot directory.
*
* __IMPORTANT:__ Screenshots have to be taken sequentially, one after an other, to prevent a memory leak.
*
* @param {string} theme
* @param {boolean} overwrite
*/
async function screenshotTheme(theme, overwrite) {
const file = `${screenshotDir}/${theme}.png`;

if (await fs.stat(file).then(s => s.isFile()).catch(() => false)) {
if (overwrite) {
await fs.unlink(file);
} else {
return;
}
}

await captureWebsite.file(screenshotDir + '/code.html', file, {
defaultBackground: false,
scaleFactor: 1,
element: 'pre',
styles: [
await fs.readFile(`${themesDir}/${theme}.css`, 'utf-8')
]
});
}

exports.screenshot = screenshotMissingThemes;
exports['screenshot-all'] = screenshotAllThemes;
8 changes: 6 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "prism-themes",
"version": "1.1.0",
"version": "1.2.0",
"description": "Addtional themes for the Prism syntax highlighting library.",
"main": "README.md",
"scripts": {
@@ -15,5 +15,9 @@
"bugs": {
"url": "https://github.com/prismjs/prism-themes/issues"
},
"homepage": "https://github.com/prismjs/prism-themes#readme"
"homepage": "https://github.com/prismjs/prism-themes#readme",
"devDependencies": {
"capture-website": "^0.4.0",
"gulp": "^4.0.2"
}
}
36 changes: 36 additions & 0 deletions screenshots/code.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>

<head>
<title>The code page for screenshots</title>

<!-- Import commonly used fonts -->
<link href="https://fonts.googleapis.com/css?family=Fira+Mono:400,500,700&display=swap" rel="stylesheet">

<style>
body {
margin: 0 !important;
}

pre {
margin: 0 !important;

/* This is a trick to get all images the same width */
display: table !important;
min-width: 275px;
box-sizing: border-box;
}
</style>
</head>

<body>
<pre><code class="language-javascript">function foo(bar) {
var a = 42,
b = 'Prism';
return a + bar(b);
}</code></pre>

<script src="https://prismjs.com/prism.js"></script>
</body>

</html>
Binary file modified screenshots/prism-a11y-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed screenshots/prism-ateliersulphurpool-light.png
Binary file not shown.
Binary file modified screenshots/prism-atom-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/prism-cb.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/prism-darcula.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshots/prism-dracula.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/prism-duotone-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/prism-duotone-earth.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/prism-duotone-forest.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/prism-duotone-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/prism-duotone-sea.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/prism-duotone-space.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/prism-ghcolors.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/prism-hopscotch.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/prism-pojoaque.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshots/prism-shades-of-purple.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshots/prism-synthwave84.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/prism-vs.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/prism-xonokai.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 9 additions & 9 deletions themes/prism-atom-dark.css
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ code[class*="language-"],
pre[class*="language-"] {
color: #c5c8c6;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
direction: ltr;
text-align: left;
white-space: pre;
@@ -63,7 +63,7 @@ pre[class*="language-"] {
.token.property,
.token.keyword,
.token.tag {
color: #96CBFE;
color: #96CBFE;
}

.token.class-name {
@@ -73,7 +73,7 @@ pre[class*="language-"] {

.token.boolean,
.token.constant {
color: #99CC99;
color: #99CC99;
}

.token.symbol,
@@ -99,16 +99,16 @@ pre[class*="language-"] {
}

.token.operator {
color: #EDEDED;
color: #EDEDED;
}

.token.entity {
color: #FFFFB6;
/* text-decoration: underline; */
color: #FFFFB6;
/* text-decoration: underline; */
}

.token.url {
color: #96CBFE;
color: #96CBFE;
}

.language-css .token.string,
@@ -118,15 +118,15 @@ pre[class*="language-"] {

.token.atrule,
.token.attr-value {
color: #F9EE98;
color: #F9EE98;
}

.token.function {
color: #DAD085;
}

.token.regex {
color: #E9C062;
color: #E9C062;
}

.token.important {
Loading