Sublime Forum

Markdown Preview

#1

I hacked a Markdown Build System that does a pretty barebones Markdown-to-HTML preview. It depends on RVM and Ruby and the rdiscount gem.

Since we don’t apparently have access to real environment environment variables in config files, I had to hardcode my paths. Here’s the code if anyone wants to play around:

Markdown.build-system

{
  "cmd": "/Users/alex/.rvm/bin/rvm-exec ~/bin/mdpreview $file"],
  "file_regex": "^(...*?):([0-9]*):?([0-9]*)",
  "selector": "source.markdown",
  "shell": true
}

~/bin/mdpreview:

#!/usr/bin/env ruby

begin
  require 'rdiscount'
rescue LoadError
  `gem install rdiscount`
  require 'rdiscount'
end

rdiscount="/Users/alex/.rvm/gems/ruby-1.9.2-p290/bin/rdiscount"

input = ARGV[0]
input_dir = File.dirname input

require 'rdiscount'
markdown = RDiscount.new(File.read(input))
html = markdown.to_html

page = <<HTML
<head>
<style>
body {
  font-family: georgia, arial, helvetica;
  padding: 1em;
}
p {
  max-width: 40em;
}
h1 {
  background-color: #f1f1fd;
  border-bottom: 1px solid blue;
  padding: .25em 1em;
  margin: 1em -1em .25em;
}
</style>
</head>
<body>
  #{html}
HTML

html_file = File.basename(input).gsub(/\.md$/, '.html')
output = "#{input_dir}/#{html_file}"

File.open(output, "w") do |f|
  f.write(page)
end
cmd = "open #{output}"
puts `#{cmd}`

Usage:

  • select Tools>Build System>Markdown
  • hit cmd-B

Problems:

  • Uses Ruby, not Python which would be more ST2ish
  • Uses RVM; doesn’t work with system ruby if you’d need sudo to install gems
  • May only work with Ruby 1.9.2
  • Hardcoded paths galore
  • I wasn’t sure where to put the executable file, so I put it in ~/bin
  • HTML preview opens in a new browser tab every time
  • only works on MacOS, though someone on Linux could probably find an equivalent to “open”
  • don’t know how to get it to automatically recognize markdown files (“selector: source.markdown” doesn’t do it)
  • (over)writes foo.html in same dir as foo.md (bug or feature?)
0 Likes

Sublime for straight prose?
Plugin Development
#2

Hi - thanks for this, but I think the scope selector should be: text.html.markdown

This works better for me anyhow - it means you can leave the build system on automatic, and the filetypes of .md, .mdown, .markdown etc all get picked up automatically.

0 Likes

#3

Hi!
Thanks for the post.
Based on it and a python library markdown2, ST2ize your solution :smile:
Here’s my build-system definition:

{ "cmd": "python ~/Library/Python/2.7/bin/markdown2 $file"], "selector": "text.html.markdown", "shell": true }

0 Likes

#4

I would love to see this implemented into the program. I would probably convert to using Sublime as my primary text editor.

0 Likes

#5

New to ST2, I wonder how I can actually see the markdown preview.
I created the mentioned Markdown.build-system, installed markdown2 python script, set Build Type to auto and Hit Cmd-B with a md-file open.

At the bottom of ST2 I see the html output being produced and printed, but that’s far away from a preview.
What am I doing wrong?

0 Likes

#6

If you are using windows, try this: http://www.sublimetext.com/forum/viewtopic.php?f=5&t=6208

0 Likes

#7

Is it already known that, for mac users, you can have ST2 build the mmd document to Marked.app? (support.markedapp.com/kb/how-to- … nd-bundles).

Once you’ve opened it in Marked, it will refresh every time you save (i.e., assuming you’ve set “save on loss of focus” to true, every time you switch windows).

Or perhaps I don’t quite understand the gist here…

0 Likes

#8

[quote=“abathologist”]Is it already known that, for mac users, you can have ST2 build the mmd document to Marked.app? (support.markedapp.com/kb/how-to- … nd-bundles).

Once you’ve opened it in Marked, it will refresh every time you save (i.e., assuming you’ve set “save on loss of focus” to true, every time you switch windows).

Or perhaps I don’t quite understand the gist here…[/quote]

I think the gist is that if you are not using Mac, this won’t work. :smile:

But for mac users, yes that’s the best solution.

0 Likes