How to Format Each HTML Tag with Its Attributes in Assorted Colors?

Question

How to Format Each HTML Tag with Its Attributes in Assorted Colors?

Navigation

#1 by (1 votes)

1

An "image" says more than many words is not true !? So I invite you to see the:

Example

link

In this image we see some "tags" formatted in the colors "red", "maroon" and "skyblue".

What I want with this is to do what an HTML editor program / software already does. That is, the whole process that highlights the tags.

Look at an example code just below done manually:

Code

function Tag()
{
// Faz alguma coisa para setar as cores

...

// Fim de rotina cores sortidas
}
Tag();

div.code 
{ 
border: thin solid silver; 
width:720px; 
height:390px; 
}

<div class="code">

<pre>

01 - &lt;!DOCTYPE html>
02 -
03 - &lt;html lang="en">
04 -	&lt;head>
05 -		&lt;meta charset="utf-8"/>
06 -		&lt;title>Centralizar DIV&lt;/title>
07 -		&lt;link href="centralizar.css" rel="stylesheet" type="text/css"/>
08 -	&lt;/head>
09 -	&lt;body>
10 -
11 -		&lt;div id="site">
12 -
13 -			&lt;h1>Edu??o superior na regi??o de camplinas&lt;/h1>
14 -
15 -			&lt;p>Resultado do Censo 2010 mostra o percentual da popula??o
16 -					das cidades da regi?o de Camplinas com forma??o superior.
17 -					Compara??o com a m?dia do estado de SP e nacional&lt;/p>
18 -
19 -			&lt;img src="grafico.jpg" alt="Gr?fico"/>
20 -
21 -		&lt;/div>
22 -
23 -	&lt;/body>
24 -
25 - &lt;/html>

</div>

We know this is useful for writing articles and showing a snippet of code in a prominent and well-presented way on the Site / Blog.

Reminder

I'm not looking to modify text colors, but rather the color of HTML tags, it's completely the reverse, unlike the concept of styling an element with CSS.

Doubt

How do I make this effect, from the "image" in the "code"?

javascript html css

asked by anonymous 29.07.2016 / 20:56

1 answer

input in PHP with the fields filled in Array generates error "Undefined offset"

score 1 · Accepted Answer

The name of this type of post-processing is code mark-up , or tagging .

There are several libraries available to make this type of markup for you.

One of the most commonly used is hljs (highlight.js) .

Click Run code snippet to see the following javascript example:

$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/languages/javascript.min.js"></script><pre><codeclass="javascript">
app.factory("callbackFactory", function ($log) {

        function registerCallBack(factoryInstance, collection, callback) {
            collection.push(callback);

            //$log.log(factoryInstance.moduleName + " observers: " + collection.length);

            if (factoryInstance.onSubscriberRegistrationCallback)
                factoryInstance.onSubscriberRegistrationCallback(callback);
        };
    };
</code></pre>