Postach.io is a great blogging platform - it’s as easy to use as Evernote. However, as any person that uses Evernote to store inline code snippets will probably know - the support is non-existent. This means that postach.io inherently doesn’t support it either, well... sort of.

If you are writing articles that need to display code snippets you really have three choices at the moment:

  1. Format a block of code with a fixed-width font. This is very simple and may work for some people. However, if you writing an article with a lot of code samples you want the code colouring.
  2. Embedding Gists or Codepens. Now we get all the pretty colours and formatting. Unfortunately this also means that we cannot see the code in Evernote so proof reading is almost impossible which is the main feature of postach.io and minor changes to inline code is a real pain.
  3. Format the code externally with a tool like http://hilite.me and copy and paste it into Evernote. This is extremely painful - especially since it will also silently ruin your line endings so you won’t be able to copy the text back out of the Evernote document.

For me, none of these solutions were good enough. Turns out it's really easy to have my cake and eat it too with a bit of Javascript, CSS and postach.io’s editable themes.

Note: You will need to have a paid account to be able to edit your own themes.

What Does It Look Like?

def powers_of_two(n):
return [2 ** x for x in range(0, n + 1)]

Here is a full example of an article: https://elliot.land/post/working-with-json-in-go

What you see above is based on the colour scheme I have chosen. I'll explain later how to choose your own.

How Does It Work?

This solution uses highlight.js to turn any block quote into a code block. It will automatically recognise the language and apply the correct formatting. Easy!

A block quote in Evernote is text that has been indented. On Mac you will find it on the Format > Text > Increase Indent Level menu item or with the SHIFT+CMD+] keystroke. I’m sure Windows has an equivalent.

You will not see the code coloring in Evernote - it is only rendered on the web. You can leave the font as is, or if you want it to look neater you can change it to a fixed width font. Any formatting in the block quote will be removed when it formats it on your blog.

How Do I Set It Up?

You will need to enter the Source Code of your template and add the following code to the head tag:


Note: HTML entities are not escaped with postach.io, so to prevent it trying to run the code above I’ve had to put the code in a Gist in this case.

Choose Your Colour Scheme

In the first line above the link tag includes a file called github-gist.min.css. You can see a list of the available colour schemes here: https://cdnjs.com/libraries/highlight.js/

Selecting one is easy with their picker: https://highlightjs.org/static/demo/

Bonus Points

It’s also useful to put code snippets and other keywords inline by using a fixed-width font. It looks OK, but I would prefer it to stand out even more. Here is a bit of extra CSS that will do just that:

font[face='Courier New'] {
background: #f8f8f8;
border: 1px solid #DDDBCC;
padding: 3px;
font-size: 12pt;
}

It looks like this.


comments powered by Disqus