$(function() { var $input = $('#input'); var $pre = $('#preview'); $input.val('[http://google.com:title]'); var hatena = new HatenaHttp(); var parse = function() { var text = $input.val(); hatena.parse(text, function(replacedText) { $pre.html(replacedText); }); }; $input.keyup(function() { parse(); }); parse(); });
<div id="editor"> <textarea id="input"></textarea> <div id="preview"></div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://rawgithub.com/henteko/hatena-httpjs/v0.1/lib/hatena-http.js"></script>
html, body, #editor { margin: 0; height: 100%; font-family: 'Helvetica Neue', Arial, sans-serif; color: #333; } textarea, #editor div { display: inline-block; width: 49%; height: 100%; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; } textarea { border: none; border-right: 1px solid #ccc; resize: none; outline: none; background-color: #f6f6f6; font-size: 14px; font-family: 'Monaco', courier, monospace; padding: 20px; } code { color: #f66; }