Hello World

September 4th 2016

Hello world. This blog is server side rendered using Vue 2. More on that in another post.

The rest of this post will serve as an example of markdown rendering.


This is what italics, bold, inline code, and links look like.


Code highlighting using highlight.js:

console.log('Hello world')

Due to the way I pass a custom code renderer to marked, syntax colours can be easily swapped by requiring different themes.

const marked = require('marked')
const hljs = require('highlight.js')

const mdRenderer = new marked.Renderer()
mdRenderer.code = (code, lang) => {
  if (lang) {
    code = hljs.highlight(lang, code).value
  }

  return `<pre><code class="hljs lang-${lang}">${code}</code></pre>`
}

marked.setOptions({ renderer: mdRenderer })
@import "~highlight.js/styles/solarized-light.css";

Math rendering is provided via KaTeX\KaTeX (KaTeX) and parse-katex. All rendering can be ran server-side and the client only needs to include the css and fonts. It is ran over the text in render methods in the marked renderer. For example:

mdRenderer.listitem = (text) => `<li>${parseKatex.render(text)}</li>\n`

By omitting the KaTeX parser from code sections, you do not need to worry about escaping $ in code blocks. Which is fortunate, because otherwise bash scripts would be a nightmare:

export NODE_PATH="/usr/local/node/bin"
export PATH="$PATH:$NODE_PATH"

Inline math done using $ to surround content; for $n$ in $\mathbb{N}$ \rightarrow for nn in N\mathbb{N}.

  • math looks so nnice

Display mode math done using $$ to surround content:

0x3 \int_0^\infty x^3


Unordered list:

  • arbitrary item
    • nested
      • double nested
  • another arbitrary item

Ordered list:

  1. pseudo non-arbitrary ordered item
    1. nested
      1. double nested
  2. another pseudo non-arbitrary ordered item

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Table:

x y
0 5
1 10
2 15

Images are wrapped within a <figure> and use a caption if title is provided.

mdRenderer.image = function(href, title, text) {
  const id = Math.floor(Math.random() * 10000)

  const out = `
  <figure id="img-wrapper-${id}" class="img-wrapper">
    <img id="img-${id}" class="post-image" src="${href}" alt="${text}" @click="imageClick" ${title ? `title="${title}"` : ''}>
    ${title ? `<figcaption id="img-caption-${id}">${title}</figcaption>`: ''}
  </figure>
  `.trim()

  return out
}

Template Literals: Poor Man's JSX ™

Note the @click="imageClick". This is a Vue binding. In the post component updated lifecycle method, a mini app is initialised if we are in the client. This little app uses the post content as its template. Since imageClick is provided in the methods property, we can easily hook into the click event.

updated() {
  if (window) {
    const postApp = new window.StandaloneVue({
      el: `#${this.post.slug}`,
      methods: {
        imageClick: function({ target }) {
          // handle image click
        }
      }
    })
  }
}

As well, you can use arrow keys to move between images.

![alt text](/static/nodes_4000_theta_4.png "4000 Nodes")

alt text
4000 Nodes

![Digital Ocean Toronto](/static/do-toronto.png)

Digital Ocean Toronto


Quote:

The only difference between a drug and a computer is that one is slightly too large to swallow. ... And our best people are working on that problem, even as we speak.

-Terence McKenna

And there have been <hr>s throughout.