Når du følger mine guides her, så vil du sikkert have set at jeg har nogle felter hvori der er kode stykker. I disse felter har jeg lavet så det er muligt at klikke på en knap og kopiere indholdet af feltet når man har musen henover feltet, eller på mobiler klikker på det. Du kan se et eksempel her:

<?php

                $frags = [];
                $commaChance = .33;
                while(true) {
                    $nwords = random_int(3, 15);
                    $words = self::random_values(self::$lorem, $nwords);
                    $frags[] = implode(' ', $words);
                    if(self::random_float() >= $commaChance) {
                        break;
                    }
                    $commaChance /= 2;
                }

Denne funktion vil jeg her dele med dig. Det kan benyttes på alle sider hvor du benytter <code> tags. I WordPress er det blot at vælge indlejret kode, så vil de være formateret som <code>.
Koden jeg vil dele med dig skal du indsætter på de sider du ønsker funktionen skal være aktiv på. Jeg har WordPress og vil benytte det alle steder, så jeg har lavet at den indsætter i wp_head som en action.

Hvis du bruger WordPress , så sørg for at du har et child theme hvis du følger dette nøjagtigt.

Sådan opsætter du kopier code

Åben filen functions.php i dit tema (child theme) og i bunden af denne fil indsætter du følgende:

add_action( "wp_head", "wcioCopyCode", 10 );

function wcioCopyCode() {
?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {

            // Button html used to display the button and remove the code from the copied text.
            var btnHtml= '<button class="wcioCopyCodeBtn">copy</button>';

            // When clicking the button, run this code
            $("code").on("click", ".wcioCopyCodeBtn", function() {

                // Setup some variables
                var $temp = $("<textarea>");
                var regex = /<br\s*[\/]?>/gi;

                // Replace <br> (newline in html) with \n (newline in text) to make sure multiple lines work.
                var encodedStr = $(this).parent().html().replace(regex, "\n").replace(btnHtml, "");

                // Add a tmp element to store the content (textarea to work with multiple line) and then select / copy content before removing it.
                $(this).parent().append($temp);
                $temp.html(encodedStr).select();
                document.execCommand("copy");
                $temp.remove();

                // Change the text to a green copied one.
                var self = this;
                self.innerHTML = '<span style="color:#3fb950">&#10003; copied</span>';

                // Change the button content back after X amount of seoncds.
                setTimeout(function() {
                    self.innerHTML = 'copy';
                }, 2000);

               });

            // Add the button html to all code tags
            jQuery( "code" ).append(  btnHtml );


        });
    </script>

    <style>
    .wcioCopyCodeBtn {
         opacity: 0;
         background-color: #282e33;
         border-color: #6e7681;
         border: 1px solid #ececec;
         padding: 6px 6px;
         border-radius: 5px;
         cursor: pointer;
         text-align: center;
         margin: 0px auto;
         display: inline-flex;
         margin-left:4px;
         vertical-align: middle;
         position: absolute;
         right: 5px;
         top: 5px;
         transition: opacity 1s;
    }
     .wcioCopyCodeBtn:hover {
         background-color: #282e33;
         border-color: #6e7681;
         border: 1px solid #ececec;
         color:#fff;
    }
     code:hover .wcioCopyCodeBtn {
         opacity:1;
    }
     code {
         position: relative;
         background: #ececec;
         border-radius: 5px;
         padding: 11px 10px 12px 4px !important;
         display: block;
    }
    </style>
<?php
}

Når du har indtast det, gemmer du filen og kigger på din side. Du burde nu ved “mouse over” eller klik på mobilen, kunne se en knap hvor der står “Copy” og når du klikker vil der stå “Copied”. Det følger i koden en smule CSS med (i <style>CSS</style> delen), den kan du eventuelt lægge i dit temas CSS fil i stedet for.

TIl forskel fra andre af de her COPY code funktioner, så er den jeg har fået bikset sammen her en der virker med linjeskift (ved brug af textarea) or samtidig ændre den ikke ting som <?php om til &x3C;?php som jeg har set andre gøre. Dette opnås ved at konvertere til html inden den indsætter i texarea feltet.

Du har nu givet dine besøgende mulighed for at kopiere kode eller andet du lægger i et code tag.