The today over lessson is about the Syntax HighLight For WebSites, Web development: I hope this lesson is useful for you.

Preview

We want THIS on your WebSite

<h1> Syntax Highlight - @theprogrammingexpert </h1>
/* Comments Work */
body {
	background: #ffaa00;
}
.class {
	color: #f60;
	background: #8a92ee;
}
for(let i = 0; i < 5; i++){
	console.log('@theprogrammingexpert');
}

HTML(Body)

<div class="container">
	<pre>
		<code class="html">
			&lt;h1&gt; Syntax Highlight - @theprogramingexpret &lt;/h1&gt;
		</code>	
	</pre>
	
	<pre>
		<code class="css">
		/* Comments Work */
		body {
		background: #ffaa00;
		}
		.class {
		color: #f60;
		background: #8a92ee;
		}
		</code>
	</pre>
	
	<pre>
		<code class="js">
			for(let i = 0; i < 5; i++){
				console.log('@theprogrammingexpert');
			}				
		</code>
	</pre>
</div>

HTML

This is the HTML Code to implement the Syntax Highlighter.

<!-- put htis to your <head> -->
<link rel="styleheet"href="https://cdnjs.cloudflare.com/ajax/
libs/highlight.js/10.1.0/styles/atom-cone-dark.min.css">
<!-- put htis to your <body> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/
highlight.min.js">
</script>
<script> hljs.iniHighlightlingOnLoad</script>

CSS

This is the CSS to align the code containers. It is not necessary for the highlighting.

* {
	margin: 0;
	padding: 0;
	border: none;
}

body {
	background: #121212;
	
	display:     : flex;
	align-items  : center;
	justify-items: center;
	height: 100vh;

	user-select: none;
}

.container {
	width: 100%;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
}

pre {
	width: 75%;
}

pre code {
	border-radius: 5px;
	user-select: text;
}

Challange

Hightlight the #HexCodes with a Border in the Color of the #HexCode

Result————->> #ffaa00

Result————->> #8a92ee

/*comments work */
body {
	background: #ffaa00;
}
.class {
	color: #f60;
	background: #8a92ee;
}