Markdown Here for Code Styling

Posted on

I really appreciate the way good text editors render nicely styled, syntax highlighted code. Not only is it visually attractive, it helps you easily pick out keywords quickly spot missing quotes or brackets. Unfortunately copying and pasting code somewhere else almost never preserves the highlighting, and even if it does, formatting adjustments are often still required. An example case is when sharing a code snippet with a colleague by email or Evernote. Whether I copy the formatted text from Sublime Text 2 or from Eclipse (PyDev plugin), when I paste it into the Gmail web interface to send to a friend, the text is all black and the font changes to a non-monospace one in Chrome and Firefox (Mac). Safari preserves the monospace font, and sometimes gets the font color right, but if you use a dark background in your text editor like I do, the font colors don’t look well in an message with a white background anyway. So how do you share beautifully formatted code with others? Markdown Here, a nifty plugin available for all major browsers. You can write your notes in a special formatting language called Markdown, and this plugin applies slick formatting with the press of a button. If you’re not familiar with it, Markdown makes it very easy to structure and format your document by easily creating headings, lists, tables, and more. For code blocks, Markdown Here lets you choose from 30+ syntax highlighting themes and even customize them with CSS. All you do is start the code block with three backticks and the name of the language, and end the block with three more backticks, as shown below. For html code, use “xml”:

screenshot 2014-04-07 at 19.53.42

A click on the Markdown Here button or a quick press of the customizable hotkey changes the above Markdown into this:

screenshot 2014-04-07 at 19.37.50

How cool is that?! The style of these snippets is Tomorrow Night Eighties, but you can see the other available themes and languages on this demo page for highlight.js. Being a plugin, Markdown Here can’t be used in Word or other applications, but it is usable in some other places on the web such as WordPress, Outlook Web App and Google Groups (full list). I needed an easy way to style the code I share through Evernote and Gmail, and I found Markdown Here to be a great solution. I’ve also used it for quick formatting of lists in email.

Do you have any other solutions for code styling? Other creative uses of Markdown or Markdown Here?

Leave a Reply

Your email address will not be published. All fields are required.