Scrollbar With Code In It

HighLight JS

This is the tool this page usesed to format and display the code.

html-entities

A simple vscode extension for converting selected text to named html entities.

WebAtic

A site that has a tool for converting to named html entities


copy the code in the Html section and Paste it to the <Body> tag.

Html    Copy Text


copy the code in the CSS section and Paste it to the <Head> tag.

css    Copy Text 

        <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>


copy the code in the JS section and Paste it to just above the <body> tag.

JS    Copy Text 

        <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>    
        <script>hljs.highlightAll();</script>


Copy code to an new HTML file. If you create the \css\style.css and put the CSS code it would recoreate this pate.

Full HTML    Copy Text 


<!DOCTYPE html>
<html lang="en">
<head>
   
   <link rel="icon" type="image/ico" href="/Images/ICO construction.ico"></link>
   <link rel="shortcut icon" href="/Images/ICO construction.ico"></link>
   <link rel="apple-touch-icon" href="/Images/ICO construction.ico"></link>
   
   

   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link media="screen" rel="stylesheet" type="text/css" href="CSS\style.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/kimbie-dark.min.css">
   


   <title>Scroll Bar</title>
</head>

<body>
    <h2>Scrollbar With Code In It</h2>
    
    <div >       
        <a href="https://highlightjs.org">HighLight JS </a>
        <p>This is the tool this page usesed to format and display the code.</p>
    </div>        
    <div >       
        <a href="https://marketplace.visualstudio.com/items?itemName=christopherstyles.html-entities ">html-entities </a>
        <p>A simple vscode extension for converting selected text to named html entities.</p>
    </div>        
        <div >       
        <a href="https://webatic.com ">WebAtic </a>
    <p>A site that has a tool for converting to named html entities</p>
    </div>        
<br>
<!--▄▄▄▄▄▄HTML Section▄▄▄▄▄▄▄▄-->
<div class="descrip">
    copy the code in the Html section and Paste it to the &lt;Body&gt; tag.
    </div> <br>
<div class="Header_box">
    <div class="Header_text">
Html &nbsp;&nbsp;&nbsp;<a class="btn" href="#" onclick="CopyToClipboard('btn_html');return false;">Copy Text</a></div>
</div>
</div>
<div class="scrollbar"  id="btn_html">
    <pre ><code class="language-html" id="example1">

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

<br>
<br>
<!--▄▄▄▄▄▄CSS Section▄▄▄▄▄▄▄▄-->
<div class="descrip">
    copy the code in the CSS section and Paste it to the &lt;Head&gt; tag.
    </div> <br>
<div class="Header_box">
    <div class="Header_text">
css &nbsp;&nbsp;&nbsp;<a class="btn" href="#" onclick="CopyToClipboard('btn_css');return false;">Copy Text</a>
</div>
</div>
<div class="scrollbar"  id="btn_css">
    <pre ><code class="language-html" id="example1">
        &lt;script src=&quot;https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js&quot;&gt;&lt;/script&gt;    
    </code></pre>
</div>

<br>
<br>
<!--▄▄▄▄▄▄JS Section▄▄▄▄▄▄▄▄-->
<div class="descrip">
copy the code in the JS section and Paste it to just above the &lt;body&gt; tag.
</div> <br>
<div class="Header_box">
    <div class="Header_text">
JS &nbsp;&nbsp;&nbsp;<a class="btn" href="#" onclick="CopyToClipboard('btn_js');return false;">Copy Text</a>
</div>
</div>
<div class="scrollbar"  id="btn_js">
    <pre ><code class="language-html" id="example1">
        &lt;script src=&quot;https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js&quot;&gt;&lt;/script&gt;    
        &lt;script&gt;hljs.highlightAll();&lt;/script&gt;        
    </code></pre>
</div>
<br><br>

<!--▄▄▄▄▄▄Script Section▄▄▄▄▄▄▄▄-->
    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>    
    <script>hljs.highlightAll();</script>

    <script>
        function CopyToClipboard(id)
        {
        var r = document.createRange();
        r.selectNode(document.getElementById(id));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(r);
        document.execCommand('copy');
        window.getSelection().removeAllRanges();
        }
		</script>
   <body>
</html>


Copy this CSS to \css\stye.css. After you create the HTML file and copy the HTML ode this pageshould be recorated.

Full CSS    Copy Text 


:root {
    --text: hsl(9, 62%, 96%);
    --background: hsl(4, 68%, 5%);
    --primary: hsl(2, 65%, 72%);
    --secondary: hsl(3, 66%, 14%);
    --accent: hsl(2, 65%, 54%);
  }
*{
    font-family: Georgia, 'Times New Roman', Times, serif;
}

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 2rem;
    background-color: var(--background);
}

a{
    text-decoration: none;
    color: var(--accent);
    line-height: 2rem;
}

a.btn{
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    padding: .25rem;
    color: var(--text);
    background-color: var(--secondary);
    border: 3px  solid;
    border-color: var(--text);
    border-radius: .5rem;
}


h2{
    color: var(--text);
    font-size: 2.5rem;
    }


.scrollbar{
    background-color:var(--background);
max-height: 15rem;
width:100%;
overflow:auto;
border: 4px solid;
border-color: var(--text);
}
.Header_box{
    background-color: var(--primary);
    width:100%;
    border: 4px solid;
    border-color: var(--text);
}

.Header_text{
    font-size: 2rem; 
    font-weight: 600;
    color: var(--background);
    padding: .5rem;
    width:100%;
}

div.descrip{
    color: var(--background);
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: var(--text);
    border-radius: 1rem;
    border: .1rem solid;
    border-color: var(--primary);
    line-height: 2rem;
}