In this tutorial, I'll show you how to integrate Syntax highlighter into your website. 

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

For more details, you can visit website

To install Prism you should download prism.css and prism.js, then add to your website as below

<!DOCTYPE html>
     <link href="themes/prism.css" rel="stylesheet" />
     <script src="prism.js"></script>

To play demo, you can add a simple css code as below. In this forum, i'm using Prism to highlight the syntax

<pre><code class="language-css">p { color: blue }</code></pre>

The second way, i would like to introduce to you is highlight.js. This is useful for syntax highlighting for the web site. You can download it directly at

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>

Add the snippet above to your website to initialize the highlighter syntax. This will find and highlight the code inside of <pre><code> tags. It will automatically detect the language. If automatic detection doesn’t work for you, you can specify the language in the class attribute.

<pre><code class="html">...</code></pre>