Casper Dark theme, with custom elements

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 he picked up a few tricks/features. I’ve attached a couple screenshots, or you can check the theme out on my site. It’s a bit of a work in progress, but I thought it was sufficiently done enough for sharing.

Screenshots

Features

The GitHub repo contains a more thorogh readme and usage examples for the features below.

PrismJS & Custom “One Dark” Theme

PrismJS is packaged with my custom One Dark theme and the following languages and plugins;

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
Plugins
  • line-highlight
  • line-numbers
  • toolbar
  • highlight-keywords
  • unescaped-markup
  • command-line
  • show-language
  • copy-to-clipboard

Custom Callouts

5 custom callout styles (inspired by BookStack callouts).

<div> can be used to include line-breaks and markdown in the callout; markdown requires a blank space after the <div>.

  • Generic (white)
  • Info (🛈 blue)
  • Success (✓ green)
  • Warning (:warning: orange)
  • Danger (⯃ red)

Styled <details> (Accordions)

Styling for HTML5 <details> elements, used as accordions.

Closed (default)

Open

Styled Steps Tables

Custom format for single column tables outlining process steps.

2 Likes

This is really nice. Thanks for your hard work and for sharing!

1 Like

Thank you very much, making a lot of changes/tweaks as I learn.

thanks for sharing
what do you use for the blocks <pre><code></code></pre>?

To copy, to format, identify the code etc

Are these two plugins enough?
command-line
copy-to-clipboard

Where can I find them?
Thank you

@giacomosilli - the code formatting, or syntax highlighting, is provided by PrismJS, which I included in the theme.

Usage details can be found here.

Little bonus is a hack for the command-line plugin that allows multiple prompts to be defined; e.g. different prompt for line 1 versus line 2; see this link for reference.

The first code block is created as follows;

   <pre class="command-line language-cisco-nxos" data-prompt="1|NX-OSv#;2|NX-OSv(config)#">
   <code>conf
   feature nxapi</code></pre>

Thank you i’ll study it

Hello @derek-shnosh

how are you adding the command-line class in the pre tag and class command-line-prompt in span tag?
I managed to implement everything using JQuery

@giacomosilli there is an example at the bottom of my previous post.

Additionally, here is a JSfiddle that has a few examples (look at the HTML section).

I see the example, but I meant how to insert classes dynamically, I didn’t just want an example of the markup.

However I saw the example in JSfiddle, it seems a lot simpler my solution with jquery, 3 lines of code.

Apologies, I’m unsure what you’re referring to; can you share an example?

I’m doing something like that to add some tags and classes dynamically.
This is just an example:

$( "pre" ).each(function() {
	if ($('.language-bash').length > 0) {
		$( this ).addClass( "command-line" );
	}
});