綾小路龍之介の素人思考

[github] gist(github)のシンタックスハイライトをwebに埋め込む方法

githubのgistにシンタックスハイライトをつけさせ、webに貼り付ける。

以下のようなコードをwebに貼り付ける。javascriptが有効の場合にはシンタックスハイライトされたコードが表示される。無効の場合はリンクが表示される。

<script type="application/ecmascript" src="https://gist.github.com/1342587.js?file=dom_document_write.js"></script>
<noscript>
<p><a href="https://gist.github.com/1342587">l's gist: 1342587 — Gist</a></p>
</noscript>

具体的には以下のようになる。

githubが提供するシンタックスハイライトはjavascriptのdocument.writeを使っている。そのため、以下に示すhttpレスポンスヘッダのようにContent-Type: application/xhtml+xml;の場合は、ブラウザのjavascriptが有効になっていても表示されない。たとえばこのサイトははこのようなケースに該当するが、少し工夫して表示されるようにしている。

$ wget -S http://za.toypark.in/html/2010/03-09.html
--2011-11-06 03:22:07--  http://za.toypark.in/html/2010/03-09.html
Resolving za.toypark.in... 202.94.135.219
Connecting to za.toypark.in|202.94.135.219|:80... connected.
HTTP request sent, awaiting response...
  HTTP/1.1 200 OK
  Date: Sat, 05 Nov 2011 18:22:09 GMT
  Server: Apache/2.2.3 (CentOS)
  Last-Modified: Sat, 05 Nov 2011 18:16:15 GMT
  ETag: "2769bda-145c-d136f9c0"
  Accept-Ranges: bytes
  Expires: Thu, 01 Jan 1970 00:00:00 GMT, -1
  Cache-Control: must-revalidate
  Pragma: no-cache
  Connection: close
  Content-Type: application/xhtml+xml; charset=utf-8
  Content-Language: ja
Length: unspecified [application/xhtml+xml]
Saving to: “03-09.html”

    [ <=>              ] 5,699       --.-K/s   in 0.01s

2011-11-06 03:22:12 (383 KB/s) - “03-09.html” saved [5699]

本来、noscriptの中見はscriptと同等の情報を提供するべきで、リンクを張るだけはNGだと思うなら、また、何らかのケースでまったく表示されないことを恐れるなら、noscriptタグの外にリンクをはるほうがいい。

<script type="application/ecmascript" src="https://gist.github.com/1342587.js?file=dom_document_write.js"></script>
<p><a href="https://gist.github.com/1342587">l's gist: 1342587 — Gist</a></p>

具体例は以下。javascriptが無効化されていても、リンクの場所は見れる。

l's gist: 1342587 — Gist

シンタックスハイライトをするためにgistの提供するjavascriptファイルを使うのはちょっとやりすぎ。シンタックスハイライトしたいだけなら、それ用のjavascriptを使ったほうがいいと思う。gistを使いたくてその付加的恩恵としてシンタックスハイライトを使うのならいいと思うけど。

リファレンス

  1. application/xhtml+xml document write dom - Google 検索
  2. documentオブジェクト - JAVAスクリプト
  3. application/xhtml+xmlなページでは,document.write()は使えないそうな | 吟遊詩人の戯言
  4. M.C.P.C.: XHTMLをMIMEタイプapplication/xhtml+xmlにして、JavaScriptではまったことと解決法
  5. JACK THREE FIVE | articles
  6. 404 Blog Not Found:javascript - DOM時代のdocument.write()
  7. SCR21: DOM(ドキュメント・オブジェクト・モデル)を用いて、ページにコンテンツを追加する
  8. ちょっとしたメモ - 今どきのXHTMLメディアタイプ
  9. 404 Blog Not Found:javascript - 決定版 - DOM時代のdocument.write()
  10. DOM document.write - Google 検索
  11. l's gist: 1342587 — Gist

ソーシャルブックマーク

  1. はてなブックマーク
  2. Google Bookmarks
  3. del.icio.us

ChangeLog

  1. Posted: 2010-03-09T00:26:15+09:00
  2. Modified: 2010-03-09T00:26:15+09:00
  3. Generated: 2017-05-11T23:09:19+09:00