Tutorial Details
- Plugin: Markdown to HTML
- Screencast Length: 7 Minutes
We’re cheating a bit in this episode. Rather than installing an actual plugin, we’ll be using a couple tools to allow us to write and convert Markdown to HTML. It’s really a simple process, and can save great deals of time.
Usage
First, we need to download Markdown and place it within our runtime folder. On the Mac, you can drag the Markdown.pl file into your usr/local/bin/ folder. And that’s it; you’re all set! Next, to trigger the markdown-to-html conversion, we need to provide two parameters: the path to the Markdown.pl file, and the command itself.
Within Vim, the following should do the trick:
:%! /usr/local/bin/Markdown.pl --html4tags
This instructs the Markdown.pl file to run on the curent page. But, that’s a little too much typing; let’s instead save this to our .vimrc file, and assign it to a shortcut.
".vimrc file "Markdown to HTML nmapmd :%!/usr/local/bin/Markdown.pl --html4tags
With this line of code, whenever we type – by default – backslash + md, that command will run, thus converting our markdown to clean HTML.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I don’t get the point. If I still have to type in, and learn, obscure markup like this:
Header 1
=======
To signify the tag, wouldn’t my time be better spent just learning HTML?
Sounds like going east to get west to me.
Though I haven’t tried it, just sayin’
Huck
It’s not a matter of not learning HTML. But it’s a quicker to write Markdown, when the option is available.
P.S. To create a H1 tag, it’s quicker to do
# My Heading 1Markdown and many other markups of this type are not mean to replace HTML. Also, you should read beyond just the first basic syntax page of Markdown before forming your opinion on it. If you’d read further you would know that that format ### Header 3 works for H1-H6 as well.
Anyway, the series is named “Vim Essential Plugin” so I kind of hoped this was a pure Vimscript Markdown to HTML plugin. Since I’m on Windows and can’t run Perl natively.
Over the weekend, I re-installed Vim and started using Tim Pope’s Pathogen to manage my plugins/scripts. It made my
$VIMRUNTIMEmuch cleaner and more organized. Now, if I want to remove a plugin, I only have to delete a folder rather than remove the plugin one file at a time.I think you’d really like it, Jeffery.
Definitely. We’re covering it in a future episode in this session.
Is this for MAC only or It works with Windows too ?
It’ll work for both.
I never realized this until now: StackOverflow uses ‘Markdown to HTML’ for formatting posts. I’ve been learning Markdown syntax for a year now and I haven’t even realized it XD. This plugin will definitely be added to my vim workflow.
I have never realised the sparkey boy plugin because i always liked that about notepad ++ and never got that feature back until now! Thanks chap
You should cover the UltiSnip plugin as well for Vim, I think it’s way better than Snipmate.
*UltiSnips (typo)
Thanks – will check it out.
Jeffrey,
If you installed the script in /usr/local/bin/, you don’t need to write the complete path in the shell. This directory should be included in your PATH.
If you want to confirm that, type echo $PATH in the terminal — the paths are separated with colons. One of them should be /usr/local/bin/. It can be hard to read the list, so a bit of piping may be a good idea: echo $PATH | tr ‘:’ ‘\n’
Personally, I’d install it in another place. Mine is under /opt/ (looks like it fits better here). Anyway, leave it there. You can just rename it to
markdownsimply, to get a more “Unix utility” feel. And while you are in the terminal, add a line to your.profile(or.bash_profileor whatever configuration file you use) saying alias md=markdown, unless you use themdutility (is there someone who uses it? :P ).Nice, I’ve lost all the <pre> formatting. Here are the fixes:
01| /usr/local/bin/02| PATH03| echo $PATH04| /usr/local/bin/05| echo $PATH | tr ':' '\n'06| /opt/09| alias md=markdownNow I know everything should be included in <code> (like I did in some of them), and not <pre> as the footer says.
Far better / easier to set up a surround plugin or set up short cuts like ,jsr to spit out SCRIPT tags with a doc ready and place you into insert mode. or type and have the closing tag appear around you.
Good tutorial, but I don’t find it practical
This is one of those times that I want to make the switch to MacOS. Everything just works right off the bat.
..or for example Ubuntu Linux. “Just works” :)
I shiver when I look back to my times developing on Windows, with all the problems. And when getting into an error, not getting a proper error message etc. :)
I think the Blog software messed up the .vimrc code snippet. I use to write my Blog Posts in Plain HTML this will be very useful!
It would be nice to have this kind of thing for LaTex.
You should check the Markdown syntax page … http://daringfireball.net/projects/markdown/syntax
I don’t know if some of you are using GNU/Linux but basically you have a package that allow you to run a command like this one (I havent tested it on a Macbook since I have a Debian GNU/Linux on it) :
$ markdown file.mkd > file.html
I’m using mardown and vim since a while and it saves you a lot of time :)
On top of that, some CMS like Drupal have plugin to handle mardown syntax too …
Great tutorial, thanks.
I have also added the following to my ~/vimrc file:
“Select using visual first, then \mm will convert the selected markdown to html
vmap mm :!/usr/local/bin/Markdown.pl –html4tags
If you want to preview your Markdown in real-time from vim, check out this plugin: https://github.com/suan/vim-instant-markdown
(Disclaimer: I’m the author =) )