Based on the default theme (Casper) for Ghost.
Merged with upstream v2.11.1 on 2019/08/29
Disclosure: I'm new to all of this CSS, HTML, etc. shenanigans; aside from a private BookStack instance, this is my first venture into any kind of theming.
That being said, I put Casper in the dark and added a few tricks/features; primarily focused on presenting technical documentation. I've attached a couple screenshots, or you can check the theme out on my site. While this is a bit of an experimental work in progress, I thought it was sufficiently done enough for sharing; I expect there will be changes as I learn, tweak, and (hopefully) optimize over time.
- Download the files using the GitHub .zip download option.
- Navigate to Settings > Design on your Ghost admin interface.
- Click Upload a theme (near bottom).
- Either drag the .zip file onto the dialogue, or click the center to browse to the .zip.
- Click Activate Now.
PrismJS is packaged with my custom One Dark theme and the following languages and plugins;
Expand for Languages
- markup
- css
- clike
- javascript
- apacheconf
- bash
- batch
- css-extras
- markup-templating
- git
- handlebars
- http
- ini
- php
- json
- markdown
- django
- nginx
- sql
- powershell
- scss
- python
- rest
- sass
- yaml
- tcl
- visual-basic
- regex
Expand for Plugins
- line-highlight
- line-numbers
- toolbar
- highlight-keywords
- unescaped-markup
- command-line
- show-language
- copy-to-clipboard
Screenshot
The PrismJS command-line plugin includes a hack that allows multiple prompts to be defined per code-block (source).
<pre class="command-line language-bash" data-prompt="1,4|NXOSv#;2-3|NXOSv(config)#">
<code>conf
feature nxapi
end
copy ru st</code></pre>
Styling for HTML5 <details> elements, used as accordions.
<details><summary>Expand for <desc>Dynamic Variable Example</desc></summary>
`gi_ints` is a list of GigabitEthernet interfaces, which scales with the number of switches in the stack.
| Switch Count | `gi_ints` |
| :-: | :- |
| 1 | `gi1/0/1-36` |
| 2 | `gi1/0/1-36,gi2/0/1-36` |
| 3 | `gi1/0/1-36,gi2/0/1-36,gi3/0/1-36` |
| 4 | `gi1/0/1-36,gi2/0/1-36,gi3/0/1-36,gi4/0/1-36` |
</details>Closed (default)
Open
5 custom callout styles (inspired by BookStack callouts).
- Generic (white)
- Info (blue)
- Success (green)
- Warning (orange)
- Danger (red)
<p class="callout">This is a plain callout.</p>
<p class="callout info">This is an informational callout.</p>
<p class="callout success">This is a success callout</p>
<p class="callout warning">This is a warning callout</p>
<p class="callout danger">This is a danger callout</p>Can be used to include line-breaks and markdown in the callout; markdown requires a blank space after the <div> (ignore \ in the code block).
<div class="callout info">
This is an informational callout with some `inline-code`
> **And a blockquote.**
>
> With *markdown* formatting; e.g. ~~strikethrough~~
\```bash
# And a code block.
sudo nano /etc/hostname
\```
And a list
- Item 1
- Item 2
- Sub-item
</div>
Custom format for single column Markdown tables used to outline process steps.
Wrap the table in a <div> tag; markdown requires a blank space after the <div>.
<div class="steps-table">
| How to hold up three fingers. <!-- Header -->
| - <!-- Separator line -->
| Hold up **one** finger. <!-- Step -->
| ![step1][1-finger] <!-- Image -->
| Hold up **two** fingers. <!-- Step -->
| ![step2][2-fingers] <!-- Image -->
| Hold up **three** fingers. <!-- Step -->
| ![step3][3-fingers] <!-- Image -->
</div>
<!-- Use reference style links to keep table rows concise. -->
[1-finger]: https://i.imgur.com/tjeG9rD.png
[2-fingers]: https://i.imgur.com/rCbyQrV.png
[3-fingers]: https://i.imgur.com/1kbc5eN.png
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent