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:
parent
54598263bb
commit
9c1fdd358d
59
Examples/sundellsColors.css
Normal file
59
Examples/sundellsColors.css
Normal 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;
|
||||
}
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user