Home Web Design CSS CSS Pre Tag Dark Background With Select All Feature | Dark Code...

CSS Pre Tag Dark Background With Select All Feature | Dark Code Style

November 8, 2019

4354

How we can style pre tag for providing codes using HTML CSS JS? Solution: See this CSS Pre Tag Dark Background With Select All Feature, Dark Code Style.

Previously I have shared stylish blockquote design, but this program is for stylish pre tag. Basically, sometimes we have to put a few lines of codes on our website then we use the HTML pre tag. WordPress has a different text style when we use pre tag, but code looks pretty in a dark background. We can style and create that type of design using CSS and JS.

Today you will learn to create Dark Code Style Design. Basically, there is some pre tags section with customized style. The pre tag section contains a sidebar on left for showing the code name like HTML, CSS, JS, etc and the whole section has a dark background with colorful code‘s text. And there are 4 types of code with a fferent color.

So, Today I am sharing CSS Pre Tag Dark Background With Select All Feature. There is a select all codes feature, you can select all the codes by double click on the mouse. That feature is created using jQuery otherwise all style and customizing are based on CSS. You can use is your website as well when you have to share codes.

If you are thinking now how this dark styled code section actually is, then see the preview given below.

Preview Of Dark Code Theme Style

See this video preview to getting an idea of how this dark code theme looks like.

https://webdevtrick.com/wp-content/uploads/code-dark-background.mp4?_=1

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

CSS Pre Tag Dark Background Source Code

Before sharing source code, let’s talk about it. First I have created a main div and placed 4 sections of pre tags inside it. I have created 4 pre tags for four different code sections, and inside the all pre tag I have placed a similar class and a unique class for identity. Also in the HTML file, I have linked files like jQuery and local files like CSS, JS.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. For showing the code names I have placed a label inside all codes like HTML, CSS, JS, etc. Now using CSS I have styled that element for a better look. And changed the background and text color for creating a cool code theme.

jQuery handling here only the selecting feature. When you will double click inside a pre tag then all content will select automatically, you just have to copy. I have used JS addEventListener command for creating the select function (info). Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Simple Pre Code Dark Background</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div id='wrapper'>
<pre class='code html-code'><label>HTML</label><code>&lt;div&gt; A Simple Box &lt;/div&gt;</code></pre>

<pre class='code css-code'><label>CSS</label><code>div {
  width:20px;
  height:28px;
  color:#fff;
  font-size:28px;
  padding:11px 15px;
  border-radius:5px;
  background:#14ADE5;
}</code></pre>

<pre class='code javascript-code'><label>JS</label><code>&lt;div onclick="myFunction()"&gt;Post&lt;/div&gt;

&lt;script&gt;
function myFunction() {
    document.write(5 + 6);
}
&lt;/script&gt;</code></pre>

<pre class='code jquery-code'><label>Jquery</label><code>$(document).ready(function{
 jQuery.cssRule(".post", "display", "block");
});</code></pre>
<div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Simple Pre Code Dark Background</title>

</head>

<body>

<pre class='code html-code'><label>HTML</label><code><div> A Simple Box </div></code></pre>

<pre class='code css-code'><label>CSS</label><code>div {

width:20px;

height:28px;

color:#fff;

font-size:28px;

padding:11px 15px;

border-radius:5px;

background:#14ADE5;

}</code></pre>

function myFunction() {

document.write(5 + 6);

}

</script></code></pre>

<pre class='code jquery-code'><label>Jquery</label><code>$(document).ready(function{

jQuery.cssRule(".post", "display", "block");

});</code></pre>

<div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
body {
  background:#eee;
  padding:0;
  margin:0;
}
#wrapper {
  padding:5%;
  margin:0 auto;
}
pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}
pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}
pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}
pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}
pre::after {
    content: "double click to select";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}
pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.css-code code {
    color: #ff4242;
}

pre.html-code code {
    color: #00ca02;
}

pre.javascript-code code {
    color: #ff8000;
}

pre.jquery-code code {
    color: #1da1f2;
}
@media (max-width: 750px) {
    pre::after {
        content: '';
    }
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

body {

background:#eee;

padding:0;

margin:0;

}

#wrapper {

padding:5%;

margin:0 auto;

}

pre {

background: #333;

white-space: pre;

word-wrap: break-word;

overflow: auto;

}

pre.code {

margin: 20px 25px;

border-radius: 4px;

border: 1px solid #292929;

position: relative;

}

pre.code label {

font-family: sans-serif;

font-weight: bold;

font-size: 13px;

color: #ddd;

position: absolute;

left: 1px;

top: 15px;

text-align: center;

width: 60px;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

pointer-events: none;

}

pre.code code {

font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;

display: block;

margin: 0 0 0 60px;

padding: 15px 16px 14px;

border-left: 1px solid #555;

overflow-x: auto;

font-size: 13px;

line-height: 19px;

color: #ddd;

}

pre::after {

content: "double click to select";

padding: 0;

width: auto;

height: auto;

position: absolute;

right: 18px;

top: 14px;

font-size: 12px;

color: #ddd;

line-height: 20px;

overflow: hidden;

-webkit-backface-visibility: hidden;

transition: all 0.3s ease;

}

pre:hover::after {

opacity: 0;

visibility: visible;

}

pre.css-code code {

color: #ff4242;

}

pre.html-code code {

color: #00ca02;

}

pre.javascript-code code {

color: #ff8000;

}

pre.jquery-code code {

color: #1da1f2;

}

@media (max-width: 750px) {

pre::after {

content: '';

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}

// Code By Webdevtrick ( https://webdevtrick.com )

$('i[rel="pre"]').replaceWith(function() {

return $('<pre><code>' + $(this).html() + '</code></pre>');

});

var pres = document.querySelectorAll('pre,kbd,blockquote');

for (var i = 0; i < pres.length; i++) {

pres[i].addEventListener("dblclick", function () {

var selection = getSelection();

var range = document.createRange();

range.selectNodeContents(this);

selection.removeAllRanges();

selection.addRange(range);

}, false);

}

That’s It. Now you have successfully created CSS Pre Tag Dark Background With Select All Feature, Dark Code Style. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.