markdownといえば各種言語に実装されていますが、GitHubがWeb API形式で変換ツールを出しているようなので遊んでみました。このAPIを通すと、markdownテキストがHTMLに変換されます。
JSONPで使える奴と、RESTっぽくmarkdownなテキスト自体をPOSTするとHTMLの断片が返ってくるraw APIの2つがあります。
利用上限は一時間あたり5000回と太っ腹。
とりあえず、PHP版：http://tojiru.net/markdown.php
<?php
if (isset($_POST['markdown'])) {
$origin = $_POST['markdown'];
$ch = curl_init('https://api.github.com/markdown/raw');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $_POST['markdown']);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Content-Type: text/plain',
));
$result = curl_exec($ch);
$header = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
} else {
$header = 0;
$origin = '';
$result = '';
}
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>githubのmarkdown APIのテスト</title>
</head>
<body>
<h1>githubのmarkdown APIのテスト</h1>
<form action="markdown.php" method="post">
<textarea name="markdown" style="width:50em;height:20em"><?php echo htmlspecialchars($origin)?></textarea>
<br>
<input type="submit" value="変換">
</form>
<textarea name="result" style="width:50em;height:20em">
<?php echo htmlspecialchars($result)?>
</textarea>
<div style="border:1px solid #000; padding:1em">
<?php echo substr($result, $header)?>
</div>
</body>
</html>
JavaScriptで叩くにはJSONPだけかと思いきや、CORSに対応しており、XMLHttpRequest level2が使えるみたいです。
というわけでJavaScript XHRlv2版を作ってみます。IEはもちろん対応してないです。
アプリ登録
↑のPHP版などはアプリ登録しなくても使えるのですが、JavaScriptでXMLHttpRequest level2を使いたい場合、アプリの登録をする必要があります。未登録だとAccess-Control-Allow-Originヘッダが返されず、Bodyが受け取れなくなります。
New OAuth Application別にOAuthを使うわけではないのですが、ここで記入したURLを元にヘッダが返されるみたいなので、実際に使うドメインで入力します。
某サイトと違って、特に認証等は必要無いです。
JavaScriptで遊ぶ
最近のブラウザだと動くと思います。GitHub markdown APIのテスト
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>githubのmarkdown APIのテスト</title>
</head>
<body>
<h1>GitHubのmarkdown APIのテスト(JavaScriptのみ)</h1>
<form name="inputs">
<textarea name="markdown" style="width:50em;height:20em">
タイトル
================
markdownはお手軽に書けるフォーマットで素晴らしいですな
```javascript
function object(o) {
function f(){}
f.prototype = o;
return new f;
}
```
</textarea>
<br>
<button name="commit">変換</button>
</form>
<textarea id="response" style="width:50em;height:20em"></textarea>
<div id="result" style="border:1px solid #000; padding:1em"></div>
<script>
void function(document, global){
var form = document.forms['inputs']
, resBox = document.getElementById('response')
, resHtml = document.getElementById('result')
;
form.commit.addEventListener('click', commit);
function commit(ev) {
ev.preventDefault();
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.github.com/markdown/raw');
xhr.setRequestHeader('Content-Type', 'text/plain');
xhr.onload = function(ev){
resBox.textContent = xhr.responseText;
resHtml.innerHTML = xhr.responseText;
};
xhr.onerror = function(ev){
alert('エラーおきた');
};
xhr.send(form.markdown.value);
}
}(document, this);
</script>
</body>
</html>
level2前提にすると、onloadやonerrorが使えて、XMLHttpRequestが使いやすいですね。
GitHub markdown APIでは、```php 〜 ```のブロックが自動でハイライトされるのが素晴らしいです。例ではスタイルシートを付けていないので色分けされていませんが、HTMLを見るとハイライト用のspanタグで区切られているのがわかると思います。
お手軽にシンタックスハイライト付きで原稿を書く場合には、活用するといいのではないでしょうか。
keyword: javascript PHP WebAPI github