Code highlighter or syntax highlighter on website

Code highlighter or syntax highlighter

Today we will discuss how to set up a Code highlighter or syntax highlighter. Visit different websites can be seen that the HTML, JavaScript, PHP, etc code, is highlighted on the website that provides the website code. If we type any code on your website in a normal way, users are a problem and do not like to see it. So many users using code highlighter or syntax highlighter.

Code Highlight Code Syntax Highlighter can be used in different ways. But today we will use Code Highlight Code syntax highlighting between HTML and CSS. Because HTML and CSS do not take much time to load, the website has more speed. We see the use of syntax highlighting to use different javascript but the speed of the website is slow so that we will use code highlighting with HTML and CSS.

Code highlighter step

Follow each step below and add it to your website. Code highlighter or syntax highlighter, it will show a nice look of the website.
~~[ads id="midtop1"]~~
Write a post on the website, after writing the code where you want to use code highlighting, paste this code into the HTML mode.


<pre style="background-color: #464b4e; border-radius: 1px; box-sizing: border-box; color: #f3f3f3; font-size: 15px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; padding: 9.5px; word-break: break-all;">
 <code style="background: transparent; border-radius: 4px; border: none; box-sizing: border-box; color: lime; font-size: 14px; padding: 0px; white-space: pre-wrap;"> paste your code </code>
</pre>

This style example, live demo.

This style highlighting your Code. Use this code and make users happy by highlighting the code on your website. I hope you like this tutorial.

This way Bloggers use this code. It is very useful to Blogger.

If you use the Professional look, visit this website, GitHub

See Another post:

If you like this tutorial, Please subscribe to share, and don't forget to comment.