Generate Table of Contents Automatically

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.

<script>    
    var contentsTitle = "Table of Contents"; // Set your title here, to avoid making a heading for it later
     var ToC = "<h2>"+contentsTitle+"</h2>";
     ToC += "<nav role='navigation' class='table-of-contents' style='width: 100%'><ul style='padding-left: 0'>";
     var first = false;
  
     document.querySelectorAll('#site-main > div > article > section > div.post-content h2,h3').forEach(function(el,index) {
         if (first === false) {
             first = true;
             var newSpan = document.createElement("SPAN");
             newSpan.id="dynamictocnative";
             el.parentNode.insertBefore(newSpan, el);
         }       
         var title = el.textContent;
         var link = "#" + el.id;
         if (el.nodeName === "H2" && el.className != "post-card-title") {
             ToC += "<li style='list-style: none'><a href='" + link + "'>" + title + "</a></li>";
         } else if (el.nodeName === "H3" && el.className != "post-card-title"){
             ToC += "<li style='list-style: none; margin-left:2em'><a href='" + link + "'>" + title + "</a></li>";
         }
     });
     
     ToC += "</ul></nav>";
     var tocDiv = document.getElementById('dynamictocnative');
     ToC += '<style>#dynamictocnative { width: 100%; }</style>';
     tocDiv.outerHTML = ToC;
     console.log(ToC);
 </script>

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 highlightjs for the purpose.

  • Download a customized prism js/css file
    Go to highlightjs, download hightlight.zip

  • Transfer the prism files to your site
    Copy the highlight.pack.js and style/vs2015.css to below location:

content/themes/casper/assets/js/highlight.pack.js
content/themes/casper/assets/css/vs2015.css
  • 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 "built/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/vs2015.css"}}" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/remodal.css"}}" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/remodal-default-theme.css"}}" />

... ...

    {{ghost_foot}}
    <script src="{{asset "js/highlight.pack.js"}}"></script>
    <script src="{{asset "js/remodal.min.js"}}"></script>
    <script src="{{asset "js/ghost-finder.js"}}"></script>
    <script >hljs.initHighlightingOnLoad();</script>
    {{!-- the contentApiKey is copied from the GhostFinder customized integration--}}
    <script>
        new GhostFinder({
            input: '#search-input',
            showResult: '#search-result',
            contentApiKey: 'c73d282e9be6c12426c4c58023' 
        })
    </script>

Change some Global 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, and a yellow background for inline code

<style>
    .site-home-header .site-description{
        max-width: 500px;
        text-align: center;
    }
    #site-main > div > article > header{
        padding-left: 0;
        padding-right: 0;
    }
    #site-main > div > article > section{
        padding-left: 0;
        padding-right: 0;
    }
    #site-main > div > article > section > div > table > tbody > tr > td{
        padding: 12px;
    }
    #site-main > div > article > section > div > table > tbody > tr > td > pre{
        margin-top: 0;
        margin-bottom: 0;
    }
    .post-full-content em{ /* Apply a magenta underline, instead of italic style */
        font-style: normal; 
        border-bottom:1px solid magenta; 
    }
    .post-full-content code{ /* Apply a yellow background for inline code */
        background:yellow;
        font-family:inherit;
        font-size:inherit;
    }
    .post-full-content table{
        white-space: normal;
    }
    .post-full-content img{
        max-width: 100%;
    }
</style>