rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.css"

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/theme/dracula.min.css"

rel="stylesheet"

href="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/code-block-highlighted-and-copyable.css"

<div id="solution-block" class="block">

<textarea id="code-1" class="language-javascript" readonly>

function randomFunction() {

const randomNumber = Math.floor(Math.random() * 10) + 1;

if (randomNumber <= 5) {

console.log("Performing Functionality A");

} else {

console.log("Performing Functionality B");

}

}

randomFunction();

</textarea>

<button class="copy-button" onclick="handleClick1('code-1')">

<svg

width="20"

height="20"

x="0"

y="0"

viewBox="0 0 32 32"

style="enable-background: new 0 0 512 512"

xml:space="preserve"

class=""

>

<g>

<path

d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"

fill="#a6b8e6"

opacity="1"

data-original="#000000"

class=""

></path>

</g>

</svg>

</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/mode/javascript/javascript.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>

document.addEventListener("readystatechange", (event) => {

if (event.target.readyState === "complete") {

onLoad1();

}

});

function onLoad1() {

const editor = CodeMirror.fromTextArea(document.getElementById("code-1"), {

lineNumbers: true,

mode: "javascript",

theme: "dracula",

});

// -------> Highlight <-----------

editor.markText(

{ line: 1, ch: 8 },

{ line: 1, ch: 20 },

{ className: "specific" }

);

editor.markText(

{ line: 3, ch: 0 },

{ line: 7, ch: 100 },

{ className: "specific" }

);

editor.markText(

{ line: 10, ch: 0 },

{ line: 10, ch: 100 },

{ className: "specific" }

);

}

// Button handler

const handleClick1 = (codeBlock) => {

const textarea = document.getElementById(codeBlock);

const copiedText = textarea.value;

navigator.clipboard.writeText(copiedText);

Notiflix.Notify.Success("Copied to clipboard!", {

timeout: 2000,

width: "260px",

position: "center-top",

textColor: "#ff5549",

});

};