Professional code viewer for HTML codes

Table of content

If you have a blog that specializes in programming or coding, or even if you work as a freelance developer, you must show your projects to visitors, so I think you have already seen the code viewer on different sites, you provide codes to visitors and display them through a code viewer that allows copying the code in different ways.

professional code viewer

What is HTML Code Viewer?

Let's not go too far, if you've ever seen one of my blogging articles like this one for example “How to add contact us form to blogger blogs"? , when I write an article in which I submit codes, I use a professional code viewer of my own design, so I wanted to share it with you as always, so there is no need for every programmer or developer to monopolize codes for himself, the more I give, the more I gain.

What distinguishes my code viewer is that it is fully responsive to all screen sizes, and it supports the four main programming languages in web development: PHP, HTML, CSS, JAVASCRIPT, How does it support them? , It changes the text color automatically according to the type of code you add to it, all you have to do is change the name of the class in the "pre" element, and that's all.

How to use the HTML Code Viewer?

Now let's come to how to use the professional code viewer inside your pages and how to add more than one viewer on one page without having a conflict through the IDs.

It's simple to use, let's see how it works.

• first, you should add the HTML code of the viewer for each language like that:

HTML<pre class='code code-html'><label>HTML</label><code onclick="selectText(this.id);" id="html-1">
your code here
</code></pre>

CSS<pre class='code code-css'><label>CSS</label><code onclick="selectText(this.id);" id="css-1">
your style code here
</code>
</pre>

JS<pre class='code code-javascript'><label>JS</label><code onclick="selectText(this.id);" id="js-1">
your JAVASCRIPT code here
</code></pre>

Jquery<pre class='code code-jquery'><label>Jquery</label><code onclick="selectText(this.id);" id="jquery-1">
your jquery code here
</code></pre>

Now if you can see that we have an id for every code element, so You can add as many as you want from the HTML code viewer on one page, but on the condition that you change the identifier for each code element.

for example: id="html-1", id="html-2", id="html-3" and id="css-1", id="css-2", id="css-3" also other languages to.

• Now just add style code of the viewer to your page like below:

CSS#wrapper {
    padding:5%;
    margin:0 auto;
}
  pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
  }
  pre.code {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
  pre code{
    font:normal normal 12px/14px "Courier New",Courier,Monospace;
    color:black;
    display:block;
  }
  pre.code label {
	font-family: sans-serif;
	font-weight: normal;
	font-size: 13px;
	position: absolute;
	left: 5px;
	top: 16px;
	text-align: left;
	width: 40px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	pointer-events: none;
	font-weight: 600;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 40px;
    padding: 12px 16px 14px;
    border-left: 1px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 20px;
    color: #444;
}

pre::after {
    content: "click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}
  pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code,pre.code-css label{
    color: #0288d1;
}

pre.code-html code,pre.code-html label {
    color: #558b2f;
}

pre.code-javascript code,pre.code-javascript label {
    color: #f57c00;
}

pre.code-jquery code,pre.code-jquery label {
    color: #78909c;
}

• Then we will add j-query library and javascript function that is responsible for selecting the text inside code element when visitor click on code viewer text.

javascript<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
  async function selectText(id){
    var r = document.createRange();
    var w=document.getElementById(id);  
    r.selectNodeContents(w);  
    var sel=window.getSelection(); 
    sel.removeAllRanges(); 
    sel.addRange(r); 
}
</script>

That's all, now that you know how to use the code viewer, you can customize its appearance however you like.

How to customize the HTML Code Viewer?

You can customize the HTML Code Viewer by changing the style codes, if you want to change the colors of the code text then change the four style basses at the end of the style code.

CSSpre.code-css code,pre.code-css label{
    color: #0288d1;
}
pre.code-html code,pre.code-html label {
    color: #558b2f;
}
pre.code-javascript code,pre.code-javascript label {
    color: #f57c00;
}
pre.code-jquery code,pre.code-jquery label {
    color: #78909c;
}

And if you want to add more programming languages such as Python or C++ or any language you want just add a new style base at the end of the code like that:

CSSpre.code-python code,pre.code-python label{
    color: #40E0D0;
}

In the end, I hope you like this viewer and I think that you will undoubtedly need it, so if you encounter any problem using it, do not hesitate to leave it in a comment.

In God's safety.