You can load the JavaScript and CSS for prettify via one URL:

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

Read document here Custom your css

<style>

/*<![CDATA[*/
.pln {
	color: #000
}

@media screen {
	.str {
		color: #080
	}

	.kwd {
		color: #008
	}

	.com {
		color: #800
	}

	.typ {
		color: #606
	}

	.lit {
		color: #066
	}

	.clo,
	.opn,
	.pun {
		color: #660
	}

	.tag {
		color: #008
	}

	.atn {
		color: #606
	}

	.atv {
		color: #080
	}

	.dec,
	.var {
		color: #606
	}

	.fun {
		color: red
	}
}

@media print,
projection {

	.kwd,
	.tag,
	.typ {
		font-weight: 700
	}

	.str {
		color: #060
	}

	.kwd {
		color: #006
	}

	.com {
		color: #600;
		font-style: italic
	}

	.typ {
		color: #404
	}

	.lit {
		color: #044
	}

	.clo,
	.opn,
	.pun {
		color: #440
	}

	.tag {
		color: #006
	}

	.atn {
		color: #404
	}

	.atv {
		color: #060
	}
}

pre.prettyprint {
	padding: 2px;
	border: 1px solid #888
}

ol.linenums {
	margin-top: 0;
	margin-bottom: 0
}

li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 {
	list-style-type: none
}

li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
	background: #eee
}

/*]]>*/
</style>

All code into pre converse to HTML entity

1. First of all, create the HTML structure as follows:

  <pre class="prettyprint lang-html">
<div class="form-title text-center">
 <h4>Login</h4>
</div>
</pre>
  

2. After that, add the following CSS styles to your project:

<pre class="prettyprint lang-css">
* {
	margin: 0;
	padding: 0;
}
</pre>

3. Finally, add the following JavaScript code and done.

<pre class="prettyprint lang-js">
<script>
document.querySelector("#toast-button-warning").addEventListener("click",()=>{
  new Toast("Toast Message " + count,ToastType.Warning,5000);
  count++;
})
</script>
</pre>