It's an illusion, Michael (Markdown add-ons) in Tips and Tricks

OK, haven’t had any entry formatting complaints, so I’m assuming all is well. So I’ll quickly mention a few new things that got added into the mix. I will try to order these from simple to advanced, so feel free to stop reading once I start saying things that do not make any sense to you.

Wait… where did everyone go?

Maaaaan.

OK, so here’s the new magic mixed into the Markdown:

1. Smart quotes and punctuation.

   You may or may not have noticed that your straight quotes are getting converted into curly quotes. So 'this' now looks like ‘this’. And "these" look like “these”. It’s great for apostrophes too.

   The hardcore punctuation geeks will be happy to know that beyond the normal dash (-), -- gets converted to an n-dash (–), and --- gets converted to an m-dash (—). And three dots ... becomes a single horizontal ellipsis character…

   (For people who use HTML, this will have no effect inside of tags since that would cause mass chaos)

2. Footnotes

   I’ve mentioned this before, but it’s worth mentioning again. Inserting a footnote is done like this:

   Great Googly[^1] Moogly!
   [^1]: Not to be confused with the *Google*.
   

   Which gives you:

   Great Googly¹ Moogly!

   (footnote definitions show up at the end of the entry so that’s a good place to put the second line in my example, though I don’t think it’s strictly required)

3. Abbreviations

   This one is a lot like footnotes. Here’s an example:

   Sharks with frickin' LASER beams
   *[LASER]: Light Amplification by Stimulated Emission of Radiation
   

   Which gives you:

   Sharks with frickin’ LASER beams
   (hover over the underlined word and pause for effect)

4. Definition list

   Here’s what a definition list looks like in Markdown:

   Fedora
   :    a hat
   
   Beanie
   :    also a hat
   

   (that’s four spaces between the colon and the definition)
   And you get:

   Fedora

   a hat

   Beanie

   also a hat

5. Attribute lists

   And now we reach the part where I expect some heads to start spinning like in The Exorcist.

   This part lets you use combine your HTML skillz with Markdown to turn yourself into some sort of formatting CONSTRUCTICON². If you know anything about CSS selectors, you should feel right at home. It also helps to understand the difference between a block level element and an inline element.

   An attribute list follows an element and looks like this:

   {: .class-name #id }
   

   It’s basically a list of CSS selectors you want applied to the Markdown element above it (or adjacent, if it’s inline - but we’ll get to that).

   Example: you want to apply the text-center class to a paragraph without using HTML. You can do it like so:

   Center this paragraph
   {: .text-center }
   

   (I would demo this but centering things inside my numbered list won’t really work)

   Or, say you have a picture you want to display with a circular border. You could use an HTML image tag with the img-circle class, or do this:

   ![Flowers](https://farm4.staticflickr.com/3342/3499065885_16aa778da0_q.jpg){: .img-circle }
   

   Since images are an inline element (I warned you that this part is advanced), the attribute list actually goes on the same line as the Markdown, with no line break or white space (you can’t add a space between the closing parentheses and opening curly brace).

   And, voila:

   

   If you want to get really wild and crazy, here’s the documentation.