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

Asked

Viewed 507 times

2

A "picture" says more than many words is not true!? Then I invite you to see the:

Example

In this image we see some "tags" formatted in colors "red(red), brown(Maroon) and blue(Skyblue)"

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

See a code for example just below handmade:

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 that this is useful for writing articles and showing an excerpt of the 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, is totally the opposite of the concept of styling an element with CSS.

Doubt

How will I do this effect, from "image" to "code"?

javascript html css

  • Where do you want to apply your idea?

  • @What do you mean, Emanuelf? Note what says "[...] is useful for writing articles and showing an excerpt of the code in a highlighted and well presented way on the Site/Blog.", understood?

  • Now it’s clearer, so you want to create a field where tags are highlighted in different colors? Something you used here to exemplify your idea?

  • 1

    @Emanuelf That’s right, I like to create everything by hand and do not use HTML editors. So, it would be interesting and functional to create an external routine to pre-format small chunks within a DIV.

1 answer

1


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

There are several libraries available to perform this type of marking for you.

One of the most used is called hljs (Highlight.js).

Click on Execute 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>
<link rel="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><code class="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>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.