In the third version of the MNML theme, I added the ability to use mathematics in your blog posts.

The math is typeset using Khan Academy’s KaTeX library, which claims to be the fastest math typesetting library for the web. Additionally, the MNML theme only loads KaTeX if it detects mathematics on the page that need to be rendered. Here’s how you can start using math in your posts.

The TeX Math Typesetting Standard

KaTeX typesets math using the TeX syntax. TeX is a typesetting that was created by Donald Knuth 36 years ago. However, it is still widely used, and it has been noted as “… one of the most sophisticated digital typographical systems in the world.” ¹

TeX is popular in academia, especially in mathematics, as well as computer science, engineering, physics, and other disiplines.

Including KaTeX in the mnml theme will allow the scientifically inclined to typeset math in the way they are used to, but from the comfort of their own blog.

If you’re not familiar with Tex, but would like to use math on your blog, take a look at this handy cheatsheet (.pdf)

The Syntax

To use Tex math on your blog, use the following syntax:

<section class="math">TEX EQUATION HERE</section>  

KaTeX will look for any element with the class math, and typeset its contents. I highly recommend using the <section> element for your math, as it formats correctly. If you use non-block-level elements, like spans, Ghost will convert your math to Markdown before KaTeX typesets it, which causes all kind of problems. (Example: Tex subscript will be parsed as Markdown italics).

Thus, this expression:

<section class="math"> \pi = {c \over d}</section>  

… will be rendered by KaTeX like this:

Looks mighty fine. What about something more complicated? Try the forumla for standard deviation:

Conclusion

That’s it! The Mnml theme makes it easy for scientists to expound their knowledge … beautifully.

If you don’t plan on using math on your blog, you can disable KaTeX by changing {{>katex}} to {{!>katex}} on line 60 of default.hbs, but since it’s loaded conditionally, you don’t really need to.

Let’s finish of with Heisenbergs uncertainty relation:

Having seen the mnml theme shine on this site (and others ), and thus become aware of its excellence, the next logical step is to install it on your own blog.

MNML is installed in the same way as any other Ghost theme, but there are a few options to configure if you’re going to use some of the more advanced features.

Download & Install

First, download the latest verion of the theme from github. If you like the command line, you can do that with:

git clone https://github.com/curiositry/mnml-ghost-theme  

Or, you can download the latest version as a .zip file if you prefer (this is the way to go if you’re using Ghost(Pro) hosting):

Assuming you have installed the Ghost blogging platform, and have somewhere to host it, using the mnml theme is very simple.

Just follow the guide for your chosen method of installation, either this guide for Ghost(Pro) or, or follow the instructions for switching themes if you’re hosting your blog elsewhere.

Configure Comments & Menu

Your blog is ready to go! That’s all you need to do for mnml to look great and perform wonderfully. However, if you want configure comments on your posts, or a menu for other pages, read on.

Comments

The mnml theme supports comments, and it’s easy to set up. Mnml uses the Disqus commenting platform: if you want comments on you blog, here’s what to do.

• Sign up for a Disqus account (it’s free)
• Click Add Disqus to Your Site, and choose a “shortname”
• Open partials/comment.hbs and change the disqus_shortname variable (on line 13) to be the shortname you picked.
• On line 78 of post.hbs, replace {{!>comments}} with {[>comments}} to include the comments partial you just edited.

I recommend changing the comment count text, which can be found on disqus.com under the setting tab on the admin page for your new shortname to look like this.

Menu

Mnml also supports a menu, where you can link to static pages or anything else you like. By default, menu.hbs has links to the homepage, /about, and /contact. Here’s how to set it up.

• Update the links in partials/menu.hbsto what ever you want, or just create two static posts, one with the slug contact, and the other about, which are the default links in the menu.
• Uncomment the partial: replace {{!>menu}} with {{>menu}}, on line 54 of default.hbs

Version two of the MNML Ghost theme is out — completely redesigned and better than ever! It has moved from being a better default theme, a replacement for Casper, to having a unique look of its own. Wondering what it looks like? This blog is using the mnml theme.

Typography

MNML has a `.pull` class … to highlight the brilliance of a particular phrase you wrote and annoy all your readers.

MNML has had a typographic overhaul. It is now typeset in Source Serif Pro & Source Sans Pro, with a touch of Alegreya. Source Serif and Sans make an excellent pair—readable and unaffected, but with a certain quiet class. All typefaces are served—at blazing speeds—by Brick.

Helpers

MNML Includes a .thumb class for using thumbnail size images — sometimes you don’t need an image to fill the screen. See it at right.

MNML has a .pull class for … classy pullquotes! Just tack it onto a blockquote when you want to highlight the brilliance of a particular phrase you wrote and annoy all your readers.

Sometimes you need to explain something or digress outside of the main text; for that use the <aside> tag which MNML floats out of the way to the right. If you’re talking about something in the main text, use <aside> with the .note class — yeah, talk about semantics.

There are a handful of other helpers, too, that are there if you need them: .sc for small caps (which Source Serif Pro doesn’t have yet), .center-text to, ah, center text, and m0a for margin: 0 auto;.

Syntax Highlighting

Prism is used for syntax highlighting. A code block with the language specified will be automatically highlighted, so:

```language-javascript
function factorial(n) {
    if (n === 0) {
        return 1;
    }
    return n * factorial(n - 1);
}
```

becomes…

function factorial(n) {  
    if (n === 0) {
        return 1;
    }
    return n * factorial(n - 1);
}

Get it!

MNML has countless other features & benefits. I’d say it’s time to stop drooling and start the download:

Alternately, you can clone it straight into your themes directory with:

git clone https://github.com/curiositry/mnml-ghost-theme.git  

This is a the demo site for mnml — a better default Ghost theme. mnml is typographically tasteful, functional, and responsive. Casper is good, but minimal adds a touch of class.

Salient features:

• Everything that makes Casper great, plus…
• Prism.js syntax highlighting
• The wonderful Fira font family, to set you apart from the masses
• An awesome pullquote style (just add the .pull class to a blockquote
• Better horozontal rules
• Drop-capitals, and small capitals for the first line

Screenshots

Download

If you like what you see, you can get mnml on your Ghost blog.

Download .zip

or use git:

git clone https://github.com/omphalosskeptic/mnml-ghost-theme.git

You're live! Nice. We've put together a little post to introduce you to the Ghost editor and get you started. You can manage your content by signing in to the admin area at <your blog URL>/ghost/. When you arrive, you can select this post from a list on the left and see a preview of it on the right. Click the little pencil icon at the top of the preview to edit this post and read the next section!

Getting Started

Ghost uses something called Markdown for writing. Essentially, it's a shorthand way to manage your post formatting as you write!

Writing in Markdown is really easy. In the left hand panel of Ghost, you simply write as you normally would. Where appropriate, you can use shortcuts to style your content. For example, a list:

• Item number one
• Item number two
  • A nested item
• A final item

or with numbers!

1. Remember to buy some milk
2. Drink the milk
3. Tweet that I remembered to buy the milk, and drank it

Links

Want to link to a source? No problem. If you paste in url, like http://ghost.org - it'll automatically be linked up. But if you want to customise your anchor text, you can do that too! Here's a link to the Ghost website. Neat.

What about Images?

Images work too! Already know the URL of the image you want to include in your article? Simply paste it in like this to make it show up:

Not sure which image you want to use yet? That's ok too. Leave yourself a descriptive placeholder and keep writing. Come back later and drag and drop the image in to upload:

Quoting

Sometimes a link isn't enough, you want to quote someone on what they've said. It was probably very wisdomous. Is wisdomous a word? Find out in a future release when we introduce spellcheck! For now - it's definitely a word.

Wisdomous - it's definitely a word.

Working with Code

Got a streak of geek? We've got you covered there, too. You can write inline <code> blocks really easily with back ticks. Want to show off something more comprehensive? 4 spaces of indentation gets you there.

.awesome-thing {
    display: block;
    width: 100%;
}

Ready for a Break?

Throw 3 or more dashes down on any new line and you've got yourself a fancy new divider. Aw yeah.

Advanced Usage

There's one fantastic secret about Markdown. If you want, you can write plain old HTML and it'll still work! Very flexible.

That should be enough to get you started. Have fun - and let us know what you think :)