TekSmart: How to use SyntaxHighlighter in Blogger ?

If you are developer and want to share code with proper highlighting & syntax, then there is no proper solution to get it done on blogger. But we can try it out using below steps.

Below HTML code is showing how use Syntax Highlighter in HTML for C++ code.

<!DOCTYPE html>
<html>
<head>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.all();
</script>
<title>SyntaxHighlighter</title>
</head>
<body>
<pre class="brush: cpp">
#include <iostream>

int main()
{
std::cout<<"hello world!";
return 0;
}
</pre>
</body>
</html>

So create .html file with above code and open it in any browser. (I used Google chrome browser).

Output is :

But same code is not working with blogger, some modification required to do in code to make it work for blogger.

In above code using HTTP protocol, which is not working with blogger theme. You will get error message.

“Editing your theme so it mixes HTTP and HTTPS may affect the security and user experience of your blog when it is viewed over HTTPS”

So we need to use HTTPS protocol to make it work.

So create Google drive as file hosting server. Create folder in Google drive and add .css and .js file which are mention in above code. Change files access as public.

Right click on file -> share… ->Advance -> Who has access ->Public On Web->Done.

Now again Right click on file -> share…

Copy selected link.

e.g. https://drive.google.com/file/d/1JkhJ0kS84rXFcYzRwJDYnGYCGWk7gNS/view?usp=sharing

Copy file name e.g. 1JkhJ0kS84rXFcYzRwJDYnGYCGWk7gNS (String after https://drive.google.com/file/d/)

Place after link https://drive.google.com/uc?export=view&id=

e.g. https://drive.google.com/uc?export=view&id=1JkhJ0kS84rXFcYzRwJDYnGYCGWk7gNS

Replace this link with in above HTML code,

Now test html code again with browser. It should show same result.

Now Open Blogger Account. Click on Theme->HTML View

Copy code between <Head> and <title> tag from HTML file (which we created above) and paste before </head> tag.

Try to save theme. If error observed “Error parsing XML, line 2663, column 56: The reference to entity "id" must end with the ';' delimiter.” Then change & with & and save again.

Now create new post. Add below code

#include <iostream>

int main()

{

std::cout<<"hello world!";

return 0;

}

</pre>