Adam Laiacano

Tips for making a technical blog on tumblr

Technical blogs have a few special formatting requirements (code samples, equations, and graphs/figures), and anyone making a technical blog probably hates using WYSIWYG/rich text editors. Here are a few tips that will hopefully be useful. If you have any questions or better suggestions, hit up the comments section.

Default Post Editor

First of all, you can change the default editor mode in your account settings (the cog image in the top right of your dashboard).

I personally hate Markdown (experiment: see how many people google HTML-to-markdown formatting help vs. markdown-to-HTML formatting help), but I can definitely see how it’s preferred to a rich text editor.

Including Code Examples

There are a couple ways of doing this: the easiest is to use the <code> and <pre> tags in HTML mode (or backtick in Markdown mode). That should produce something like this:

labels <- c( rep("a", 100*rexp(1)), rep("b", 100*rexp(1)), rep("c", 100*rexp(1)), rep("d", 100*rexp(1))) x <- data.frame(labels = factor(labels), some.value = runif(length(labels))) qplot(labels, data=x)

You can also embed a much prettier Github Gist. Just create a public Gist, copy the embed code and then put it in your tumblr post (paste it in using the HTML mode).

There are some pros and cons to using Gists: The pros are that it obviously looks much better on your blog (syntax highlighting, etc), the cons are that it won’t appear in the rich text editor or in your post preview, but it will be there once you create your post. The Gist will also show up as a grey box in the dashboard.

I personally suggest using the <pre><code> tags for very short examples and Gists for longer ones.

Images

Including images isn’t anything specific to technical blogs, but I want to point out that it’s a good idea in general to add photos using the “+ Upload photo” uploader instead of linking to remote images.  It won’t make a difference when viewing your blog, but remote images (on flickr, your personal website, etc) will show up as grey polaroid thumbnails in the Dashboard. This is because tumblr doesn’t know how big those remote images are, and if your Dashboard is full of 2MB high-resolution images, it would take forever to load.

LaTeX Equations

First of all, don’t search the “latex” tag on tumblr if you expect to find any tips about typesetting. That said, there isn’t an easy way to display equations on tumblr. Your best bet right now seems to be using a LaTeX generating API such as the Google Chart API. Inserting an image with the URL:

http://chart.apis.google.com/chart?cht=tx&chl=\frac{sin(x)}{x}

will embed the following image. If you want it to appear in the Dashboard, you’ll have to save/upload the image. I also have no idea if there is a rate limit on that API.

Hopefully these tips will help some people out. As I said above, if you have better ways of doing any of these, be sure to let me know.

Pie Charts & Word Clouds

Pie charts and word clouds have no place on technical blogs.

UPDATE

For LaTeX equations, use MathJax. Just include this line in your tumblr theme:

<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

Now you can insert LaTeX with a backslash and paren opening and closing:

\(\frac{sin(x)}{x}\)