SyntaxHighlighterで装飾されたソースコードを簡単にコピーする方法 (3.x系)

Web ページを閲覧していると、以下のようなソースコードがきれいに装飾されて表示されているページを見かけることもあるかと思います。

// メイン関数
void main(void) 
{
    printf("Hello World!");
}

これは SyntaxHighlighter という機能により装飾されています。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/


SyntaxHighlighter には複数のバージョンがあり、バージョンによって利用できる機能が少し異なります。(*1)

最新バージョンは 3.x 系です。
このバージョンでは、2.x 系に存在した(SWFファイルを介した）クリップボードへのテキストのコピー機能が廃止された代わりに、テキストを選択することで簡単にソースコードをコピーできるようになっています。(*2)

試しに以下の SyntaxHighlighter 3.x系で装飾したソースコードを選択してコピーし、メモ帳などのテキストエディタに張り付けてみてください。

// メイン関数
void main(void) 
{
    printf("Hello World!");
}

すると、そのままの形でソースコードとして利用できる形式でメモ帳などのテキストエディタに張り付けられたと思います。

SyntaxHighlighter で装飾したソースコードを選択してコピーして、メモ帳などのテキストエディタに張り付け

更に簡単にコピーする方法として、ソースコード全文をコピーする場合、SyntaxHighlighter で装飾したソースコードをダブルクリックしてみてください。

すると、自動的にソースコードの部分が全て選択状態になるので、ブラウザのコピー機能を使用してクリップボードにコピーを行い、メモ帳などのテキストエディタに張り付けることで、普通のソースコードとして利用することができます。

*1

SyntaxHighlighter - ソースコードを見やすく表示させるJavaScript - 道すがら講堂
http://michisugara.jp/archives/2011/syntax_highlighter.html

*2

SyntaxHighlighter の 2.x 系では、クリップボードへコピーするボタンが提供されていました。そのボタンを押すことでソースコードの全体がクリップボードへ格納されます。（もしくは、SyntaxHighlighter の ソースコードを表示ボタンを使用して、別ウィンドウでソースコードのみを表示して、そこからコピーする方法もあります。）

しかしながら、装飾されたソースコードをテキスト選択でコピーしようとすると、行番号も一緒にコピーされてしまい、一部分のみコピーして使うようなことはしづらい装飾方法となっていました。

SyntaxHighlighter 2.x 系における装飾されたソースコードのテキスト選択におけるコピー結果