【 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>
複数のコードがある時に、それぞれのコード蘭でマウスがホバーしたときにコピーボタンを生成するのが気に入っています。
それぞれのコード蘭すべてにコピーボタンを生成してしまうとボタンが押されたときにどのボタンが押されたのか判定しないといけません。
とてもいいアイデアだと思います。
「インドアな日々」さん、ありがとうございます。
2 件のコメント:
こんにちは。
highlight.js は結構前から興味があったのですが、こちらの記事がきっかけでようやく重い腰を上げてウチでも導入に踏み切りました。
見栄えを良く出来たのも満足ですが、今まで面倒なやり方をしていたコードの挿入が、以前より遥かに楽になったのがありがたいです(^^)
ryoさん独自カスタマイズのコピーボタンもめっちゃ便利ですね!
いつも、興味あるコメントをありがとうございます。
ふじやんさんのコード表記は前から気にはなっていたのですが、前は難しそうなことやっているなぁという感じでしたね。
コピーボタンも全体のデザインも落ち着いたいい感じに仕上がっていますね。
私のは1行追記したらできちゃったという感じなので、「インドアな日々」さん、感謝です。
ふじやんさんも他にも面白そうなことをやっているみたいですね。
手がすいたら新しい記事を上げてください。期待しています。
コメントを投稿