use Mojolicious::Lite;
use Text::Markdown qw/markdown/;
get '/' => sub {
my $self = shift;
$self->render('index');
};
get '/markdown' => sub {
my $self = shift;
my $text = $self->param('q') || '';
my $html = markdown($text);
$self->render(text => $html);
};
app->start;
__DATA__
@@ markdown.js
$(function () {
$('#markdown').focus().keyup(function () {
var text = $(this).val();
$.ajax({
url: '/markdown',
data: {q: text},
success: function (html) {
$('#preview').html(html);
}
});
});
});
@@ markdown.css
textarea {
width: 100%;
height: 250px;
}
#preview {
color: #333;
}
@@ index.html.ep
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>markdown.pl</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="markdown.js"></script>
<link rel="stylesheet" type="text/css" href="markdown.css" />
</head>
<body>
<textarea id="markdown"></textarea>
<div id="preview"></div>
</body>
</html>