Added Tex math typesetting using the fastest library available: Khan Academy’s KaTeX

Author: curiositry

README.md

@@ -27,6 +27,11 @@ Features:
 - Robots.txt inproves SEO by removing tag listings from search engines so your content is more prominent
 - Responsive, accessible menu for static pages (or anything else) that stays out of the way [NEW!]
 - Comments powered by Disqus, and loaded with AJAX that don’t slow down your site. [NEW!]
-
+- Blazing fast
+  - Thumbnails are resized automathically.
+  - Non-essential scripts and styles are loaded asynchronously or deferred
+  - Comments are only loaded when needed
+  - Uses the fastest math rendering library, and the fastest webfont provider [citation needed]
+- Optional Math rendering with KaTeX
 
 ![Screenshot](http://api.drp.io/files/5437789e305b7.png)

assets/css/defer.css

@@ -9,6 +9,8 @@
  * http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
 code[class*=language-],pre[class*=language-]{color:#000;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#DD4A68}.token.important,.token.regex{color:#e90}.token.important{font-weight:700}.token.entity{cursor:help}.token.deleted{color:red}.token.inserted{color:green}pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre.line-numbers>code{position:relative}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
 
+
+
 /* ==========================================================================
    1. Icons - Sets up the icon font and respective classes
    ========================================================================== */

assets/css/main.css

@@ -875,6 +875,17 @@ aside.note:before{
     padding-bottom: 0;
 }
 
+.katex-display {
+margin: 1em 0;
+text-align: center;
+}
+
+.katex-display > span {
+display: inline-block;
+overflow: hidden;
+margin: 0 auto;
+}
+
 /* Kill that stylish little circle that was on the border, too */
 .post-template .post:after {
     display: none;

default.hbs

@@ -53,6 +53,12 @@
     -->
     {{!>menu}}
 
+    <!-- This loads katex.hbs in; if a page has anything with the class math, katex.hbs            loads Khan Academy’s Tex math typesetting library and runs it on the content.
+
+         If you don’t want to use KaTeX, comment this out.
+    -->
+    {{>katex}}
+
     {{! Ghost outputs important scripts and data with this tag }}
     {{ghost_foot}}
 

page.hbs

@@ -29,8 +29,6 @@
         <section class="post-content">
             {{content}}
         </section>
-
     {{/post}}
     </article>
-
 </main>

partials/katex.hbs

@@ -0,0 +1,28 @@
+<span id="katexScript"></span>
+
+<script type="text/javascript">
+var mathAreas = document.getElementsByClassName("math");
+if (mathAreas){
+  var ss = document.createElement("link");
+  ss.type = "text/css";
+  ss.rel = "stylesheet";
+  ss.href = "//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.css";
+  document.getElementsByTagName("head")[0].appendChild(ss);
+
+  var script = document.createElement( 'script' );
+  script.type = 'text/javascript';
+  script.src = '//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.js';
+  document.body.appendChild(script);
+
+  window.onload = function() {
+    Array.prototype.forEach.call(
+      document.getElementsByClassName("math"),
+      function(el) {
+        try {
+          katex.render(el.innerHTML, el);
+        } catch (e) { console.log(e); }
+      }
+    );
+  }
+}
+</script>

post.hbs

@@ -78,5 +78,4 @@
     <!--  If you want Disqus comments, uncomment this. Make sure to set your disqus shortname in partials/comments.hbs first!  -->
     {{!>comments}}
     </article>
-
 </main>