How to create html source code with syntax highlighting [no library]

In this code i will be share with you how to create html code editor with:

syntax hightligh;

button to run code in iframe;

button to copy to clipbord

you don't need library or any external source, just with Javascript

<script type='text/javascript'> //<![CDATA[ function syntaxHighlights() { var ca = document.getElementsByClassName("ediCm"); for(var i=0; i < ca.length; i++){ var data = ca[i].innerHTML; data = data.replace(/"(.*?)"/g, '<span class="code-str">"$1"</span>'); data = data.replace(/<(.*?)>/g, '<span class="code-elem"><$1></span>'); data = data.replace(/\/\* (.*?) \*\//g, '<span class="code-comment">/* $1 */</span>'); data = data.replace(/function(.*?) /g, '<span class="code-jsvar">function $1</span>'); data = data.replace(/:(.*?) /g, '<span class="code-cssref"> :$1</span>'); data = data.replace(/'(.*?)'/g, '<span class="code-str">'$1'</span>'); ca[i].innerHTML = data; } } window.addEventListener("load", syntaxHighlights); //]]> </script> <style> .code-str { color:#a11 }.code-elem{ color: #170; }.code-comment { color:#236e25; }.code-jsvar{color:#05a;}.code-cssref{color:#a11;} .code:focus-visible{outline:0} </style>
<script type='text/javascript'>
//<![CDATA[

function syntaxHighlights() {
var ca = document.getElementsByClassName("ediCm");
for(var i=0; i < ca.length; i++){
var data = ca[i].innerHTML;

data = data.replace(/"(.*?)"/g, '<span class="code-str">"$1"</span>');
data = data.replace(/<(.*?)>/g, '<span class="code-elem"><$1></span>');
data = data.replace(/\/\* (.*?) \*\//g, '<span class="code-comment">/* $1 */</span>');
data = data.replace(/function (.*?)/g, '<span class="code-jsvar">function $1</span>');
data = data.replace(/ :(.*?)/g, '<span class="code-cssref"> :$1class="code-elem"></span>');
data = data.replace(/'(.*?)'/g, '<span class="code-str">'$1'</span>');
ca[i].innerHTML = data;
}
}
window.addEventListener("load", syntaxHighlights);

//]]>
</script>
<style>
.code-str { color :#a11}.code-elem{ color :#170; }.code-comment { color :#236e25;}.code-jsvar{color :#05a;}.code-cssref{color:#a11;}
.code :focus-visible{outline:0}

</style>



Exemple

<style> .code-str { color :#0000ee;background :white} </style> <!--comment--> <h2>header </h2> <script> function syntaxHighlights() { /* Create a string object variable */ var name = 'Adam'; </script> <h2 id="h21" class="code-str" >Welcome Visitor</h2> <p>When in Rome, do as the Romans do.</p>

© 2025 Manajmnt code

Share to :

☷✎

Related

• Change image onclick on thumb using javascript #content img { min-width: 50px; } function changecolor(a){ document.getElementsByCl… Read More
• insert adsbygoogle in middle of text <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-… Read More
• How to keep input value if user change current page in bloggerto keep value if user open other link in current page you must be use text area tag to do this, look… Read More