change the font color inside the pre tag

Question

I have the following pre tag simulating js code

<pre class="text" id="text-two" style="margin-left: -29% !important;margin-top: -8.5%;">
                                    <h1> Deshboard codando mais um bot pra você!!</h1> 
                                function newBot(name, ID, Object){
                            this.name = name;
                        this.id = ID;
                                this.object = Object;
                                                return new Bot(this.name, this.id, this.object)
}</pre> 

putting this much space on the site it is right but wanted to put a different color on the H1 tag and function as I can change the color of the letter in a specific place within the pre??

Answer 1

Create a Highlight of syntax it’s not that simple, if you just want to focus on the color part of your code syntax and not how to do it, you can choose to use a ready lib for this task.

---

An example of lib to create the Highlight of the syntax is the highlightjs, below an example of its use:

<pre class="text" id="text-two">
	<h1> Deshboard codando mais um bot pra você!!</h1> 
  <code class="javascript">
	function newBot(name, ID, Object){
		this.name = name;
		this.id = ID;
		this.object = Object;
		return new Bot(this.name, this.id, this.object)
	}
  </code>
</pre>

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

Another lib is the prettify, but it is valid to mention that she no longer receives maintenance, see an example using it:

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

<h1> Deshboard codando mais um bot pra você!!</h1> 

<pre class="text prettyprint" id="text-two">
function newBot(name, ID, Object){
    this.name = name;
    this.id = ID;
    this.object = Object;
    return new Bot(this.name, this.id, this.object)
}
</pre>

There are many other libs for the same purpose, such as microlight, Rainbow, prismjs... In that question here in English they quote some others, it is worth taking a read.

---

Finally, to color one h1, there is no secret, you can choose to use a Inline CSS:

<h1 style="color: blue;"> Deshboard codando mais um bot pra você!!</h1>

A External CSS:

h1 {
  color: green;
}

<h1> Deshboard codando mais um bot pra você!!</h1>

Or a Internal CSS:

<style>
  h1 {
    color: red;
  }
</style>

<h1> Deshboard codando mais um bot pra você!!</h1>

Documentations:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

https://developer.mozilla.org/en-US/docs/Web/CSS

https://www.w3schools.com/howto/howto_syntax_highlight.asp