How to write citations with Markdown & retain links in your article’s references section

I use Markdown to write articles but it surprisingly does not support citations. Markdown simply removes all references after it creates hyperlinks in the output. Today, I was writing an article today with markdown and decided to find a solution.

I found that markdown references need not always be to an external URL – they could also be referring to intra-document anchors. So, I used an HTML-style anchor (prefixed with # character) in the markdown reference. Then, I placed an empty HTML SPAN tag before the citation with the anchor name set as the value of the tag’s ID attribute. This trick takes advantage of the fact that markdown ignores HTML tags and outputs them without processing. Here is the markdown.

By the [1920s][nbc], commercial radio networks run by the National Broadcasting Corporation (NBC) had become popular. Although the television was invented in the 1930s, it did not take off as factories and materials were diverted for war production. Thus, radio enjoyed two decades as the most popular medium for news and entertainment. It was known as the *[golden age of radio][golden_age]*. After World War II, TV displaced radio in popularity. Radio served a niche segment of people on their commute. In the age of the Internet,


[nbc]: #nbc
[golden_age]: #golden_age
  * <span id="nbc"></span>
  National Broadcasting Company history files - [](
  * <span id="golden_age"></span> 
  Golden Age of American radio - [](

In other words, markdown references link to SPAN tags instead of external URLs. The span tags are located in the citations. So, the links lead to the citations and the citations then lead to the external URLs.

The markdown references can be placed even outside the references section, as the former gets completely removed from the output. For readability, just add a newline after the SPAN tag.

HTML output with the citations still intact.

HTML output with the citations still intact.

This entry was posted in how to, software, technology and tagged . Bookmark the permalink.

Make a comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s