Align Markdown images with help from TextExpander


One slightly annoying thing about using Markdown is that it doesn’t give you any way to specify the alignment of an image. There’s quite an easy way to work around this, however.

I started off doing this by using CSS to align images based on what the alt text of the image was. So for a markdown image link like this:

<code>![right](http://sidoneill.com/51d/public_html/sonimg/Screen%20Shot%202013-06-04%20at%204.13.18%20PM.png)
</code>

The corresponding CSS was

<code>img alt="right" {  
float:right;  
margin-left:20px;  
}
</code>

This works great, except that the alt text becomes useless (and shows up under pictures in RSS readers.) So I switched to surrounding markdown images with a span tag. This means your markdown is a little uglier, but the end result is better. Here’s how it works:

The Markdown

Each image is surrounded by a span, the class of which is imgleft, imgright or imgcenter.

<code><span class="imgcenter">![](http://sidoneill.com/51d/public_html/sonimg/Screen%20Shot%202013-06-04%20at%204.13.18%20PM.png)</span>
</code>

I then style these using the following CSS:

The CSS

.imgright {  
 float:right;  
 margin-left:20px;  
 }

.imgleft {  
 float:left;  
margin-right:20px;  
 }

.imgcenter {  
width:100%!important;  
display:block!important;  
text-align:center;  
}

The TextExpander snippet

This would be a little wearying without TextExpander so I created this snippet to help me quickly insert images into a post once I’ve copied their URL to the clipboard.

<code><span class="%fillpopup:name=Alignment:default=imgcenter:imgleft:imgright%">![](%clipboard)</span>
</code>

You can import this snippet and some other helpful ones if you subscribe to my TextExpander Writing snippets.