1
How do I, so when someone types an html tag, in my online editor, javascript sets a color for that tag ? An example would be:
< html>
//Essa tag teria sua cor mudada por uma função
function Tag(){
//A função tag ao ser chamada iria setar uma cor
}
0
I recommend the javascript library Highlight.js (open-source):
Follow an example using Highlight.js for javascript and css themed atelier-Forest-dark:
//Função que inicializa o highlight.js para personalização das cores do código
hljs.initHighlightingOnLoad();<link rel="stylesheet" href="http://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atelier-forest-dark.min.css">
<script src="http://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
Exemplo estilo para códigos <strong>javascript</strong>:
<pre>
<code class="javascript">function funcaoTeste(block, cls) {
try {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
` class="${cls}"`;
} catch (e) {
/* comentário: captura da exceção */
}
}
</code>
</pre>
Exemplo estilo para códigos <strong>css</strong>:
<pre>
<code class="css">@font-face {
font-family: Chunkfive; src: url('Chunkfive.otf');
}
body, .textoUsuario {
color: #F0F0F0; background: #600;
font-family: Chunkfive, sans;
}
@import url(estilo.css);
@media print {
a[href^=http]::after {
content: attr(href)
}
}
</code>
</pre>Full documentation: http://highlightjs.readthedocs.io/en/latest/
Examples using several languages: https://highlightjs.org/static/demo/
Highlight.js project source code: https://github.com/highlightjs/highlight.js
Available styles: http://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/Styles/
0
It is possible to do this by the attribute contenteditable="true" in a div, for example.
Browser other questions tagged javascript html
You are not signed in. Login or sign up in order to post.
There’s a lot of stuff ready right now to do this. I think the name of it is hightlighter
– Wallace Maxters
Take a look at this link
– Pedro Augusto