How to Add Code Syntax Highlighting to Blogger

Layout -> SIdebar(bottom) [+ Add a Gadget] -> HTML/JavaScript

Setting the Title as  "highlight".

And add the below code to Content.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css" integrity="sha512-3xLMEigMNYLDJLAgaGlDSxpGykyb+nQnJBzbkQy2a0gyVKL2ZpNOPIj1rD8IPFaJbwAgId/atho1+LBpWu5DhA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js" integrity="sha512-Pbb8o120v5/hN/a6LjF4N4Lxou+xYZ0QcVF8J6TWhBbHmctQWd8O6xTDmHpE/91OjPzCk4JRoiJsexHYg4SotQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.highlightAll();hljs.initLineNumbersOnLoad();</script>

The first two lines fetch the components of highlights.js from the cdnjs CDN. The third line the components of highlightjs-line-numbers.js from the cloudflare CDN. The fourth line calls the highlights and highlightjs-line-numbers librarys’s entry point.

You need  to switch to HTML vision when you editing blog. And add code as following:

<pre><code>#include &lt;iostream&gt;
int main()
{
	std::cout << "Hello World!" << std::endl;
	return 0;
}
</code></pre>

And you will it see on blog as following:

#include <iostream>
int main()
{
	std::cout << "Hello World!" << std::endl;
	return 0;
}

If you want to skip some of your code blocks (to leave them unnumbered), you can mark them with nohljsln class. For example:

<pre><code class="nohljsln">#include &lt;iostream&gt;
int main()
{
	std::cout << "Hello World!" << std::endl;
	return 0;
}
</code></pre>

And you will get code blocks without line numbers as following:

#include <iostream>
int main()
{
	std::cout << "Hello World!" << std::endl;
	return 0;
}

Supported Languages 

Highlight.js supports over 180 languages in the core library. There are also 3rd party language definitions available to support even more languages. You can find the full list of supported languages in SUPPORTED_LANGUAGES.md

Exampleof language cpp:

<pre><code class="language-cpp">#include &lt;iostream&gt;
int main()
{
	std::cout << "Hello World!" << std::endl;
	return 0;
}
</code></pre>

then:

#include <iostream>
int main()
{
	std::cout << "Hello World!" << std::endl;
	return 0;
}

 

References:

How to Add Code Syntax Highlighting to Blogger

Highlight.js

highlightjs-line-numbers.js