Qitailangのブログ

Webデザイン、碁、Esperanto、自然農法的家庭菜園

簡易ソース表示jQueryプラグイン

ソース表示だが、説明が加わるときには行番号が役立つかもしれない。私としては文法を分かりやすくするハイライト表示よりも、一部の文字列をカラーで強調したいので、ハイライト表示は不要かと思う。「軽いがいい」し...

行番号はolのリストマークなのでクリップボードにコピーされない。つまりコピペでそのまま使えるということ。(ペーストで行番号まで吐き出すお世話焼きなテキストエディタもあるみたいだけど...無視。)

  1. <script src="jquery-1.10.2.min.js"></script>
  2. <script src="jquery.codeshow.js"></script>
  3. <script>
  4.   $(document).ready(function() {
  5.     $("pre.code").codeshow();
  6.   });
  7. </script>

sample

ソース表示ブロック(ここでは<pre class="code">)ではタグマークを&lt; &gt;にしておく必要がある。

jquery.codeshow.jsのソース

参照サイト・作者サイト
http://htsign.hateblo.jp/entry/2014/01/16/234802
http://osumituki.com/web-front/7120.html