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


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

1. highlight.jsおよびhighlight CSSの設置｜2. 自動でコピーボタン追加するjavascript｜3. 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を、上記１.の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でコピーボタンの装飾が行われます。

１ページ内に<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">サンプル１の１</a></li>
    <li><a href="#incTabs01-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 タグメニュー編の２つのサンプルを作成しました。



    
  
  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>サンプル１</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>
サンプル１    
</body>
</html>
</code></pre>
</div>

<h4>サンプル２</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>
サンプル２    
</body>
</html>
</code></pre>
</div>

<h4>サンプル３</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>
サンプル３    
</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>サンプル１</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>
サンプル１    
</body>
</html></code></pre>
</div>

<h4>サンプル２</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>
サンプル２    
</body>
</html></code></pre>
</div>

<h4>サンプル３</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>
サンプル３    
</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>サンプル１</h4>
<DIV id="tabs01" style="width:800px" class="fancybox-bshadow contents">
  <ul>
    <li><a href="#incTabs01-1">サンプル１の１</a></li>
    <li><a href="#incTabs01-2">サンプル１の２</a></li>
    <li><a href="#incTabs01-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>
サンプル１の１    
</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>
サンプル１の２    
</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>
サンプル１の３    
</body>
</html>
</code></pre>
</div>

</DIV>

<h4>サンプル２</h4>
<DIV id="tabs02" style="width:800px" class="fancybox-bshadow contents">
  <ul>
    <li><a href="#incTabs02-1">サンプル２の１</a></li>
    <li><a href="#incTabs02-2">サンプル２の２</a></li>
    <li><a href="#incTabs02-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>
サンプル２の１    
</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>
サンプル２の２    
</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>
サンプル２の３    
</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. 自動でコピーボタン追加するjavascript｜3. CSSによるコピーボタンの装飾
｜
4. <pre><code>タグコード｜5. これまでのHTMLまとめ｜TOP






             

             

             

             

             

             

             

             

             










 
 
 
 

  最終更新日：2021. 3.21（初版）