html5とjQueryでページのソースを綺麗に表示する

サンプルページのソースを簡単にかつ綺麗に見せたい時があるかと思います。
今回はそれをhtml5とjQueryを使って簡単にできる手法を紹介します。
via:Make a 'View Source' Button | CSS-Tricks
html5とjQueryでページのソースを綺麗に表示するサンプル

使用方法
Make a 'View Source' Button | CSS-Tricksからファイル一式をダウンロードします。
なお、ソースを綺麗にしているのはgoogle-code-prettify - Project Hosting on Google Codeで単体で使用する場合はコードをプリティに整形するjavascript「code prettifier」を参照ください。
さて、早速head部分に記述していきます。 <link rel='stylesheet' href='ViewSourceButton/css/style.css' />
<link rel='stylesheet' href='ViewSourceButton/css/prettify.css' />
<style>
#source-code { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); }
#source-code:target { display: block; }
#source-code pre { padding: 20px; font: 14px/1.6 Monaco, Courier, MonoSpace; margin: 50px auto; background: rgba(0,0,0,0.8); color: white; width: 80%; height: 80%; overflow: auto; }
#source-code pre a, #source-code pre a span { text-decoration: none; color: #00ccff !important; }
#x { position: absolute; top: 30px; left: 10%; margin-left: -41px; }
.button { background: #00ccff; padding: 10px 20px; color: white; text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="ViewSourceButton/prettify/prettify.js"></script>
<script>
$(function() {
$("<pre />", {
"html": '<!DOCTYPE html>\n<html>\n' +
$("html")
.html()
.replace(/[<>]/g, function(m) { return {'<':'<','>':'>'}[m]})
.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>') +
'\n</html>
}).appendTo("#source-code");
prettyPrint();
});
</script>

※変換され<と&lt;が判別できない部分がありますので、元ソースをご確認ください。
source-codeを記述します。
<div id="source-code">
<a href="#" id="x"><img src="x.png" alt="close"></a>
</div>

最後にリンクを下記のようにつければ完成です。
<a class="button" href="#source-code" id="view-source">Fancy View Source</a>
html5とjQueryでページのソースを綺麗に表示するサンプル

sponsors

「html5とjQueryでページのソースを綺麗に表示する」をシェアする

記事作成:
記事URL:

TOP > > > html5とjQueryでページのソースを綺麗に表示する