My Ghost Configuration

I started with a minimalist setup, using the default Casper theme with a few necessary additions. If you like any of them, here's the resources I used.

Initially, I made all my alterations in the Ghost header through code injection. Eventually, that got too bulky, so I started working on my own theme, which has a corresponding git repository. Eventually, I will link to that here. In the meantime, here's my features, with some of their code.

The stuff that has code here.

<!-- CDNs -->  
<script src=""></script>  
<script src=""></script>  
<script src=""></script>

<!-- handle external links -->  
<script type="application/javascript">  
$(document).ready(function() {
  $('a').each(function() {
     var a = new RegExp('/' + + '/');
     if (!a.test(this.href)) {
         /* open in a new window */
         /* add unicode arrow */

The stuff that will have code linked later.

  • the table of contents
    • to automatically generate: I followed this post
    • to get centering right: this guide
    • to follow scrolling text: I followed this Q&A and added some CSS and jQuery code of my own
    • to add a show/hide button: I added some code inspired by this demo.
    • to make sideways/rotated text: (CSS-only) I started with this solution, and then finagled the surrounding divs to match.
  • the blue links for expanding hidden text are implemented through jQuery extensions to the markdown syntax, which can be found in assets/js/markdown.extended.js in my theme repository once I link it into here.


  1. Initially, I wanted live updating the preview during edits, so I also put it in the Ghost views header, with some re-rendering code. I now find that too distracting, so it's phased out in favor of only occasionally using a dynamic preview page just for the math sections when I need it.