Skip to content

Instantly share code, notes, and snippets.

@akiym
Created April 2, 2011 08:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save akiym/899321 to your computer and use it in GitHub Desktop.
Save akiym/899321 to your computer and use it in GitHub Desktop.
preview in real-time.
use Mojolicious::Lite;
use Text::Markdown qw/markdown/;
get '/' => sub {
my $self = shift;
$self->render('index');
};
post '/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({
type: 'POST',
url: '/markdown',
data: {q: text},
success: function (html) {
$('#preview').html(html);
}
});
});
});
@@ markdown.css
#markdown {
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>
use Mojolicious::Lite;
use Pod::Simple::XHTML;
get '/' => 'index';
post '/pod' => sub {
my $self = shift;
my $text = $self->param('q') || '';
my $pod = Pod::Simple::XHTML->new();
$pod->html_header('');
$pod->html_footer('');
$pod->output_string(\my $html);
$pod->parse_string_document($text);
$self->render(text => $html);
};
app->start;
__DATA__
@@ pod.js
$(function () {
$('#pod').focus().keyup(function () {
var text = $(this).val();
$.ajax({
type: 'POST',
url: '/pod',
data: {q: text},
success: function (html) {
$('#preview').html(html);
}
});
});
});
@@ pod.css
#pod {
width: 100%;
height: 250px;
}
#preview {
color: #333;
}
@@ index.html.ep
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>pod.pl</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="pod.js"></script>
<link rel="stylesheet" type="text/css" href="pod.css" />
</head>
<body>
<textarea id="pod"></textarea>
<div id="preview"></div>
</body>
</html>
use Mojolicious::Lite;
use Text::Xatena;
get '/' => sub {
my $self = shift;
$self->render('index');
};
my $xatena = Text::Xatena->new();
post '/xatena' => sub {
my $self = shift;
my $text = $self->param('q');
my $html = $text ? $xatena->format($text) : '';
$self->render(text => $html);
};
app->start;
__DATA__
@@ xatena.js
$(function () {
$('#xatena').focus().keyup(function () {
var text = $(this).val();
$.ajax({
type: 'POST',
url: '/xatena',
data: {q: text},
success: function (html) {
$('#preview').html(html);
}
});
});
});
@@ xatena.css
#xatena {
width: 100%;
height: 250px;
}
#preview {
color: #333;
}
@@ index.html.ep
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>xatena.pl</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="xatena.js"></script>
<link rel="stylesheet" type="text/css" href="xatena.css" />
</head>
<body>
<textarea id="xatena"></textarea>
<div id="preview"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment