Ghost Blog: Syntax Highlighting Theme

css Nov 29, 2019

We at Wisdom are great fans of Ghost blog system- but we've been annoyed long enough with the syntax highlighting. Scroll to the bottom for a quick 30 second copy & paste solution you're welcome to use.

As a quick and scrappy solution, we've put together all the code needed to setup the Prism syntax highlighter code- and since updating ghost themes manually are a pain, we'll just shove everything in the inline injection textareas.

We were inspired to add the macOS window theming from https://carbon.now.sh,  and, funny enough, some fan art of the new Tesla Truck built with a single div component and some fairly heavy CSS- it's amazing the dirty coding styles CSS supports.

Jumping into the code, it's all simple styling. The real trick comes from using multiple background instances to create the macOS window theming. Here is the relevant background style snippet.

div>pre[class*=language-] {
  background:
    /* Red Dot */
    no-repeat 10px 10px / 14px 14px
    radial-gradient(circle at 50%, rgb(255, 95, 86) 62%, #97979700 64%),
	
    /* Yellow Dot */
    no-repeat 30px 10px / 14px 14px
    radial-gradient(circle at 50%, rgb(255, 189, 46) 62%, #97979700 64%),

    /* Green Dot */
    no-repeat 50px 10px / 14px 14px
    radial-gradient(circle at 50%, rgb(39, 201, 63) 62%, #97979700 64%),

    /* Header Background */
    no-repeat 0 0 / 100% 34px 
    linear-gradient(#f2f2f2, #f2f2f2),

    /* Bottom Border */
    no-repeat 0 34px / 100% 1px
    linear-gradient(#e0e0e0, #e0e0e0),

    /* Plain White Background */
    #ffffff;
}


Alright, let's get this code installed.

1. Styles into the Header

Paste the following code into the header section of the ghost blog.

<link rel="stylesheet" type="text/css" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.0/themes/prism.min.css"/>

<style>
    div>pre[class*=language-] {
        font-size: 14px;
        padding-top: 54px;
        margin-bottom: 26px;
        box-shadow: 0 2px 16px 0 #999999, 0 1px 2px -1px #777;
        background: no-repeat 10px 10px / 14px 14px radial-gradient(circle at 50%, rgb(255, 95, 86) 62%, #97979700 64%), no-repeat 30px 10px / 14px 14px radial-gradient(circle at 50%, rgb(255, 189, 46) 62%, #97979700 64%), no-repeat 50px 10px / 14px 14px radial-gradient(circle at 50%, rgb(39, 201, 63) 62%, #97979700 64%), no-repeat 0 0 / 100% 34px linear-gradient(#f2f2f2, #f2f2f2), no-repeat 0 34px / 100% 1px linear-gradient(#e0e0e0, #e0e0e0), hsla(0, 0%, 100%, 1);
        border-radius: 8px;
        border: none;
    }
    .post-full-content pre {
        overflow-x: auto;
        margin: 1.5em 0 3em;
        padding: 25px;
        max-width: 100%;
        border: 1px solid #cee1ee;
        color: #283034;
        font-size: 1.4rem;
        line-height: 1.5em;
        background: #e5eff6;
        border-radius: 5px;
    }

    code[class*=language-],pre[class*=language-]{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;color:#060606;background:#ffffff;font-family:Roboto Mono,monospace;font-size:1em;line-height:1.5em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{background:#cceae7;color:#263238}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{background:#cceae7;color:#263238}:not(pre)>code[class*=language-]{white-space:normal;border-radius:.2em;padding:.1em}pre[class*=language-]{overflow:auto;position:relative;margin:.5em 0;padding:1.25em 1em}.language-css>code,.language-sass>code,.language-scss>code{color:#f76d47}[class*=language-] .namespace{opacity:.7}.token.atrule{color:#7c4dff}.token.attr-name{color:#39adb5}.token.attr-value{color:#f6a434}.token.attribute{color:#f6a434}.token.boolean{color:#7c4dff}.token.builtin{color:#39adb5}.token.cdata{color:#39adb5}.token.char{color:#39adb5}.token.class{color:#39adb5}.token.class-name{color:#6182b8}.token.comment{color: #567686; font-style: italic;}.token.constant{color: #FF9800;font-weight: 600;}.token.deleted{color:#e53935}.token.doctype{color:#aabfc9}.token.entity{color:#e53935}.token.function{color:#7c4dff}.token.hexcode{color:#f76d47}.token.id{color:#7c4dff;font-weight:700}.token.important{color:#7c4dff;font-weight:700}.token.inserted{color:#39adb5}.token.keyword{color:#4d6aff}.token.number{color:#f76d47}.token.operator{color:#39adb5}.token.prolog{color:#aabfc9}.token.property{color:#39adb5}.token.pseudo-class{color:#f6a434}.token.pseudo-element{color:#f6a434}.token.punctuation{color:#39adb5}.token.regex{color:#6182b8}.token.selector{color:#e53935}.token.string{color: #f6348c;}.token.symbol{color:#7c4dff}.token.tag{color:#e53935}.token.unit{color:#f76d47}.token.url{color:#e53935}.token.variable{color:#e53935}

</style>

Now add the following scripts into the footer section of your Ghost blog. Sure you could put them in your header section, but it's always best to keep render blocking resources in the footer.

Add Prism's javascript core syntax highlighting code, along with all the syntax highlighting module's you will likely want to add. Since our block typically covers only web + node code, we'll add only the CSS/SAAS, javascript, and HTML modules.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.0/prism.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.0/components/prism-css.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.0/components/prism-javascript.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.0/components/prism-html.min.js"></script>

Now click save, and you're ready to go. Go back to your live blog site and see your snazzy new changes. Here's what you should have:


Plug: Wisdom is a front-end monitoring tool that helps front-end developers catch and fix bugs faster by combining session replay, error tracking, and developer tools— all in one amazing package.

Wisdom

The developers behind Wisdom, building amazing dev tools for web apps. We're logging every rage click, console log, network request, and stack trace, and redux action— with HTML replay.