1.Add Table of Contents

For long articles it's better to have ToC to aid browsing, this can be fixed by adding the below Code Injection javascript code to Post Footer section.

   var contentsTitle = "Table of Contents"; 
	var ToC = '<h2>'+contentsTitle+'</h2>';
    ToC += '<nav role="navigation:" class="table-of-contents"><ul>';
    var first = false;
    document.querySelectorAll('h3').forEach(function(el,index) {
        if (first === false) {
        	first = true;
            var newSpan = document.createElement('SPAN');
            el.parentNode.insertBefore(newSpan, el);
		var title = el.textContent;
		var link = "#" + el.id;
        ToC += '<li><a href="' + link + '">' + title + '</a></li>';
	ToC += '</ul></nav>';
    var tocDiv = document.getElementById('dynamictocnative');
    tocDiv.innerHTML = ToC;

2.Change some Global Font Styles

We can leverage global level Code Injection to adjust some default looking for our personal favorites. I like magenta color a lot, which can be used to mark key words or key sentenses.

        /* Decrease the global font size a little bit */
        font-size: 56.25%; /* font-size: 62.5%; */
    .site-title {
        /* Increase back a little bit for the site title, due to above shrinked global font size */
        font-size: 4.2rem;
    .post-full-content em{
        /* Use magenta color instead of italic style, for emphasized words */
        color: magenta; /* color: #090a0b; */
        font-style: normal; /* font-style: italic; */
        /* Add a magenta underlines, for key sentense */
        text-decoration: none; 
        border-bottom:1px solid magenta;

3.Add Yellow Background Color for Inline Code

Inline Code should have a yellow background color, like Visual Studio Code and Github, however Ghost doesn't have that, it can be fixed by editing the scheme's css file.

vi content/themes/casper/assets/built/screen.css
/* From */
.post-full-content code{padding:0 5px 2px;font-size:.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px}
/* To */
.post-full-content code{background:yellow;font-family:inherit;}

4.Simplify the Floating Hearder Bar

After implemented Content of Table, when you click a link and jump to the section, you'll notice the default floating hearder bar becomes active and overlaps the first lines(s), which looks not good. Let's minimize the bar and just leave 2px for the small progress bar.

vi content/themes/casper/assets/built/screen.css
/* From */
.floating-header{visibility:hidden;position:fixed;top:0;right:0;left:0;z-index:1000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:60px;border-bottom:1px solid rgba(0,0,0,.06);background:hsla(0,0%,100%,.95);-webkit-transition:all .5s cubic-bezier(.19,1,.22,1);transition:all .5s cubic-bezier(.19,1,.22,1);-webkit-transform:translate3d(0,-120%,0);transform:translate3d(0,-120%,0)}

@media (max-width:900px){.floating-header{height:40px}
/* To */
.floating-header{visibility:hidden;position:fixed;top:0;right:0;left:0;z-index:1000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:3px;border-bottom:1px solid rgba(0,0,0,.06);background:hsla(0,0%,100%,.95);-webkit-transition:all .5s cubic-bezier(.19,1,.22,1);transition:all .5s cubic-bezier(.19,1,.22,1);-webkit-transform:translate3d(0,-120%,0);transform:translate3d(0,-120%,0)}

@media (max-width:900px){.floating-header{height:2px}

5.Enable Syntax Hightlighting for Code Block

Adding syntax hightlighting for code blocks like Bash, Javascript, SQL helps a lot for reading easiness. We can leverage Prism.js for the purpose.

  • Download a customized prism js/css file
    Go to prismjs.com, select whatever languages you are interested in, for me, I selected a Minified version, a Okaidia theme, and added Bash+Shell, C, C++, JSON, Markdown, nginx, PL/SQL, Python, Regex, vim, and most important SQL. Download and save as prism.js and prism.css.

  • Transfer the prism files to your site
    Copy the prism.js and prism.css to below location:

  • Edit the default.hbs file
vi content/themes/casper/default.hbs

Add the Javascript and Css file reference as below

{{!-- Styles'n'Scripts --}}
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
... ...
<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
<script type="text/javascript" src="{{asset "built/jquery.fitvids.js"}}"></script>