GitHub markdown APIで遊ぶよ

Posted by Hiraku on 2012-07-22

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: github PHP WebAPI javascript

etcの最新記事

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。