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="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- handle external links -->
<script type="application/javascript">
$(document).ready(function() {
  $('a').each(function() {
     var a = new RegExp('/' + window.location.host + '/');
     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. ↩︎