Swimming
Walking
J-POP
Blog Customize - menu

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

2020-08-18

Blog Customize QooQ



【 highlight.js 】の拡張です。


「インドアな日々」さん

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

を参考にしました。



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

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



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 が1つ多い理由は highlight.js が自動的に「 CSS 」とクラス指定をすることがあるためです。

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


Script

以下のScriptをHTML編集で </body> の直上に追記します。


<!-- 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>



使い方

code タグにクラス指定(script, csss, html)すると、「 Script 」「 CSS 」「 HTML 」とタイトル表示するようになります。


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


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


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

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

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

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




プロフィール


ryo

現役時代のスタイル・ワンは平泳ぎでした。 ...が、マスターズで入賞できないので バタフライ長距離(200m)に仕方なく挑んでいます。

このブログを検索

@TCOM

このブログで人気の投稿

コロナワクチン接種(ファイザー2回目)

QooQ

TOP