Add example CSS file matching Sundell’s Colors

This change adds an example CSS file to a new /Examples folder, which
shows what kind of CSS classes that Splash uses when generating HTML.
This commit is contained in:
John Sundell 2018-08-25 20:34:16 +02:00
parent 54598263bb
commit 9c1fdd358d
2 changed files with 61 additions and 0 deletions

View File

@ -0,0 +1,59 @@
/**
* Example CSS file that can be used to style Splash HTML output
* Copyright (c) John Sundell 2018
* MIT license - see LICENSE.md
*/
pre {
margin-bottom: 1.5em;
background-color: #1a1a1a;
padding: 16px 0;
border-radius: 16px;
}
pre code {
font-family: monospace;
display: block;
padding: 0 20px;
color: #a9bcbc;
line-height: 1.4em;
font-size: 0.95em;
overflow-x: auto;
white-space: pre;
}
pre code .keyword {
color: #e73289;
}
pre code .type {
color: #8281ca;
}
pre code .call {
color: #348fe5;
}
pre code .property {
color: #21ab9d;
}
pre code .number {
color: #db6f57;
}
pre code .string {
color: #fa641e;
}
pre code .comment {
color: #6b8a94;
}
pre code .dotAccess {
color: #92b300;
}
pre code .preprocessing {
color: #b68a00;
}

View File

@ -45,6 +45,8 @@ You'll get the following output back:
<span class="keyword">func</span> hello(world: <span class="type">String</span>) -> <span class="type">Int</span>
```
To be as flexible as possible, Splash doesn't hardcode any colors or other CSS attributes in the HTML it generates. Instead it simply assigns a CSS class to each token. For an example of a CSS file that can be used to style Splash-generated HTML, see [Examples/sundellsColors.css](https://github.com/JohnSundell/Splash/blob/master/Examples/sundellsColors.css).
For more information about HTML generation with Splash and how to customize it, see `HTMLOutputFormat`.
#### SplashImageGen