【 highlight.js 】拡張！ボタン1つで全選択コピー他

【 highlight.js 】の拡張です。

「インドアな日々」さん

【 highlight.js 】を使いやすくする！ソースコードをボタン1つで全選択他

【 highlight.js 】 を使いやすくする！ソースコードをボタン1つで全選択他

こんにちは！ HARU（ @HARU ）です。 ソースコードを綺麗に見やすくしてくれる highlight.js をもっと使いやすく、見やすくなるようにカスタマイズしてみたいと思います。 変更点 ソースコードをワンクリックで全選択 ...

indoor-days.blogspot.com

を参考にしました。

「インドアな日々」さんの記事ではをワンクリックで全選択とタイトルを自動付与を拡張されていましたが、それにコピー機能を追加してみました。

ボタン一発で全選択コピーをします。

CSS

以下のCSSをHTML編集でCSS記述部「全体設定」に追記します。

/* highlight.js用 */
.hljs{
  padding: .5em 1em;
}
pre{
  position: relative;
  margin-top : 1em ;
}
code{
  font-size: 1.4rem; /*ソースコードフォントサイズ*/
  line-height: 1.4;  /*行間*/
}
#selectPre{ /* ボタン */
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  font-size: 14px;
  background-color: #edae00; /*背景色*/
  color:#fff; /*文字色*/
}
/*  highlight.js ソースコードにタイトルを自動付与 */
.script:before{content: "Script";}
.csss:before{content: "CSS";}
.html:before{content: "HTML";}
.script:before, .csss:before, .html:before {
  font-weight: bold;
  background:#5ba1cc; /*背景色*/
  color:#fff; /*文字色*/
  position: absolute;
  top: 0;
  left: 0;
  padding: 0em .5em 0em .5em;
}

タイトル「 CSS 」と表示するクラス名が「 csss 」と s が１つ多い理由は highlight.js が自動的に「 CSS 」とクラス指定をすることがあるためです。

不具合が出ないようにということなので、コードが「 CSS 」の場合はクラス名を「 csss 」にする必要があります。

Script

<!-- highlight.js ボタン -->
<script defer>
;(function(d){
if(!window.getSelection){
  return
}
var btn = d.createElement("button")
btn.id = "selectPre"
btn.textContent = "ソースコード全選択コピー"
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)
  // クリップボードへコピー
  d.execCommand('copy')
}
var pres = d.getElementsByTagName("code")
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>

使い方

<pre><code class="html">
  HTMLの中身
</code></pre>

<pre><code class="csss">
  CSSの中身
</code></pre>

複数のコードがある時に、それぞれのコード蘭でマウスがホバーしたときにコピーボタンを生成するのが気に入っています。

それぞれのコード蘭すべてにコピーボタンを生成してしまうとボタンが押されたときにどのボタンが押されたのか判定しないといけません。

とてもいいアイデアだと思います。

「インドアな日々」さん、ありがとうございます。