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 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 below, and save as prism.js and prism.css.
    Bash+Shell
    C/C++
    JSON
    Python
    SQL

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

content/themes/casper/assets/js/prism.js
content/themes/casper/assets/css/prism.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 "css/prism.css"}}" />
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.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/prism.js"}}"></script>
    <script src="{{asset "js/remodal.min.js"}}"></script>
    <script src="{{asset "js/ghost-finder.js"}}"></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>
    /* remove the fixed header, to avoid it cover some lines after pyper link jump */
    .site-nav-main{ 
        position: inherit;
    }
    #site-main > div > article > header{
        padding-left: 0;
        padding-right: 0;
    }
    #site-main > div > article > section{
        padding-left: 0;
        padding-right: 0;
    }
    .post-full-content em{
        /* Apply magenta color instead of italic style, for emphasized words */
        color: magenta; /* color: #090a0b; */
        font-style: normal; /* font-style: italic; */
    }
    .post-full-content  u{
        /* Apply a magenta for underlined key sentenses */
        text-decoration: none; 
        border-bottom:1px solid magenta;
    }

    .post-full-content code{
        /* Apply a yellow background for inline code */
        background:yellow;
        font-family:inherit;
        font-size:inherit;
    }

    /* set below code syntax color similar to vscode. */
    /* this can also put in prism.css instead */
    code > span.token.comment	{ color: #6A9955; }
    code > span.token.string	{ color: #CE9178; }
    code > span.token.number	{ color: #B5CEA8; }
    code > span.token.keyword	{ color: #569CD6; }
    code > span.token.function	{ color: #DCDCAA; }
    code > span.token.property	{ color: #9CDCFE; }
    code > span.token.selector	{ color: #D7BA7D; }
</style>