Jacob Tender

I’ve been making tweaks to my blog for a few weeks now. Nothing you’d probably notice at a first glance, just cleaning up code and budging things into place. I’ve been doing this as I code some other blogs for friends and family, learning while I go.

One thing I’ve been meaning to try out, however is footnoting. Casey Liss points out the obvious in ATP Episode 100.

“All the cool kids use Markdown footnotes and I want to be a cool kid.”

True, Casey, true. I too want to be cool and make snarky footnotes in my blog entries. So now I am. I was aware that you could turn on and use Markdown as your primary editor on Tumblr, but I did not know that footnotes came in the packaging. [1] Turns out, it’s really easy to do. [2]

We start with the Markdown. If you’re not familiar with Markdown, please read John Gruber’s Markdown Syntax Documentation before going any further here. If you’re hip, write out the following:

This is a sentence with a footnote. [^3]

Cool, now at the bottom of your post, write this:

[^3]: And this is the footnote.

As you can see here and after previewing your post, a number appears in superscript [3] within the text body and the corresponding footnote appears at the bottom of your text.

Now you’ve learned Markdown footnotes. You can use them just like everyone else.

Code Blocks:

Those code blocks I was using above, you can do those in Markdown too. Simply tab in once or hit space 4 times and paste the code you want displayed as code. When previewed, it will render differently than your paragraph text, but not quite like mine. I did some additional CSS tweaks to make it look pretty.

Since Markdown renders in HTML, when you type the following as instructed:

html { 
        background: black; 
}

This is what actually gets rendered in HTML:

<pre><code>html { 
        background: black; 
}</pre></code>

To style this in CSS, I used the following:

pre {
        padding: 10px 18px 10px;
        background: ######;
/* These lines are so your layout doesn't mess up */
        white-space: pre-wrap;       /* css-3 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
code {
        color: ######;
        background: ######;
        padding: 0px 2px 0px;
}

This makes the bigger block look more attractive and set apart from your paragraph text and stylizes snippets you use within sentences like this. [4] Insert your own hex codes for color where needed.

Abbreviations:

There is one more trick I learned this evening while figuring out the footnotes option. That trick is abbreviations, which is super handy for the lazy, tech savvy folks with audiences that don’t understand everything they’re saying. I used this early in this very article to explain what ATP is for those who aren’t Apple loving regular podcast listeners. [5]

In your references at the end of your article, [6] type an asterisk followed by your abbreviation within brackets. In this article, I used:

*[ATP]: Accidental Tech Podcast

*[Apple]: A very rich tech giant who probably has at least one device in your home.

Again, really easy stuff with some impressive output.

Try some of this out for yourself. A few tricks like these in your back pocket will take your blog to the next level of organization, impressing your readers.

*ATP: Accidental Tech Podcast

*[Apple]: A very rich tech giant who probably has at least one device in your home.

*[H/T]: Hat-Tip

H/T to Matthew Colwell for the heads up. ↩

Really easy, seriously. ↩

And this is the footnote. ↩

Made by using backtick quotes like these (`). ↩

Accidental Tech Podcast, a podcast. ↩

Down here, where you put these and your links. ↩