KANAYO AUSTIN KANE KANAYO AUSTIN KANE - 7 months ago 28
Javascript Question

Div with multiple text color

Please I want to know how this works just like the stackoverflow. When codes are being displayed, the text display in multiple colors just like in a text editor app.

<form action="myForm.php" id="my_form" method="post">
<input type="text" name="user_name" id="user_name" />
<input type="email" name="email" id="email" />
<input type="password" id="password" name="password" />
<input type="submit" name="submit" id="submit" />
</form>


Please I want to know how its been done. Is it an application added to the site or just coding. If it's a bulky process please I will appreciate helpful clues on how it works but if it's a short process please I need a better explanation

Here, I just screenshot this question and you can see what I meanenter image description here

Answer

It's done using javascript. I recommend this one https://highlightjs.org/ in "usage" page there is a quick start guide.

Good luck.

--- UPDATE

Here is a simple example how to use it:

Add the highlighterjs in your page
<script src="highlighter.pack.js"></script>

Then initialize the plugin
<script>hljs.initHighlightingOnLoad();</script>

Now, in everywhere you want highlighter to highlight your code, just:

<pre>
    <code class="html">
        <form action="myForm.php" id="my_form" method="post">
            <input type="text" name="user_name"  id="user_name" />
            <input type="email" name="email" id="email" />
            <input type="password" id="password" name="password" />
            <input type="submit" name="submit" id="submit" />
        </form>
    </code>
</pre>

The result will be a pretty highlighted code!