Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

👌 IMPROVE: Screenshots & Formatting #84

Open
wants to merge 19 commits into
base: master
Choose a base branch
from
Open

👌 IMPROVE: Screenshots & Formatting #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
edcd761
📦 NEW: Shades of Purple Theme
ahmadawais Sep 3, 2019
db46c05
📖 DOC: Shades of Purple for Prism.js
ahmadawais Sep 3, 2019
b79fbbd
🐛 FIX: Shades of Purple name
ahmadawais Sep 3, 2019
00e6531
👌 IMPROVE: More specificity no imps
ahmadawais Sep 4, 2019
4955016
🐛 FIX: Merge Conflict
ahmadawais Sep 4, 2019
06d25c6
Merge branch 'master' into master
ahmadawais Sep 4, 2019
dc56708
Merge branch 'master' of https://github.com/PrismJS/prism-themes
ahmadawais Sep 4, 2019
5cbc821
👌 IMPROVE: Formatting
ahmadawais Sep 4, 2019
02b83f0
👌 IMPROVE: Formatting
ahmadawais Sep 4, 2019
189df3f
👌 IMPROVE: Formatting
ahmadawais Sep 4, 2019
925b117
👌 IMPROVE: Formatting
ahmadawais Sep 4, 2019
56dd769
👌 IMPROVE: Formatting
ahmadawais Sep 4, 2019
a374084
🐛 FIX: Image size
ahmadawais Sep 4, 2019
05e7871
🐛 FIX: Image size
ahmadawais Sep 4, 2019
086bde0
👌 IMPROVE: Images
ahmadawais Sep 4, 2019
834bd67
👌 IMPROVE: Screenshots
ahmadawais Sep 4, 2019
27243be
👌 IMPROVE: Screenshots
ahmadawais Sep 4, 2019
a7af2e3
🐛 FIX: Image link
ahmadawais Sep 4, 2019
567c87f
🐛 FIX: Lingo
ahmadawais Sep 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
202 changes: 168 additions & 34 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,214 @@
# Prism themes
# Prism.js Themes
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We just call ourselves "Prism", so I think we should go with the old heading.


This repository lists a selection of additional themes for the [Prism syntax highlighting library](http://prismjs.com/).
> A selection of additional themes for the [Prism syntax highlighting library](http://prismjs.com/).

## How to use a theme
## Getting Started

To use one of the themes, just include the theme's CSS file in your page. Example:
To use one of the themes, include theme's `css` file (present in the [themes directory](themes)) in your page. For example:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To use one of the themes, include theme's `css` file (present in the [themes directory](themes)) in your page. For example:
To use one of the themes, include the theme's `css` file (present in the [themes directory](themes)) in your page. For example:


```html
<!DOCTYPE html>
<html>
<head>
...
<link href="themes/prism-ghcolors.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
<head>
...
<!-- <link href="prism-[theme-name-here].css" rel="stylesheet" /> -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need this comment? Isn't the line below enough?

<link href="prism-shades-of-purple.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>
```

## Available themes
## Available Themes

## 🎨 [**CB**](themes/prism-cb.css)

> Originally by [C. Bavota](https://bitbucket.org/cbavota), adapted by [atelierbram](https://github.com/atelierbram)

* [__CB__](themes/prism-cb.css) (originally by [C. Bavota](https://bitbucket.org/cbavota), adapted by [atelierbram](https://github.com/atelierbram))<br />
[![CB](screenshots/prism-cb.png)](themes/prism-cb.css)

* [__GHColors__](themes/prism-ghcolors.css) (by [aviaryan](https://github.com/aviaryan))<br />
```html
<link href="prism-cb.css" rel="stylesheet" />
```

## 🎨 [**GHColors**](themes/prism-ghcolors.css)

> By [aviaryan](https://github.com/aviaryan)

[![GHColors](screenshots/prism-ghcolors.png)](themes/prism-ghcolors.css)

* [__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 />
```html
<link href="prism-ghcolors.css" rel="stylesheet" />
```

## 🎨 [**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)

[![Pojoaque](screenshots/prism-pojoaque.png)](themes/prism-pojoaque.css)

* [__Xonokai__](themes/prism-xonokai.css) (originally by [Maxime Thirouin (MoOx)](https://github.com/MoOx), adapted by [atelierbram](https://github.com/atelierbram))<br />
```html
<link href="prism-pojoaque.css" rel="stylesheet" />
```

## 🎨 [**Xonokai**](themes/prism-xonokai.css)

> Originally by [Maxime Thirouin (MoOx)](https://github.com/MoOx), adapted by [atelierbram](https://github.com/atelierbram)

[![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)
```html
<link href="prism-xonokai.css" rel="stylesheet" />
```

## 🎨 [**Ateliersulphurpool-light**](themes/prism-base16-ateliersulphurpool.light.css)

> By [Bram de Haan](https://github.com/atelierbram)

[![Ateliersulpherpool-light](screenshots/prism-base16-ateliersulphurpool.light.png)](themes/prism-base16-ateliersulphurpool.light.css)

```html
<link href="prism-base16-ateliersulphurpool.light.css" rel="stylesheet" />
```

## 🎨 [**Hopscotch**](themes/prism-hopscotch.css)

> By [Jan T. Sott](https://github.com/idleberg)

* [__Hopscotch__](themes/prism-hopscotch.css) (by [Jan T. Sott](https://github.com/idleberg))<br />
[![Hopscotch](screenshots/prism-hopscotch.png)](themes/prism-hopscotch.css)

* [__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 />
```html
<link href="prism-hopscotch.css" rel="stylesheet" />
```

## 🎨 [**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)

[![Atom Dark](screenshots/prism-atom-dark.png)](themes/prism-atom-dark.css)

* [__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 />
```html
<link href="prism-atom-dark.css" rel="stylesheet" />
```

## 🎨 [**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)

[![Duotone Dark](screenshots/prism-duotone-dark.png)](themes/prism-duotone-dark.css)

* [__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 />
```html
<link href="prism-duotone-dark.css" rel="stylesheet" />
```

## 🎨 [**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)

[![Duotone Sea](screenshots/prism-duotone-sea.png)](themes/prism-duotone-sea.css)

* [__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 />
```html
<link href="prism-duotone-sea.css" rel="stylesheet" />
```

## 🎨 [**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)

[![Duotone Space](screenshots/prism-duotone-space.png)](themes/prism-duotone-space.css)

* [__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 />
```html
<link href="prism-duotone-space.css" rel="stylesheet" />
```

## 🎨 [**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)

[![Duotone Earth](screenshots/prism-duotone-earth.png)](themes/prism-duotone-earth.css)

* [__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 />
```html
<link href="prism-duotone-earth.css" rel="stylesheet" />
```

## 🎨 [**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)

[![Duotone Forest](screenshots/prism-duotone-forest.png)](themes/prism-duotone-forest.css)

* [__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 />
```html
<link href="prism-duotone-forest.css" rel="stylesheet" />
```

## 🎨 [prism-duotone-forest.css](themes/prism-duotone-light.css)

> By [Simurai](https://github.com/simurai), based on [DuoTone Light Syntax theme](https://github.com/simurai/duotone-light-syntax)

[![Duotone Light](screenshots/prism-duotone-light.png)](themes/prism-duotone-light.css)

* [__VS__](themes/prism-vs.css) (by [andrewlock](https://github.com/andrewlock))<br />
```html
<link href="prism-duotone-light.css" rel="stylesheet" />
```

## 🎨 [**VS**](themes/prism-vs.css)

> By [andrewlock](https://github.com/andrewlock)

[![VS](screenshots/prism-vs.png)](themes/prism-vs.css)

* [__Darcula__](themes/prism-darcula.css) (by [service-paradis](https://github.com/service-paradis), based on Jetbrains Darcula theme)<br />
```html
<link href="prism-vs.css" rel="stylesheet" />
```

## 🎨 [**Darcula**](themes/prism-darcula.css)

> By [service-paradis](https://github.com/service-paradis), based on Jetbrains Darcula theme)

[![Darcula](screenshots/prism-darcula.png)](themes/prism-darcula.css)

* [__a11y Dark__](themes/prism-a11y-dark.css) (by [ericwbailey](https://github.com/ericwbailey))<br />
```html
<link href="prism-darcula.css" rel="stylesheet" />
```

## 🎨 [**a11y Dark**](themes/prism-a11y-dark.css)

> By [ericwbailey](https://github.com/ericwbailey)

[![a11y Dark](screenshots/prism-a11y-dark.png)](themes/prism-a11y-dark.css)

* [__Dracula__](themes/prism-dracula.css) (by [Byverdu](https://github.com/byverdu))<br />
```html
<link href="prism-a11y-dark.css" rel="stylesheet" />
```

## 🎨 [**Dracula**](themes/prism-dracula.css)

> By [Byverdu](https://github.com/byverdu)

[![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 />
```html
<link href="prism-dracula.css" rel="stylesheet" />
```

## 🎨 [**Synthwave '84**](themes/prism-synthwave84.css)

> Originally by [Robb Owen](https://github.com/robb0wen), adapted by [Marc Backes](https://github.com/themarcba)

[![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)
```html
<link href="prism-synthwave84.css" rel="stylesheet" />
```

## 🎨 [**Shades of Purple**](themes/prism-shades-of-purple.css)

> By [Ahmad Awais](https://github.com/ahmadawais)

[![Shades of Purple](screenshots/prism-shades-of-purple.png)](themes/prism-shades-of-purple.css)

```html
<link href="prism-shades-of-purple.css" rel="stylesheet" />
```
Binary file modified screenshots/prism-a11y-dark.png
View file
Open in desktop
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
View file
Open in desktop
Binary file not shown.
Binary file modified screenshots/prism-atom-dark.png
View file
Open in desktop
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-base16-ateliersulphurpool.light.png
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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-dracula.png
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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-shades-of-purple.png
View file
Open in desktop
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-synthwave84.png
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions themes/prism-shades-of-purple.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ pre[class*='language-'] {
padding: 2em;
margin: 0.5em 0;
overflow: auto;
border-radius: 0.3em;
}

:not(pre) > code[class*='language-'],
Expand Down