Styling Links and Images in Markdown

The Markdown syntax is great for those with no HTML technical experience to create online content. However one drawback is that without a WYSIWYG Markdown enabled editor it isn't easy to style a link or image, or other HTML code.

But it can be done with a little JQuery, which is what I've used for this blog I developed for myself using the Laravel framework.

Styling the A tag with JQuery

I place the content inside a DIV with an ID #blog-post allowing me to target only those A tags inside this DIV. Here is the JQuery, below.

$("#blog-post").find("a").each(function() { $(this).addClass("markdown").attr("target", "_blank"); });

This piece of Javascript finds each A tag and add a CSS class to it. Now I can differentiate links in the content quite easily because for my needs I didn't want to use a full blown WYSIWYG editor. Not yet anyway!

I also wanted the links to open in a new window, and that is made possible by adding the TARGET attribute.

Styling the IMG tag with JQuery

This is simply a copy of the above JQuery script with a slight change, and that's awesome. If there are any other tags to style in the future then that can be done quickly with minimal disruption.

$("#blog-post").find("img").each(function() { $(this).addClass("markdown"); });

And that's it. I style the IMG tags because I want images in the content to span the full width. Those dynamics can't be specified in the Markdown syntax, but they can now be specified using JQuery and CSS.