From 8595b4d402e0989885fb12a486cb8a546e6a3f13 Mon Sep 17 00:00:00 2001 From: Michael Deeb Date: Fri, 16 Mar 2018 13:52:16 -0700 Subject: [PATCH] Published to NPM --- README.md | 18 +++++ package.json | 21 ++++++ prism-solarizeddark.css | 147 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 186 insertions(+) create mode 100644 package.json create mode 100644 prism-solarizeddark.css diff --git a/README.md b/README.md index 28bafac..4e0e46c 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,20 @@ # prism-solarized-dark Solarized Dark theme for Prism + +## Install +```bash +npm install --save prism-solarized-dark +``` + +## Usage +```js +import 'prism-solarized-dark/prism-solarizeddark.css' +``` + +## Examples +[Gatsby: Include CSS](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/#required-pick-a-prismjs-theme-or-create-your-own) + +## Contributing +Pull requests welcome! + +This is a tweak of [prism-solarizedlight.css](https://github.com/PrismJS/prism/blob/master/themes/prism-solarizedlight.css). The goal was to make HTML and JS look like they do in Visual Studio Code with the Solarized Dark theme. diff --git a/package.json b/package.json new file mode 100644 index 0000000..c4dceb3 --- /dev/null +++ b/package.json @@ -0,0 +1,21 @@ +{ + "name": "prism-solarized-dark", + "version": "1.0.0", + "description": "Solarized Dark theme for Prism", + "repository": { + "type": "git", + "url": "git+https://github.com/michaeljdeeb/prism-solarized-dark.git" + }, + "keywords": [ + "prism", + "prismjs", + "solarized", + "theme" + ], + "author": "Michael Deeb (https://michaeljdeeb.com)", + "license": "MIT", + "bugs": { + "url": "https://github.com/michaeljdeeb/prism-solarized-dark/issues" + }, + "homepage": "https://github.com/michaeljdeeb/prism-solarized-dark#readme" +} diff --git a/prism-solarizeddark.css b/prism-solarizeddark.css new file mode 100644 index 0000000..1f42115 --- /dev/null +++ b/prism-solarizeddark.css @@ -0,0 +1,147 @@ +/* + Solarized Color Schemes originally by Ethan Schoonover + http://ethanschoonover.com/solarized + + Ported for PrismJS by Michael Deeb + Website: https://michaeljdeeb.com + Twitter Handle: https://twitter.com/michaeljdeeb) +*/ + +/* +SOLARIZED HEX +--------- ------- +base03 #002b36 +base02 #073642 +base01 #586e75 +base00 #657b83 +base0 #839496 +base1 #93a1a1 +base2 #eee8d5 +base3 #fdf6e3 +yellow #b58900 +orange #cb4b16 +red #dc322f +magenta #d33682 +violet #6c71c4 +blue #268bd2 +cyan #2aa198 +green #859900 +*/ + +code[class*="language-"], +pre[class*="language-"] { + color: #839496; /* base0 */ + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + background: #073642; /* base02 */ +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + background: #073642; /* base02 */ +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #002b36; /* base03 */ +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +} + +.token.attr-name, +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #93a1a1; /* base1 */ +} + +.token.punctuation { + color: #657b83; /* base00 */ +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #d33682; /* magenta */ +} + +.token.attr-value, +.token.selector, +.token.string, +.token.char, +.token.builtin, +.token.url, +.token.inserted { + color: #2aa198; /* cyan */ +} + +.token.entity { + color: #2aa198; /* cyan */ +} + +.token.atrule, +.token.keyword { + color: #859900; /* yellow */ +} + +.token.tag, +.token.function { + color: #268bd2; /* blue */ +} + +.token.regex, +.token.important, +.token.variable { + color: #cb4b16; /* orange */ +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +}