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>

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>

© Manajmnt code

Share to :

☷✎