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.

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

👌 IMPROVE: Screenshots & Formatting #84

Open
wants to merge 19 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 168 additions & 34 deletions README.md
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
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 modified 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 modified 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 modified 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.
1 change: 1 addition & 0 deletions themes/prism-shades-of-purple.css
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