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-sql">

SELECT SQL_NO_CACHE DISTINCT

@var1 AS `val1`, @'val2', @global.'sql_mode',

1.1 AS `float_val`, .14 AS `another_float`, 0.09e3 AS `int_with_esp`,

0xFA5 AS `hex`, x'fa5' AS `hex2`, 0b101 AS `bin`, b'101' AS `bin2`,

DATE '1994-01-01' AS `sql_date`, { T "1994-01-01" } AS `odbc_date`,

'my string', _utf8'your string', N'her string',

TRUE, FALSE, UNKNOWN

FROM DUAL

-- space needed after '--'

# 1 line comment

/* multiline

comment! */

LIMIT 1 OFFSET 0;

</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/sql/sql.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: "sql",

theme: "dracula",

});

// Highlight

editor.markText(

{ line: 1, ch: 0 },

{ line: 1, ch: 100 },

{ className: "specific" }

);

editor.markText(

{ line: 4, ch: 0 },

{ line: 5, 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",

});

};