Skip to content

Instantly share code, notes, and snippets.

@dkam

dkam/markdown.rb

Created October 11, 2015 09:08
Show Gist options
  • Save dkam/513e6f583bb1d35d851d to your computer and use it in GitHub Desktop.
Save dkam/513e6f583bb1d35d851d to your computer and use it in GitHub Desktop.
Download ZIP
Markdown previewer with Sinatra, Redcarpet and Rouge
Raw
markdown.rb
#!/usr/bin/env ruby
# Originally from: https://coderwall.com/p/ftn1la/markdown-preview-using-ruby-and-sinatra-simple-script
# gem install sinatra redcarpet rouge --no-document
require 'sinatra'
require 'redcarpet'
require 'rouge'
require 'rouge/plugins/redcarpet'
set :port, 3001
get '/' do
#css = Rouge::Themes::Base16.render(:scope => '.highlight')
#css = Rouge::Themes::Colorful.render(:scope => '.highlight')
css = Rouge::Themes::Github.render(:scope => '.highlight')
#css = Rouge::Themes::Molokai.render(:scope => '.highlight')
#css = Rouge::Themes::Monokai.render(:scope => '.highlight')
#css = Rouge::Themes::MonokaiSublime.render(:scope => '.highlight')
#css = Rouge::Themes::ThankfulEyes.render(:scope => '.highlight')
<<-EOT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Markdown tester</title>
<style>
#{ css }
</style>
</head>
<body>
<textarea id="markdown" style="width:100%;height:300px;"></textarea>
<div id="preview" ></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$('#markdown').keyup(function(){
$.post('/preview', {md:$('#markdown').val()}, function(response){
$('#preview').html(response);
});
});
</script>
</body>
</html>
EOT
end
post '/preview' do
parser_options = {
autolink: true,
tables: true,
fenced_code_blocks: true,
disable_indented_code_blocks: true,
underline: true
}
class HTML < Redcarpet::Render::HTML
include Rouge::Plugins::Redcarpet
end
markdown = Redcarpet::Markdown.new(HTML, parser_options)
markdown.render(params['md'])
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment