xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

switch to monokai as default syntax highlight theme

Browse Source
This commit is contained in:
Hakim El Hattab 2019-03-12 11:26:10 +01:00
parent 7b66abd49c
commit fbbae1dc55
18 changed files with 92 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -897,7 +897,7 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
### Code syntax highlighting ### 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 ```javascript
Reveal.initialize({ Reveal.initialize({

2
css/theme/beige.css
View File

@ -153,7 +153,7 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; 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 { .reveal code {
font-family: monospace; font-family: monospace;

8
css/theme/black.css
View File

@ -11,8 +11,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
body { body {
background: #222; background: #191919;
background-color: #222; } background-color: #191919; }
.reveal { .reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif; font-family: "Source Sans Pro", Helvetica, sans-serif;
@ -149,7 +149,7 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; 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 { .reveal code {
font-family: monospace; font-family: monospace;
@ -270,4 +270,4 @@ body {
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: #222; } } background-color: #191919; } }

2
css/theme/blood.css
View File

@ -152,7 +152,7 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; 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 { .reveal code {
font-family: monospace; font-family: monospace;

2
css/theme/league.css
View File

@ -155,7 +155,7 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; 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 { .reveal code {
font-family: monospace; font-family: monospace;

2
css/theme/moon.css
View File

@ -153,7 +153,7 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; 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 { .reveal code {
font-family: monospace; font-family: monospace;

2
css/theme/night.css
View File

@ -147,7 +147,7 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; 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 { .reveal code {
font-family: monospace; font-family: monospace;

2
css/theme/serif.css
View File

@ -149,7 +149,7 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; 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 { .reveal code {
font-family: monospace; font-family: monospace;

2
css/theme/simple.css
View File

@ -152,7 +152,7 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; 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 { .reveal code {
font-family: monospace; font-family: monospace;

2
css/theme/sky.css
View File

@ -156,7 +156,7 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; 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 { .reveal code {
font-family: monospace; font-family: monospace;

2
css/theme/solarized.css
View File

@ -153,7 +153,7 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; 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 { .reveal code {
font-family: monospace; font-family: monospace;

2
css/theme/source/black.scss
View File

@ -16,7 +16,7 @@
// Override theme settings (see ../template/settings.scss) // Override theme settings (see ../template/settings.scss)
$backgroundColor: #222; $backgroundColor: #191919;
$mainColor: #fff; $mainColor: #fff;
$headingColor: #fff; $headingColor: #fff;

2
css/theme/template/theme.scss
View File

@ -167,7 +167,7 @@ body {
word-wrap: break-word; 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 { .reveal code {

2
css/theme/white.css
View File

@ -149,7 +149,7 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; 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 { .reveal code {
font-family: monospace; font-family: monospace;

2
demo.html
View File

@ -19,7 +19,7 @@
<link rel="stylesheet" href="css/theme/black.css" id="theme"> <link rel="stylesheet" href="css/theme/black.css" id="theme">
<!-- Theme used for syntax highlighting of code --> <!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css"> <link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports --> <!-- Printing and PDF exports -->
<script> <script>

4
index.html
View File

@ -11,7 +11,7 @@
<link rel="stylesheet" href="css/theme/black.css"> <link rel="stylesheet" href="css/theme/black.css">
<!-- Theme used for syntax highlighting of code --> <!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css"> <link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports --> <!-- Printing and PDF exports -->
<script> <script>
@ -41,7 +41,7 @@
{ src: 'plugin/markdown/marked.js' }, { src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' }, { src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true }, { src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } } { src: 'plugin/highlight/highlight.js', async: true }
] ]
}); });
</script> </script>

71
lib/css/monokai.css Normal file
View File

@ -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;
}

2
plugin/markdown/example.html
View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../../css/reveal.css"> <link rel="stylesheet" href="../../css/reveal.css">
<link rel="stylesheet" href="../../css/theme/white.css" id="theme"> <link rel="stylesheet" href="../../css/theme/white.css" id="theme">
<link rel="stylesheet" href="../../lib/css/zenburn.css"> <link rel="stylesheet" href="../../lib/css/monokai.css">
</head> </head>
<body> <body>