Adding Class Names to Links in Markdown

Markdown is a wonderful format for a lot of authoring. It is a nice hybridization of old-school text file style authorship with an understanding of the necessity of translating that format for HTML viewing. Unfortunately there is always going to be a little push-and-pull between Markdown retaining its non-HTML, basic text format and adding to Markdown ways to hint as to an expected HTML output. For example you can add what look a lot like url links:

[Here is some link text](http://www.google.com "A link to google")

turns into: Here is some link text. Notice the "title" tag has snuck into Markdown as an extra attribute to the url. So you think it would be easy to add a class name ("highlight") to the Markdown: text [Here is some link text](http://www.google.com "A link to google").highlight But, no, that is over a line that standard Markdown does not cross. In short: you cannot add class names to Markdown text. Most of the time you are looking to add class names to eventual HTML output it is for the case of styling. Fortunately there are ways to add unique markup to an element without requiring a class name.

Alternative CSS Styling in Markdown

Of course you can just embed the HTML directly and make the link an actual A tag with a class. I tend to want to stay true to the Markdown and try more subtle alternatives.

As CSS has matured it has give us much more than class names to select elements for styling. Even in browsers where CSS selectors are less modern you are able to leverage the power of CSS selectors via javascript support libraries (like JQuery).

You are able to use CSS to select links based on attributes and Markdown gives is the ability to define two attributes the href and the title. The w3c page on attribute selectors is a handy reference to the powerful modern selectors.

For example, if you wanted to highlight just one specific link (the above link to Google) and it is because of the url, you can use the url as the basis of the CSS selection: css a[title="http://www.google.com"]{ background-color: yellow; }

The matches do not have to be exact, there are CSS selectors for looser matching as well.

If you are targeting an older browser you can use a short JQuery snippit to search through link attributes and have Javascript add the class names after-the-fact, they will still respond to CSS styling: javascript $('a[title="http://www.google.com"]').addClassName('highlight'); Then you can use your highlight class in a standard manner: css a.highlight{ background-color: yellow; }

If your styling needs are really specific and may apply to multiple links you can always get a little creative with the title tag and some loose matching: text [Here is some link text](http://www.google.com "A link to google") [Here is some link text](http://www.github.com "A link to github") [Here is some link text](http://www.google.com "Another link to google")

You can loosely match the title text with the CSS: css a[title~='google']{ background-color: yellow; }

Again, these CSS selectors also work in JQuery if you would rather use Javascript to add a formal class name to each link.