From fbbae1dc55134d014a5a0df2e800d711e087b48f Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 12 Mar 2019 11:26:10 +0100 Subject: [PATCH] switch to monokai as default syntax highlight theme --- README.md | 2 +- css/theme/beige.css | 2 +- css/theme/black.css | 8 ++-- css/theme/blood.css | 2 +- css/theme/league.css | 2 +- css/theme/moon.css | 2 +- css/theme/night.css | 2 +- css/theme/serif.css | 2 +- css/theme/simple.css | 2 +- css/theme/sky.css | 2 +- css/theme/solarized.css | 2 +- css/theme/source/black.scss | 2 +- css/theme/template/theme.scss | 2 +- css/theme/white.css | 2 +- demo.html | 2 +- index.html | 4 +- lib/css/monokai.css | 71 +++++++++++++++++++++++++++++++++++ plugin/markdown/example.html | 2 +- 18 files changed, 92 insertions(+), 21 deletions(-) create mode 100644 lib/css/monokai.css diff --git a/README.md b/README.md index 5aa9770..4c720e2 100644 --- a/README.md +++ b/README.md @@ -897,7 +897,7 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) { ### Code syntax highlighting -By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. To enable syntax highlighting, you'll have to load the highlight plugin ([plugin/highlight/highlight.js](plugin/highlight/highlight.js)) and a highlight.js CSS theme (Reveal comes packaged with the zenburn theme: [lib/css/zenburn.css](lib/css/zenburn.css)). +By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. To enable syntax highlighting, you'll have to load the highlight plugin ([plugin/highlight/highlight.js](plugin/highlight/highlight.js)) and a highlight.js CSS theme (Reveal comes packaged with the Monokai themes: [lib/css/monokai.css](lib/css/monokai.css)). ```javascript Reveal.initialize({ diff --git a/css/theme/beige.css b/css/theme/beige.css index fb5f137..615dd6d 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -153,7 +153,7 @@ body { font-family: monospace; line-height: 1.2em; word-wrap: break-word; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } .reveal code { font-family: monospace; diff --git a/css/theme/black.css b/css/theme/black.css index dec6385..7dd88c2 100644 --- a/css/theme/black.css +++ b/css/theme/black.css @@ -11,8 +11,8 @@ section.has-light-background, section.has-light-background h1, section.has-light * GLOBAL STYLES *********************************************/ body { - background: #222; - background-color: #222; } + background: #191919; + background-color: #191919; } .reveal { font-family: "Source Sans Pro", Helvetica, sans-serif; @@ -149,7 +149,7 @@ body { font-family: monospace; line-height: 1.2em; word-wrap: break-word; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } .reveal code { font-family: monospace; @@ -270,4 +270,4 @@ body { *********************************************/ @media print { .backgrounds { - background-color: #222; } } + background-color: #191919; } } diff --git a/css/theme/blood.css b/css/theme/blood.css index 15e6c20..5cbd488 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -152,7 +152,7 @@ body { font-family: monospace; line-height: 1.2em; word-wrap: break-word; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } .reveal code { font-family: monospace; diff --git a/css/theme/league.css b/css/theme/league.css index 9dfa2ce..f8fba4d 100644 --- a/css/theme/league.css +++ b/css/theme/league.css @@ -155,7 +155,7 @@ body { font-family: monospace; line-height: 1.2em; word-wrap: break-word; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } .reveal code { font-family: monospace; diff --git a/css/theme/moon.css b/css/theme/moon.css index 52b3f67..d18f526 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -153,7 +153,7 @@ body { font-family: monospace; line-height: 1.2em; word-wrap: break-word; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } .reveal code { font-family: monospace; diff --git a/css/theme/night.css b/css/theme/night.css index 51a3dd3..f5ccb52 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -147,7 +147,7 @@ body { font-family: monospace; line-height: 1.2em; word-wrap: break-word; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } .reveal code { font-family: monospace; diff --git a/css/theme/serif.css b/css/theme/serif.css index ea01066..6514a6f 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -149,7 +149,7 @@ body { font-family: monospace; line-height: 1.2em; word-wrap: break-word; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } .reveal code { font-family: monospace; diff --git a/css/theme/simple.css b/css/theme/simple.css index 8432d84..a7a29a6 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -152,7 +152,7 @@ body { font-family: monospace; line-height: 1.2em; word-wrap: break-word; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } .reveal code { font-family: monospace; diff --git a/css/theme/sky.css b/css/theme/sky.css index 6f60a1d..d8734c9 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -156,7 +156,7 @@ body { font-family: monospace; line-height: 1.2em; word-wrap: break-word; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } .reveal code { font-family: monospace; diff --git a/css/theme/solarized.css b/css/theme/solarized.css index fe81f09..f1a2b9e 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -153,7 +153,7 @@ body { font-family: monospace; line-height: 1.2em; word-wrap: break-word; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } .reveal code { font-family: monospace; diff --git a/css/theme/source/black.scss b/css/theme/source/black.scss index 84e8d9a..4720c8a 100644 --- a/css/theme/source/black.scss +++ b/css/theme/source/black.scss @@ -16,7 +16,7 @@ // Override theme settings (see ../template/settings.scss) -$backgroundColor: #222; +$backgroundColor: #191919; $mainColor: #fff; $headingColor: #fff; diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 215e2d4..9ccfaf5 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -167,7 +167,7 @@ body { word-wrap: break-word; - box-shadow: 0px 0px 6px rgba(0,0,0,0.3); + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } .reveal code { diff --git a/css/theme/white.css b/css/theme/white.css index 27e44a1..43ef2c7 100644 --- a/css/theme/white.css +++ b/css/theme/white.css @@ -149,7 +149,7 @@ body { font-family: monospace; line-height: 1.2em; word-wrap: break-word; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } .reveal code { font-family: monospace; diff --git a/demo.html b/demo.html index 6b26880..634b538 100644 --- a/demo.html +++ b/demo.html @@ -19,7 +19,7 @@ - + diff --git a/lib/css/monokai.css b/lib/css/monokai.css new file mode 100644 index 0000000..af24834 --- /dev/null +++ b/lib/css/monokai.css @@ -0,0 +1,71 @@ +/* +Monokai style - ported by Luigi Maselli - http://grigio.org +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #272822; + color: #ddd; +} + +.hljs-tag, +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-strong, +.hljs-name { + color: #f92672; +} + +.hljs-code { + color: #66d9ef; +} + +.hljs-class .hljs-title { + color: white; +} + +.hljs-attribute, +.hljs-symbol, +.hljs-regexp, +.hljs-link { + color: #bf79db; +} + +.hljs-string, +.hljs-bullet, +.hljs-subst, +.hljs-title, +.hljs-section, +.hljs-emphasis, +.hljs-type, +.hljs-built_in, +.hljs-builtin-name, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-addition, +.hljs-variable, +.hljs-template-tag, +.hljs-template-variable { + color: #a6e22e; +} + +.hljs-comment, +.hljs-quote, +.hljs-deletion, +.hljs-meta { + color: #75715e; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-doctag, +.hljs-title, +.hljs-section, +.hljs-type, +.hljs-selector-id { + font-weight: bold; +} diff --git a/plugin/markdown/example.html b/plugin/markdown/example.html index b520304..0904fbb 100644 --- a/plugin/markdown/example.html +++ b/plugin/markdown/example.html @@ -9,7 +9,7 @@ - +