s4553711
6/21/2014 - 2:51 PM

markdown.pl

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>