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.

3 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" );
	}
});

this implementation is much better https://github.com/codex-team/codex.special

@neurosatan Thanks for your input/feedback.

That looks like a great utility for modifying the default elements of the Casper theme on a predetermined color palette; but it wouldn’t be a direct match to what has been done with this theme, nor does it include the custom elements that have been added.

I’m definitely going to star the repo and look into it more for other projects though, thanks again.

You did an amazing job here! Do you plan to follow the official Casper updates?

Something like > https://grantwinney.com/how-to-customize-the-default-casper-theme-in-ghost/

Cheers!

@pascalandy - Thanks!

I do periodically update my fork from the main Casper project. I put an update in the changelog.md file any time I do this.

1 Like

Perfect!