Ghost blog code injection - This contains both "Blog Header" and "Blog Footer" code injection blocks that supports customization of the default Ghost theme, Casper. The custom styling for the header fixes a wrapping/horizontal scrolling issue for code samples in the default theme, and the JavaScript for the footer enables/renders Disqus comments…

blog-footer.js

<script id="inject-comments">
  (function (doc, global) {
    var userConfig = {
      globalModuleName: "",
      excludeCommentsFromPageClasses: [],
      disqusSiteKey: ""
    };

    var defaults = {
      globalModuleName: "GhostBlogCodeInjection",
      commentPageClasses: ["post-template"],
      excludeCommentsFromPageClasses: [],
      commentScrollOffset: 100
    };

  /* extend - http://stackoverflow.com/a/11197343 */
    var extend = function () {
      for (var i = 1; i < arguments.length; i++) {
        for (var key in arguments[i]) {
          if (arguments[i].hasOwnProperty(key)) {
            arguments[0][key] = arguments[i][key];
          }
        }
      }

      return arguments[0];
    };
  /* END extend */

  /* bling - https://gist.github.com/paulirish/12fb951a8b893a454b32 */
    global.$ = doc.querySelectorAll.bind(doc);

    Node.prototype.on = global.on = function (name, fn) {
      this.addEventListener(name, fn);
    };

    NodeList.prototype.__proto__ = Array.prototype;

    NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
      this.forEach(function (elem, i) {
        elem.on(name, fn);
      });
    }
  /* END bling */

  /* throttle - https://developer.mozilla.org/en-US/docs/Web/Events/scroll */
    var throttle = function (type, name, target) {
      var handler,
          target = target || global,
          running = false;

      handler = function () {
        if (running) {
          return;
        }

        running = true;
        requestAnimationFrame(function () {
          target.dispatchEvent(new CustomEvent(name));
          running = false;
        });
      };

      target.addEventListener(type, handler);
    };

    // throttle the scroll event
    throttle("scroll", "optimizedScroll");
  /* END throttle */

    var config = extend({}, defaults, userConfig);

    var app = global[config.globalModuleName] = global[config.globalModuleName] || {
      init: function () {
        this.config = config;

        if (this.shouldRenderComments()) {
          this.comments.init();
          window.addEventListener("optimizedScroll", this.comments.onScroll.bind(this.comments));
        }
      },

      shouldRenderComments: function () {
        if (!this.config.disqusSiteKey || this.config.disqusSiteKey === "") {
          console.warn("Disqus site key missing");
          return false;
        }

        var pageClasses = $("body")[0].className.split(" ");

        if (this.util.anyMatchesBetweenArrays(pageClasses, this.config.excludeCommentsFromPageClasses)) {
          return false;
        }

        if (this.util.anyMatchesBetweenArrays(pageClasses, this.config.commentPageClasses)) {
          return true;
        }
      },

      comments: {
        script: function () {
          var commentScript = "" +
              "var disqus_shortname = '" + app.config.disqusSiteKey + "';\n\n" +
              "(function () {\n" +
              "  var dsq = document.createElement('script');\n" +
              "  dsq.async = true;\n" +
              "  dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';\n" +
              "  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);\n" +
              "}());";

          return commentScript;
        },

        init: function () {
          this.rendered = false;
          var $post, postBottom;

          $post = $("article.post")[0];
          postBottom = ($post.offsetTop + $post.clientHeight);
          this.triggerPosition = (postBottom + app.config.commentScrollOffset);
          this.shouldShow();
        },

        shouldShow: function () {
          var windowHeight = global.innerHeight,
              scrollBottom = (global.scrollY + windowHeight);

          if ((global.scrollY + windowHeight) >= this.triggerPosition) {
            this.show();
          }
        },

        onScroll: function () {
          if (!this.rendered) {
            this.shouldShow();
          }
        },

        show: function (e) {
          if (!this.rendered) {
            this.rendered = true;
            var $commentContainer, $disqusThread, $disqusScript, $disqusScriptContent,
                $post = $("article.post")[0];

            $commentContainer = doc.createElement("div")
            $disqusThread = doc.createElement("div");
            $disqusScript = doc.createElement("script");
            $disqusScriptContent = doc.createTextNode(this.script());
            $disqusScript.appendChild($disqusScriptContent);
            $disqusThread.setAttribute("id", "disqus_thread")
            $commentContainer.setAttribute("id", "disqus-comments-container");
            $commentContainer.setAttribute("class", "comments-container");
            $commentContainer.appendChild($disqusThread);
            $commentContainer.appendChild($disqusScript);
            $post.appendChild($commentContainer);
          }
        }
      },

      util: {
        anyMatchesBetweenArrays: function (a, b) {
          var matches = [];

          for (var ai = 0; ai < a.length; ai++) {
            for (var bi = 0; bi < b.length; bi++) {
              if (a[ai] === b[bi]) {
                return true;
              }
            }
          }

          return false;
        }
      }
    };

    global[config.globalModuleName] = app;

    global[config.globalModuleName].init();
  }(document, this));
</script>

blog-header.css

<style type="text/css">
  pre {
    border-radius: 4px;
    font-size: 0.8em;
    line-height: 1.3em;
    padding: 1em;
  }

  pre, code, pre > code {
    font-family: Consolas, Monaco, "Andale Mono", monospace;
    overflow-x: touch;
    text-shadow: 0 1px #fff;
    white-space: pre;
    -webkit-overflow-scrolling: ouch;
  }

  :not(pre) > code {
    border-radius: 4px;
    font-size: 0.8em;
    line-height: 1.5em;
    padding: 2px 7px 0px 7px;
    text-shadow: 0 1px #fff;
    vertical-align: text-top;
    white-space: pre-wrap;
  }

  /*
    ======================================================
    Override/fix code block word-wrap/scrolling wonkiness
    ======================================================
  */
  code[class*="language-"], code, pre[class*="language-"], pre, :not(pre) > code {
    white-space: pre;
  }

  code[class*="language-"], code {
    display: inline-block;
  }

  /*
    =========
    Comments
    =========
  */
  .comments-container::before {
    border-bottom: 1px solid #e3edf3;
    content: "Discussion";
    display: block;
    font-size: 1.5em;
    /*margin: 2em 0;*/
    text-align: center;
  }

  .comments-container {
    background: #f7fafb;
    border: 1px solid #e3edf3;
    border-radius: 4px;
    margin-top: 2em;
    padding: 1em;
  }

  /*
    ==========================
    Gist embed customizations
    ==========================
  */
  .gist {
    article.markdown-body {
      background: #f7fafb;
      font-family: "Open Sans";
      font-size: 1em;
      line-height: 1.5em;
      padding: 0.75em 1em;

      h1, h2, h3, h4, h5, h6 {
        font-family: "Open Sans";
        font-weight: bold;
      }

      table {
        border: 1px solid #efefef;
        margin-bottom: 20px;

        thead {
          tr {
            background: #fefefe;
          }
        }
      }

      hr {
        margin: 40px 0 30px 0;
      }

      :not(pre) {
        code {
          background: #f7f7f7;
          padding: 5px 7px;
        }
      }

      pre {
        background: #f7f7f7;
        line-height: 1.1em;
        overflow: auto;
        padding: 10px;

        code {
          overflow: auto;
        }

        span {
          white-space: nowrap;
        }

        code, span {
          font-family: Consolas, Monaco, 'Andale Mono', monospace;
          font-size: 0.7em;
        }
      }
    }
  }
</style>