highlight.jsにコピー機能を追加し、<pre><code>タグ内のコードを
クリップボードにコーピーする「コピーボタン」を自動生成する + 行番号を付ける


highlight.js は、Webページ上に表示したソースコードなどに色を付ける(ハイライト)ためのJavaScriptライブラリです。
このライブラリにコピー機能を追加し、<pre><code>タグ内のコードをコピーするボタンを自動生成する方法および行番号を付ける方法を紹介します。
引用サイト:>highlight.jsにコピー機能を追加する方法>highlight.jsに行番号を追加する方法

1. highlight.jsおよびhighlight CSSの設置2. 自動でコピーボタン追加するjavascript3. CSSによるコピーボタンの装飾
4. <pre><code>タグコード5. これまでのHTMLまとめ

<pre><code>タグ内コードをコピーするコピーボタンの自動生成および行番号を付ける方法

<pre><code>タグ内コードをコピーするコピーボタンの自動生成および行番号を付ける手順はつぎのとおりです。

1. highlightjsのjsファイルおよびCSSファイルの設置

highlightjsのjsおよびCSSファイルをcdnjsを利用し、<head>内に配置します。 合せて、highlight.jsを初期起動します。

<!-- highlightjs 本体 -->
<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js"></script>
<script>
 hljs.initHighlightingOnLoad(); //highlight.js初期起動
</script>

行番号を付けたい場合は、つぎのhighlightjs-line-numbersJSファイルを追加します。
合せて、highlightjs-line-numbers.jsを初期起動します。

<!-- hilightjs 行番号js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.1.0/highlightjs-line-numbers.min.js"></script>
<script>
 hljs.initLineNumbersOnLoad();  //highlightjs-line-numbers.js初期起動
</script>

2. 自動でコピーボタン追加および行番号の付与javascript

つぎのコピーボタン追加Javascript を </ body>の直前に配置します。


            /*  コピーボタン追加および文字列のクリップボードにコピー プラグイン
                * querySelector等で取得した要素(element)を渡すと、
                * その要素の文字列をクリップボードにコピーします。
                * ユーザーが事前に選択していた内容には影響を与えません。
                * 戻り値はコピーが成功したかどうか(true/false)
            */
            let copyToClipboard = (element) => {
                let ranges = [];
                let selection = window.getSelection();
                let range = document.createRange();
                let result = false;
                for (let i = 0; i < selection.rangeCount; i += 1) {
                    ranges[i] = selection.getRangeAt(i);
                }
                range.selectNodeContents(element);
                selection.removeAllRanges();
                selection.addRange(range);
                result = document.execCommand("copy");
                selection.removeAllRanges();
                for (let i = 0; i < ranges.length; i += 1) {
                    selection.addRange(ranges[i]);
                }
                return result;
            };

            let body = document.querySelector("body");
            let active = [];
            body.addEventListener("click", (e) => {
                try {
                    const target = e.target;
                    if (!target.classList.contains('copy-button')) return;

                    const pre = target.closest("pre");
                    let result = false;
                    if (active.indexOf(target) !== -1) return;
                    if (pre) {
                        result = copyToClipboard(pre);
                        target.innerText = (result ? "COPIED!" : "FAILED!");
                        target.classList.add((result ? "success" : "failed"));
                        active.push(target);
                        setTimeout(() => {
                            let index = active.indexOf(target);
                            target.className = "copy-button";
                            target.innerText = "COPY";
                            if (index !== -1) active.splice(index, 1);
                        }, 2000);
                    }
                } catch (e) {
                    //error 
                }
            });
            hljs.addPlugin({
                'after:highlightBlock': ({ block, result }) => {
                    result.value = `${result.value}`;
                }
            });

行番号を付けたい場合はつぎの行番号Javascript を追加します。


/* 行番号プラグイン */
    hljs.addPlugin({
        'after:highlightBlock': ({ block, result }) => {
            result.value = result.value.replace(/^/gm,'<span class="row-number"></span>');
        }
    });

3. コピーボタンおよび行番号の装飾CSS

つぎのコピーボタンの装飾のCSSを、上記1.のhighlight.jsおよびhighlight CSSのつぎに配置します。


/* コピーボタン 装飾 */
pre{
    position:relative;
    margin-top:80px;
}
.copy-button{
    color:#888;
    font-size:.6rem;
    display:inline-block;
    padding:8px 16px;
    margin-right:20px;
    box-shadow:0px 2px 5px 0px rgba(0,0,0,0.16), 0px 2px 6px 0px rgba(0,0,0,0.12);
    border:2px solid #666;
    cursor: pointer;
    background-color: #fff;
    transition: all .2s ease;
    position:absolute;
    right:0;
    top:-20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
}
.copy-button.success{border-color:#00C851;background-color:#c8e6c9;color:#007E33;}
.copy-button.failed{border-color:#ff4444;background-color:#ffcdd2;color:#CC0000;}
.copy-button:hover{
    box-shadow:0px 2px 5px 0px rgba(0,0,0,0.3), 0px 2px 10px 0px rgba(0,0,0,0.12);
}

行番号を付けたい場合はつぎの行番号装飾CSSを追加します。


/* 行番号 修飾 */
td.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
 
    text-align: center;
    color: gray;
    border-right: 1px solid #FFcc66; /*#CCC;*/
    vertical-align: top;
    padding-right: 5px;
 
    /* your custom style here */
}
 
/* for block of code */
td.hljs-ln-code {
    padding-left: 10px !important;
}

4. コピー対象データ域を<pre><code>タグコードで記述

divタグで囲み<pre><code>タグコードを<body>内に記述します。
この<pre><code>タグコード内に、上記2.javascriptで、右下のようにコピーボタンが自動配置されます。
また、上記3.CSSでコピーボタンの装飾が行われます。
1ページ内に<pre><code>タグコードが複数配置しても、 コピーボタンはすべてに自動生成されます。


<div>
<pre><code  class="html">

.......

</code></pre>
</div>

<pre><code>タグ内コードのデホルトの表示例は、下図のとおりです。
好みにより、上記3. コピーボタンの装飾CSS(.copy-button)を変更しカスタマイズしてください。


図-1 <pre><code>タグ内コードのデホルトの表示例(行番号なし)


図-2 <pre><code>タグ内コードのデホルトの表示例(行番号付き)

<pre><code>タグ内コードの配置応用例として、jQuery ui タグメニュー内に配置することも可能です。


<!-- jQuery js css -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- jQuery ui tabs menu -->
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
  $(function() {
    $( "#tabs01" ).tabs();
  });
 </script>

</head>
<body>


<!-- jQuery ui タブメニュー -->
<DIV id="tabs01" style="width:800px" class="fancybox-bshadow contents">
  <ul>
    <li><a href="#incTabs01-1">サンプル1の1</a></li>
    <li><a href="#incTabs01-2">サンプル1の2</a></li>
   </ul>
<div class="contents" id="incTabs01-1" style="background:#f5f5f5;padding:0px;margin:0px;width:800px;height:100%;overflow:auto;">
<pre><code class="html">

・・・・・・・・・・・

</code></pre>
</div>
<div class="contents" id="incTabs01-2" style="background:#f5f5f5;padding:0px;margin:0px;width:800px;height:100%;overflow:auto;">
<pre><code class="html">

・・・・・・・・・・・

</code></pre>
</div>
</DIV>

5. これまでのHTMLまとめ

これまでのサンプルコードをまとめ、つぎのとおりサンプルHTMLを作成します。
highlight.jsにコピー機能を追加し、<pre><code>タグ内のコードをクリップボードにコーピーする「コピーボタン」を自動生成するのまとめサンプルHTMはつぎのとおり、基本編とjQuery ui タグメニュー編の2つのサンプルを作成しました。

  1. まとめサンプル 基本編のサンプルデモを見る
  2. まとめサンプル 基本編のサンプルデモを見る-行番号付き
  3. まとめサンプル Query ui タグメニュー編のサンプルデモを見る - 行番号付き
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>highlight.jsにコピー機能を追加し、<pre><code>タグ内のコードを<br>
クリップボードにコーピーする「コピーボタン」を自動生成する - 基本編 - 行番号なし</title>

<!-- jQuery 不用 -->

<!-- highlight.js CSS https://cookbook.xrea.jp/js-cookbook/thirdparty/highlight-copy.php -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<!-- このページ用 -->
<style>
 body{
    max-width: 810px;
    margin: 0 auto;  
    padding: 0px; 
 }
 .contents{
  background-color: #F5F5F5;
  width: 800px;
  border:1px solid #F5F5F5;
 } 
 .html{
   background-color: #F5F5F5;
 }
.contents2{
  background-color: #000000;
  width: 800px;
  border:1px solid #000000;
 } 
 .html2{
   background-color: #000000;
   color: #ffffff;
 }
</style>

<!-- 自動でコピーボタンを追加するコピーボタンの装飾  CSS highlight.js -->
<style> 
 pre{
    position:relative;
    margin-top:80px;
 }
 .copy-button{
    color:#888;
    font-size:.6rem;
    display:inline-block;
    padding:8px 16px;
    margin-right:20px;
    box-shadow:0px 2px 5px 0px rgba(0,0,0,0.16), 0px 2px 6px 0px rgba(0,0,0,0.12);
    border:2px solid #666;
    cursor: pointer;
    background-color: #fff;
    transition: all .2s ease;
    position:absolute;
    right:0;
    top:-20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
 }
 .copy-button.success{border-color:#00C851;background-color:#c8e6c9;color:#007E33;}
 .copy-button.failed{border-color:#ff4444;background-color:#ffcdd2;color:#CC0000;}
 .copy-button:hover{
    box-shadow:0px 2px 5px 0px rgba(0,0,0,0.3), 0px 2px 10px 0px rgba(0,0,0,0.12);
}
</style>
</head>

<body>
<h2 style="text-align:center">highlight.jsにコピー機能を追加し、<pre><code>タグ内のコードを<br>
クリップボードにコーピーする「コピーボタン」を自動生成する<br>
- まとめサンプル 基本編 行番号なし -</h2>
<h4>サンプル1</h4>
<div class="contents">
<pre><code class="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST1</title>
</head>
<body>
サンプル1    
</body>
</html>
</code></pre>
</div>

<h4>サンプル2</h4>
<div class="contents2">
<pre><code class="html2">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST2</title>
</head>
<body>
サンプル2    
</body>
</html>
</code></pre>
</div>

<h4>サンプル3</h4>
<div class="contents">
<pre><code class="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST3</title>
</head>
<body>
サンプル3    
</body>
</html>
</code></pre>
</div>

<br>
<hr>
<table cellpadding=3 width="800" border=0>
<tr align=center>
<td valign=bottom align=center width="25%">
 <a href="http://urbanqee.com" target="_top">
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME">
 </a>
 <br>
  <font color=gray><small><small>最終更新日</small>:2021.3.3</font></small>
</td>
<td width="25%">
<a href="http://urbanqee.com/cgi-ssi/sendmails/sendmail.html" target="_blank" title="お問い合わせメール"><img src="http://urbanqee.com/img/mailtoicon.jpg" width="32" height="24" title="メール"></a> 

</td>
<td width="25%">
<a href="http://urbanqee.com/bbs/bbs/imgboard.cgi" target="_blank"><img src="http://urbanqee.com/img/bbs-memo_keijiban_45212-300x300.jpg" title="BBS 掲示板" width=64 height=32></a>

</td>
<td width="25%">
<a href="http://urbanqee.com/site/sitemap.html" target="_blank"><img src="http://urbanqee.com/img/sitemap-icon_128610_128.png" title="サイトマップ" width=32 height=32></a>

</td>
</tr>
</table>
<br>

<!-- 自動でコピーボタンを追加するjavascript highlight.js -->
<script>
        {
            /*
                * querySelector等で取得した要素(element)を渡すと、
                * その要素の文字列をクリップボードにコピーします。
                * ユーザーが事前に選択していた内容には影響を与えません。
                * 戻り値はコピーが成功したかどうか(true/false)
            */
            let copyToClipboard = (element) => {
                let ranges = [];
                let selection = window.getSelection();
                let range = document.createRange();
                let result = false;
                for (let i = 0; i < selection.rangeCount; i += 1) {
                    ranges[i] = selection.getRangeAt(i);
                }
                range.selectNodeContents(element);
                selection.removeAllRanges();
                selection.addRange(range);
                result = document.execCommand("copy");
                selection.removeAllRanges();
                for (let i = 0; i < ranges.length; i += 1) {
                    selection.addRange(ranges[i]);
                }
                return result;
            };

            let body = document.querySelector("body");
            let active = [];
            body.addEventListener("click", (e) => {
                try {
                    const target = e.target;
                    if (!target.classList.contains('copy-button')) return;

                    const pre = target.closest("pre");
                    let result = false;
                    if (active.indexOf(target) !== -1) return;
                    if (pre) {
                        result = copyToClipboard(pre);
                        target.innerText = (result ? "COPIED!" : "FAILED!");
                        target.classList.add((result ? "success" : "failed"));
                        active.push(target);
                        setTimeout(() => {
                            let index = active.indexOf(target);
                            target.className = "copy-button";
                            target.innerText = "COPY";
                            if (index !== -1) active.splice(index, 1);
                        }, 2000);
                    }
                } catch (e) {
                    //error 
                }
            });
            hljs.addPlugin({
                'after:highlightBlock': ({ block, result }) => {
                    result.value = `<button class="copy-button">COPY</button>${result.value}`;
                }
            });
        }
</script>

</body>

</html> 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>highlight.jsにコピー機能を追加し、<pre><code>タグ内のコードを
クリップボードにコーピーする「コピーボタン」を自動生成する - 基本編 + 行番号</title>

<!-- highlight.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js"></script>

 <!-- hilight.js line Number-->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.1.0/highlightjs-line-numbers.min.js"></script>
<script>
 hljs.initHighlightingOnLoad();
 hljs.initLineNumbersOnLoad();
</script>

<!-- このページ用 -->
<style>
 body{
    max-width: 810px;
    margin: 0 auto;  
    padding: 0px; 
 }
 .contents{ /*style="background:#f5f5f5;padding:0px;margin:0px;width:800px;height:100%;overflow:auto;"*/
  background-color: #F5F5F5;
  width: 800px;
  border:1px solid #F5F5F5;
 } 
 .html{
   background-color: #F5F5F5;
 }
.contents2{
  background-color: #000000;
  width: 800px;
  border:1px solid #000000;
 } 
 .html2{
   background-color: #000000;
   color: #ffffff;
 }
</style>

<!-- 自動でコピーボタンを追加するコピーボタンの装飾  CSS highlightjs -->
<style> 
 pre{
    position:relative;
    margin-top:80px;
 }
 .copy-button{
    color:#888;
    font-size:.6rem;
    display:inline-block;
    padding:8px 16px;
    margin-right:20px;
    box-shadow:0px 2px 5px 0px rgba(0,0,0,0.16), 0px 2px 6px 0px rgba(0,0,0,0.12);
    border:2px solid #666;
    cursor: pointer;
    background-color: #fff;
    transition: all .2s ease;
    position:absolute;
    right:0;
    top:-20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
 }
 .copy-button.success{border-color:#00C851;background-color:#c8e6c9;color:#007E33;}
 .copy-button.failed{border-color:#ff4444;background-color:#ffcdd2;color:#CC0000;}
 .copy-button:hover{
    box-shadow:0px 2px 5px 0px rgba(0,0,0,0.3), 0px 2px 10px 0px rgba(0,0,0,0.12);
}
</style>

<!-- line number 行番号 highlightjs -->
<style>
/* for block of numbers */
td.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
 
    text-align: center;
    color: gray;
    border-right: 1px solid #FFcc66; /*#CCC;*/
    vertical-align: top;
    padding-right: 5px;
 
    /* your custom style here */
}
 
/* for block of code */
td.hljs-ln-code {
    padding-left: 10px !important;
}

.hljs-ln-line{data-line-number="10"}

</style>

</head>
<body>
<h2 style="text-align:center">highlight.jsにコピー機能を追加し、<pre><code>タグ内のコードを<br>
クリップボードにコーピーする「コピーボタン」を自動生成する<br>
- まとめサンプル 基本編 行番号付き -</h2>
<h4>サンプル1</h4>
<div class="contents" style="background:#f5f5f5">
<pre><code class="html" style="background:#f5f5f5"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST1</title>
</head>
<body>
サンプル1    
</body>
</html></code></pre>
</div>

<h4>サンプル2</h4>
<div class="contents2" style="background:#000000">
<pre><code class="html2" style="background:#000000"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST2</title>
</head>
<body>
サンプル2    
</body>
</html></code></pre>
</div>

<h4>サンプル3</h4>
<div class="contents" style="background:#f5f5f5">
<pre><code class="html" style="background:#f5f5f5"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST3</title>
</head>
<body>
サンプル3    
</body>
</html></code></pre>
</div>
<br>

<hr>
<table cellpadding=3 width="800" border=0>
<tr align=center>
<td valign=bottom align=center width="25%">
 <a href="http://urbanqee.com" target="_top">
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME">
 </a>
 <br>
  <font color=gray><small><small>最終更新日</small>:2021.3.3</font></small>
</td>
<td width="25%">
<a href="http://urbanqee.com/cgi-ssi/sendmails/sendmail.html" target="_blank" title="お問い合わせメール"><img src="http://urbanqee.com/img/mailtoicon.jpg" width="32" height="24" title="メール"></a> 

</td>
<td width="25%">
<a href="http://urbanqee.com/bbs/bbs/imgboard.cgi" target="_blank"><img src="http://urbanqee.com/img/bbs-memo_keijiban_45212-300x300.jpg" title="BBS 掲示板" width=64 height=32></a>

</td>
<td width="25%">
<a href="http://urbanqee.com/site/sitemap.html" target="_blank"><img src="http://urbanqee.com/img/sitemap-icon_128610_128.png" title="サイトマップ" width=32 height=32></a>

</td>
</tr>
</table>
<br>

<!-- 自動でコピーボタンを追加するjavascript highlightjs -->
<script>
        {
            /*
                * querySelector等で取得した要素(element)を渡すと、
                * その要素の文字列をクリップボードにコピーします。
                * ユーザーが事前に選択していた内容には影響を与えません。
                * 戻り値はコピーが成功したかどうか(true/false)
            */
            let copyToClipboard = (element) => {
                let ranges = [];
                let selection = window.getSelection();
                let range = document.createRange();
                let result = false;
                for (let i = 0; i < selection.rangeCount; i += 1) {
                    ranges[i] = selection.getRangeAt(i);
                }
                range.selectNodeContents(element);
                selection.removeAllRanges();
                selection.addRange(range);
                result = document.execCommand("copy");
                selection.removeAllRanges();
                for (let i = 0; i < ranges.length; i += 1) {
                    selection.addRange(ranges[i]);
                }
                return result;
            };

            let body = document.querySelector("body");
            let active = [];
            body.addEventListener("click", (e) => {
                try {
                    const target = e.target;
                    if (!target.classList.contains('copy-button')) return;

                    const pre = target.closest("pre");
                    let result = false;
                    if (active.indexOf(target) !== -1) return;
                    if (pre) {
                        result = copyToClipboard(pre);
                        target.innerText = (result ? "COPIED!" : "FAILED!");
                        target.classList.add((result ? "success" : "failed"));
                        active.push(target);
                        setTimeout(() => {
                            let index = active.indexOf(target);
                            target.className = "copy-button";
                            target.innerText = "COPY";
                            if (index !== -1) active.splice(index, 1);
                        }, 2000);
                    }
                } catch (e) {
                    //error 
                }
            });
            hljs.addPlugin({
                'after:highlightBlock': ({ block, result }) => {
                    result.value = `<button class="copy-button">COPY</button>${result.value}`;
                }
            });
        }
</script>

<!-- 行番号プラグイン highlightjs -->
<script>
    hljs.addPlugin({
        'after:highlightBlock': ({ block, result }) => {
            result.value = result.value.replace(/^/gm,'<span class="row-number"></span>');
        }
    });
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>highlight.jsにコピー機能を追加し、<pre><code>タグ内のコードを<br>
クリップボードにコーピーする「コピーボタン」を自動生成する - jQuery ui タブメニュー編 </title>

<!-- highlight.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js"></script>

 <!-- hilight.js line Number-->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.1.0/highlightjs-line-numbers.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
</script>

<!-- CSSによるコピーボタンの装飾 -->
<style>
 pre{
    position:relative;
    margin-top:55px;    /*80px;*/
 }
 .copy-button{
    color:#888;
    font-size:9px;   /*.6rem;*/
    display:inline-block;
    padding:3px;      /*8px 16px;*/
    margin-right:20px;
    box-shadow:0px 2px 5px 0px rgba(0,0,0,0.16), 0px 2px 6px 0px rgba(0,0,0,0.12);
    border:2px solid #666;
    border-radius: 10px;
    cursor: pointer;
    background-color: #fff;
    transition: all .2s ease;
    position:absolute;
    right:0;
    top:-50px;   /*-20px;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
 }
 .copy-button.success{border-color:#00C851;background-color:#c8e6c9;color:#007E33;}
 .copy-button.failed{border-color:#ff4444;background-color:#ffcdd2;color:#CC0000;}
 .copy-button:hover{
    box-shadow:0px 2px 5px 0px rgba(0,0,0,0.3), 0px 2px 10px 0px rgba(0,0,0,0.12);
}
</style>

<!-- line number 行番号 highlightjs -->
<style>
/* for block of numbers */
td.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
 
    text-align: center;
    color: gray;
    border-right: 1px solid #FFcc66; /*#CCC;*/
    vertical-align: top;
    padding-right: 5px;
 
    /* your custom style here */
}
 
/* for block of code */
td.hljs-ln-code {
    padding-left: 10px !important;
}

.hljs-ln-line{data-line-number="10"}

</style>

<!-- このページ用 -->
<style>
 body{
    max-width: 810px;
    margin: 0 auto;  
    padding: 0px; 
 }
 .html{
   background-color: #F5F5F5;
 }
 .html2{
   background-color: #000000;
   color: #ffffff;
 }
</style>

<!-- jQuery js css -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- jQuery ui tabs menu -->
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
  $(function() {
    $( "#tabs01" ).tabs();
    $( "#tabs02" ).tabs();
  });
 </script>

</head>

<body>
<h2 style="text-align:center">highlight.jsにコピー機能を追加し、<pre><code>タグ内のコードを<br>
クリップボードにコーピーする「コピーボタン」を自動生成する<br>
- まとめサンプル jQuery ui タブメニュー編 -</h2>
<h4>サンプル1</h4>
<DIV id="tabs01" style="width:800px" class="fancybox-bshadow contents">
  <ul>
    <li><a href="#incTabs01-1">サンプル1の1</a></li>
    <li><a href="#incTabs01-2">サンプル1の2</a></li>
    <li><a href="#incTabs01-3">サンプル1の3</a></li>
   </ul>
<div class="contents" id="incTabs01-1" style="background:#f5f5f5;padding:0px;margin:0px;width:800px;height:100%;overflow:auto;">
<pre><code class="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST1</title>
</head>
<body>
サンプル1の1    
</body>
</html>
</code></pre>
</div>

<div  class="contents" id="incTabs01-2" style="background:#f5f5f5;padding:0px;margin:0px;width:800px;height:100%;overflow:auto;">
<pre><code class="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST2</title>
</head>
<body>
サンプル1の2    
</body>
</html>
</code></pre>
</div>
<div  class="contents" id="incTabs01-3" style="background:#f5f5f5;padding:0px;margin:0px;width:800px;height:100%;overflow:auto;">
<pre><code class="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST3</title>
</head>
<body>
サンプル1の3    
</body>
</html>
</code></pre>
</div>

</DIV>

<h4>サンプル2</h4>
<DIV id="tabs02" style="width:800px" class="fancybox-bshadow contents">
  <ul>
    <li><a href="#incTabs02-1">サンプル2の1</a></li>
    <li><a href="#incTabs02-2">サンプル2の2</a></li>
    <li><a href="#incTabs02-3">サンプル2の3</a></li>
   </ul>
<div class="contents" id="incTabs02-1" style="background:#000000;padding:0px;margin:0px;width:800px;height:100%;overflow:auto;">
<pre><code class="html2">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST1</title>
</head>
<body>
サンプル2の1    
</body>
</html>
</code></pre>
</div>

<div  class="contents" id="incTabs02-2" style="background:#000000;padding:0px;margin:0px;width:800px;height:100%;overflow:auto;">
<pre><code class="html2">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST2</title>
</head>
<body>
サンプル2の2    
</body>
</html>
</code></pre>
</div>
<div  class="contents" id="incTabs02-3" style="background:#000000;padding:0px;margin:0px;width:800px;height:100%;overflow:auto;">
<pre><code class="html2">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST3</title>
</head>
<body>
サンプル2の3    
</body>
</html>
</code></pre>
</div>

</DIV>
<br>

<hr>
<table cellpadding=3 width="800" border=0>
<tr align=center>
<td valign=bottom align=center width="25%">
 <a href="http://urbanqee.com" target="_top">
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME">
 </a>
 <br>
  <font color=gray><small><small>最終更新日</small>:2021.3.3</font></small>
</td>
<td width="25%">
<a href="http://urbanqee.com/cgi-ssi/sendmails/sendmail.html" target="_blank" title="お問い合わせメール"><img src="http://urbanqee.com/img/mailtoicon.jpg" width="32" height="24" title="メール"></a> 

</td>
<td width="25%">
<a href="http://urbanqee.com/bbs/bbs/imgboard.cgi" target="_blank"><img src="http://urbanqee.com/img/bbs-memo_keijiban_45212-300x300.jpg" title="BBS 掲示板" width=64 height=32></a>

</td>
<td width="25%">
<a href="http://urbanqee.com/site/sitemap.html" target="_blank"><img src="http://urbanqee.com/img/sitemap-icon_128610_128.png" title="サイトマップ" width=32 height=32></a>

</td>
</tr>
</table>
<br>

<!-- 自動でコピーボタン追加するjavascript -->
<script>
        {
            /*
                * querySelector等で取得した要素(element)を渡すと、
                * その要素の文字列をクリップボードにコピーします。
                * ユーザーが事前に選択していた内容には影響を与えません。
                * 戻り値はコピーが成功したかどうか(true/false)
            */
            let copyToClipboard = (element) => {
                let ranges = [];
                let selection = window.getSelection();
                let range = document.createRange();
                let result = false;
                for (let i = 0; i < selection.rangeCount; i += 1) {
                    ranges[i] = selection.getRangeAt(i);
                }
                range.selectNodeContents(element);
                selection.removeAllRanges();
                selection.addRange(range);
                result = document.execCommand("copy");
                selection.removeAllRanges();
                for (let i = 0; i < ranges.length; i += 1) {
                    selection.addRange(ranges[i]);
                }
                return result;
            };

            let body = document.querySelector("body");
            let active = [];
            body.addEventListener("click", (e) => {
                try {
                    const target = e.target;
                    if (!target.classList.contains('copy-button')) return;

                    const pre = target.closest("pre");
                    let result = false;
                    if (active.indexOf(target) !== -1) return;
                    if (pre) {
                        result = copyToClipboard(pre);
                        target.innerText = (result ? "COPIED!" : "FAILED!");
                        target.classList.add((result ? "success" : "failed"));
                        active.push(target);
                        setTimeout(() => {
                            let index = active.indexOf(target);
                            target.className = "copy-button";
                            target.innerText = "COPY";
                            if (index !== -1) active.splice(index, 1);
                        }, 2000);
                    }
                } catch (e) {
                    //error 
                }
            });
            hljs.addPlugin({
                'after:highlightBlock': ({ block, result }) => {
                    result.value = `<button class="copy-button">COPY</button>${result.value}`;
                }
            });
        }
</script>

<!-- 行番号プラグイン highlightjs -->
<script>
    hljs.addPlugin({
        'after:highlightBlock': ({ block, result }) => {
            result.value = result.value.replace(/^/gm,'<span class="row-number"></span>');
        }
    });
</script>

</body>
</html>

1. highlight.jsおよびhighlight CSSの設置2. 自動でコピーボタン追加するjavascript3. CSSによるコピーボタンの装飾
4. <pre><code>タグコード5. これまでのHTMLまとめTOP





 最終更新日:2021. 3.21(初版)