Skip to content

Instantly share code, notes, and snippets.

@sugyan

sugyan/preview.psgi

Created Jul 20, 2011
Embed
What would you like to do?
realtime preview for markdown / xatena / pod
#!/usr/bin/env plackup
use strict;
use warnings;
use Amon2::Lite;
use Encode 'encode_utf8';
use Text::Markdown 'markdown';
use Text::Xatena;
use Pod::Simple::XHTML;
my $converters = {
markdown => sub {
my $text = shift;
return markdown($text);
},
xatena => sub {
my $text = shift;
return Text::Xatena->new->format($text);
},
pod => sub {
my $text = shift;
my $parser = Pod::Simple::XHTML->new;
$parser->html_header('');
$parser->html_footer('');
$parser->output_string(\my $html);
$parser->parse_string_document($text);
return $html;
},
};
get '/' => sub {
my ($c) = @_;
return $c->render('index.tt');
};
post '/preview' => sub {
my ($c) = @_;
my $converter = $converters->{$c->req->param('format')};
my $html = $converter ? $converter->($c->req->param('text')) : '';
return $c->create_response(200, ['Content-Type' => 'text/plain'], [encode_utf8($html)]);
};
__PACKAGE__->to_app;
__DATA__
@@ index.tt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
</style>
</head>
<style>
body {
background-color: lightgray;
margin: 10px;
}
textarea {
width: 100%;
height: 100px;
}
div#preview {
background-color: white;
padding: 5px;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.6.2");</script>
<script type="text/javascript">
$(function () {
var preview = $('#preview');
preview.css({
height: $(window).height() - preview.offset().top - 20,
overflow: 'auto'
});
$('textarea').focus().keyup(function () {
var text = $(this).val();
var format = $('input:radio[name=format]:checked').val();
$.ajax({
url: '/preview',
type: 'POST',
data: {
text: text,
format: format
},
success: function (result) {
preview.html(result);
}
});
});
});
</script>
<body>
<input type="radio" name="format" id="radio1" value="markdown" checked="checked"><label for="radio1">Markdown</label>
<input type="radio" name="format" id="radio2" value="xatena"><label for="radio2">はてな記法</label>
<input type="radio" name="format" id="radio3" value="pod"><label for="radio3">Pod</label>
<textarea></textarea>
<hr>
<div id="preview"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.