CODEWITHSUNDEEP
javascripthtmlcss
KANAYO AUGUSTIN UG
KANAYO AUGUSTIN UG

Reputation: 2178

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

Upvotes: 1

Views: 1911

Answers (2)

VaioWay
VaioWay

Reputation: 402

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:

Assuming you already added the dependencies files such as highlighjs.min.js and a code styling css file into your page, the code bellow should work perfectly.

The code block

<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>

Javascript to escape and highlight blocks

$(document).ready(function () {

    $("pre code").each(function () {
        // Escape HTML code
        $(this).html($("<p/>").text($(this).html()).html());

        // Apply highlighting to the block
        hljs.highlightBlock(this);
    });

});

The result will be a pretty highlighted code!

JSFiddle: https://jsfiddle.net/evandroprogram/5sgrmsd4/

Upvotes: 4

sameer manek
sameer manek

Reputation: 763

    <div class="container">
       <span style="background-color:red">this span is red</span>
       <span style="background-color:green">this span is green</span>
       <span style="background-color:blue">this span is blue</span>
    </div>

You can later set height and width properties of the div, can also make it more attractive using gradient effects.

Upvotes: 1

Related Questions