TekSmart: August 2018

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>

Check preview:

Above steps I used to add SyntaxHighlighter in Blogger, So you also try it again and add valuable comments.

Let's start first C++ program with "Hello World!"

#include <iostream>
using namespace std;

int main() 
{
    cout << "Hello World!";
    return 0;
}

Let's discuss code line by line.

First line includes library iostream, which is required to handle input-output. This library need to include because it is not part of standard C++ Library.
In second line used to add namescpase. namescpase is group/region of classes, public method and public variables. Here we are using std Library, means C++ standard library.
int main() is first function in C++, which will call first while execution. int is return type, which will return program status to outside world. Default return type in C++ is int. We can use void also.
cout is the object of class ostream. It uses operator overloading to print "Hello World!".
return 0 is status to other program from current program. 0 means successful execution. Non-zero value for error code.

Pages

How to use SyntaxHighlighter in Blogger ?

C++ "Hello World!" Program

Popular Posts

Report Abuse