ソースコードをワンクリックで選択

preタグの中を全選択したい時がある人向け。
＊IE9以上

追記: GoogleChrome(webkit)ではボタンのテキストも選択されてしまうので修正 @ 2013/07/24

これの利点

はてなに限ればGistなどの貼り付けで良いが、userscriptとして使えばMDNなど他のサイトでも使える。
またハイライト系のスクリプトを使用すると余計なクラスをつけなければならず、マークダウンそのままの記述ができなくなる。

使い方

管理 -> デザイン -> フッタ にJSを入れてください。

1. pre要素にマウスが入るとそのpreの右上に[select]というボタンが現れる。
2. それを押すとpre要素内が全選択状態になる
3. コピーは手動で

＊ボタンのテキストも選択してあるように思えるが、そこはコピーされない 追記修正

コード

JS

<script defer>
;(function(d){

if(!window.getSelection){
  return
}

var btn = d.createElement("button")
btn.id = "selectPre"
btn.textContent = "select"
btn.addEventListener("click", selectPre, false)

function selectPre(){
  var sel = window.getSelection()
  var pre = this.parentNode
  sel.selectAllChildren(pre)
  sel.extend(pre, pre.childNodes.length-1)
}


var pres = d.getElementsByTagName("pre")
for(var i=pres.length; i--;){
  pres[i].addEventListener("mouseover", addBtn, false)
}

function addBtn(e){
  if(this === addBtn.ele) return // not to addBtn if already
  this.appendChild(btn)
  return addBtn.ele = this
}

})(document)
</script>

CSS （適当に改変してください）

pre{
  position: relative
}
#selectPre{
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  padding: 2px 3px;
  font-family: consolas
}