jQueryプラグインでソースコードを装飾&コピペしやすくする

harada 711views 更新:2014年12月10日

投稿は簡単に、でもソースコードは見やすく、そして利用しやすくするためにソースコードの見せ方を変更しました。
GitHub Flavored Markdown for WordPressで、Google Code Prettifyを利用するのみだと、コピペをする際にいちいちテキスト範囲を選択しなければならず面倒なため、コピペを簡単にできるjQueryプラグインを組み込みました。

具体的には特定のclassを指定したpreタグでRAWデータを生成してくれます。

ここでは一番簡単な利用方法のみを説明します。
詳細な解説、もっと多彩な利用方法の案内(プログラムの実行・デモ表示など)は下記のリンク先をご覧ください。

[Ex Code Prettify] その場で編集/実行できるシンタックスハイライター jQuery プラグイン

利用方法

ダウンロード

jquery.ex-code-prettify

headerで読込

<link href="/jquery.ex-code-prettify.css" type="text/css" rel="stylesheet">

javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/google-code-prettify/prettify.js"></script>
<script src="/jquery.ex-code-prettify.js"></script>
<script language="javascript">
    $('.code').exCodePrettify();
</script>

HTML

<pre class="code" data-ex-code-prettify-param="{codeType:'html'}">
ソースコード
</pre>

コメント

  1. cyokodog のコメント (2014年12月11日)

    ご紹介ありがとうございます。作者です。
    解説ページのリンクが間違っているようです。以下になります。
    http://www.cyokodog.net/blog/ex-code-prettify-doc/

    • harada のコメント (2014年12月11日)

      大変失礼いたしました!リンク先修正いたしました。
      こちらこそ、とても便利なプラグインを作成していただきまして誠にありがとうございます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません