A Lesson In Markdown Footnotes, Code Blocks, and Other Tricks

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.

Related:

*ATP: Accidental Tech Podcast

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

*[H/T]: Hat-Tip


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

  2. Really easy, seriously.  ↩

  3. And this is the footnote.  ↩

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

  5. Accidental Tech Podcast, a podcast.  ↩

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

How To Work Around Tumblr's Blurry Image Embeds In Text Posts

Tumblr Blurry Images

When building this website from hand, I worked through a bunch of CSS methods I’d not used before. I was able to create blocks and set widths, padding, and margins with general ease. In the end, my test posts looked great and I was happy.

Then, after publishing my review of news app Nuzzel for iOS, I notice that the images I was embedding in my text posts were coming out blurry. The text in the image gave it away.

After double checking my original image on my hard disk and uploading the image in several formats to test the results, I found myself with a bug. One that I thought was a result of my limited CSS knowledge.

Turns out, It’s a Tumblr thing. According to the official Tumblr theme building documentation, the recommended image size is 500px. That’s how images are displayed in the dashboard, so that’s how big their servers are going to process them. Good for the dash, bad for your post. 

There is an obvious solution. You can upload your images to a CDN or other host like Flickr, Imgur, or Photobucket, but the problem you’ll run into there is a grey box in your dashboard where the image should display. Basically, if it’s not a tumblr hosted image, it’s not going to look great everywhere.

So, I’ve found a work-around. Using this method, you can upload an image to tumblr and use a higher resolution at any size your theme supports. We do this through the photo post option. This uploads your photo at a higher resolution (1280px) than the “upload photo” button in your text and link post toolbars. 

Here is the process. First, click to add a photo post from your dashboard. Upload your photo. Then, select “Post privately” from the post button dropdown menu. Then post. 

Next, click the image on your dash so that the full image appears in a lightbox pop-up. The background should turn dark to highlight your image. Right click on the image and select “copy image address” from your menu. Exit the viewer and open the post you wish to use the photo in. 

In the “<html>” view, insert an image embed code like this:

<img src="https://38.media.tumblr.com/9f9ac18d35787272592edad1aa1e9a9c/tumblr_nhscw50he91skvixuo1_1280.png">

Replace the URL above with the link you just copied from the privately uploaded photo.

Preview your post now. The image should appear clearer than before. You can delete the private post at this time. The image will continue to work within your post, pulled from Tumblr’s servers.

Using this method, you will have full, crisp images on both your blog’s pages and in the Tumblr dashboard.

Using the “upload photo” toolbar button:

low resolution Tumblr Image

Using my method:

Full resolution Tumblr image

It’s not perfect. I’m not using a retina screen and there is some data crunching going on server-side. But as you can see, there is a noticeable difference that should improve the way your blog posts appear to your readers.

I hope this helps anyone experiencing this problem. I also hope Tumblr provides some better solutions for text-based posts in the near future.

The Spotify Play Button

Spotify took off like wild fire in 2011. Once a service limited only to European users and coveted by music connoisseurs here in the states, Spotify has quickly become the newest and most exciting way the world consumes music.

It's current services (to free subscribers) include access to millions of songs, albums, and artists from all over the world. While certain labels have either refused or revoked access to their catalogs, most of the music a person could ask for is available to stream online, free of charge. Within the Spotify application, you can search for music, create and share playlists, and even access your local music library to add to the already massive collection you have access to.

These are the more straight-forward and simple actions available in the application. With the heightened integration with Facebook in the fall of 2011, you can now see exactly what your friends are listening to Spotify from Facebook or the right-hand pane on your Spotify browser.  Spotify has taken it's place as the current king in the new social-music world over similar services such as MOG, Rdio, and even Internet Radio services like Pandora.

In my own experience, Spotify has not only been a useful tool for personal listening, but for additional content for my website, Under the Gun Review, as well. Beginning in January of this year, we began weekly playlists of the music our staff has been listening to. Each of our staffers contribute 1 song from the Spotify catalog to a Sing Along With Staff collaborative playlist. For the first several months, I spent an hour or so each week putting together text playlists to indicate who had contributed what. At the end of each post was a link to the Spotify playlist that would open in their Spotify application. This worked as best as it could, but I always hoped for something to make the task a bit easier. My prayers were answered last month with the introduction of the Spotify Play Button.

The Play Button is essentially an embeddable playlist that can spice up a blog post or website entry with a few clicks and a good set of songs to fill it with. It works like this:

1. Make your playlist.

To do this, open Spotify and click 'New Playlist' on the left-hand pane of the Spotify window. Name your playlist and you're on your way.

2. Copy the URL and paste it into the Play Button generator.

First, right click the playlist you just made and click 'Copy Spotify URL' NOT the HTTP Link! Then, you can open the developer homepage for the Play Button here to generate the button. Wordpress site owners now have the option to use plugins that will automatically create the playlist for you just by pasting the Spotify URL in the post.

UPDATE: you can now right click on the Playlist and copy the embed code. You will only get a miniature player, however. For more options, please follow the tutorial.

3. Embed your player

Take a few minutes to toy around with the various options available to customize your player. You have the option to choose a lightly colored player window or a dark one. You can highlight the track(s) artwork or simply display the song title and artist. It's up to you.

4. Share the page with friends.

Below I have inserted an example of the player with a few songs I've been listening to lately. I've opened it up for collaboration, so I invite you to add a song or two of your own!