行数をコピーしないような設定(Crayon Syntax Highlighter)

  • このエントリーをはてなブックマークに追加

スポンサーリンク

※サイト運営にサーバーは必須です※
ロリポップ! はコスパのよい初心者向けサーバーです~

はじめに

WordPressでプログラムをきれいに表示してくれるプラグインの一つが「Crayon Syntax Highlighter」だ(以下の画像のように表示してくれる)

 

crayon

 

しかし、サイトの訪問者がコードをコピーしようとすると、行数の情報ももれなくコピーされてしまうことがある

このままだとユーザビリティが悪いな……と思った次第だ。

状況の確認

行数の情報は1行目のコードよりも上側に存在しているっぽい。そのため、コードの範囲を下からドラッグして1行目よりもやや上で選択した場合に、もれなく行数がセットでついてきてしまう。

(下はサンプルコードを貼り付けたもの。見ての通り、最初に余計なものが付いてしまっている)

 

1

2

3

4

5

6

7

8

// A sample class

class Human {

              private int age = 0;

              public void birthday() {

                            age++;

                            print(‘Happy Birthday!’);

              }

}

 

Crayon Syntax Highlighterの使い方を知っている人は、右上に表示される項目の「Copy」を選択すれば、コードをすんなりコピーできることを知っているだろう。

crayon2

 

しかし、このことを知れないユーザも無論多くいる。

設定法

WordPressの設定で「Crayon」を選択

「デフォルトでプレインコードを表示する」にチェックを入れると、行数ももれなくコピーされるという事態は防げる。(が、デザイン性は皆無になる)

crayon-plain

 

(プレインコードのデザインだと以下のようになる)

crayon3

 

それと、プレインコードの状態だと、Ctrl+Aで選択した時、コードだけがきちんと選択されるので便利(ちなみに、デフォルトだと、Ctrl+Aでサイト全体が選択されてしまう)

※ちなみに、「デフォルトで行番号を表示」のチェックを外しても、効果がない。行数の情報が画面から隠れているだけである。

デザインとユーザビリティのどちらを取るかは、人によって意見が分かれるかもしれない。

それ以外の設定

効果があるか検証はしていませんが、「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」にチェックを個人的には入れている。

この手のプラグインはかなり重いと聞くので、動作が少しでも軽くなればなあ……

 

crayon-%e3%81%9d%e3%81%ae%e4%bb%96

~Webサイトを自分で作ってみませんか?~

Webサイトを運営するにはサーバーが必須です。
このサイトは、エックスサーバー のサーバーを使用しています。
エックスサーバーは無料で10日間お試しができます。

  • このエントリーをはてなブックマークに追加

スポンサーリンク


コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)