Skip to main content

Using SyntaxHighlighter on Blogger

Hello, Bedrock Dev here.

Today I'm going to show you guys how to use SyntaxHighlighter on Blogger (Just like me!).

But, what is SyntaxHighlighter?
Simply, it is a code-highlighter for webs (and other). And this is an example of it.
So, let's get started adding this cool stuffs on your blog too.

  1. Backup your blog templates
You can backup your blog templates on your blogger main page.
On the right top of the Template page, you could find Backup / Restore Button.

Click it and save the template file where you can find later.

  2. Adding codes to your blog html
Now the real part begins.

Copy these codes to your clipboard.
And then, go back to the Template page, and click Edit HTML Button.

In your blog's template html, there will be </head> tag.
Scroll down and find the tag, and paste the code you copied.
--- Other Codes ---
[Paste the code here]
</head>
You should paste the code like this.
Then, save your template.
  3. Using SyntaxHighlighter in your posts
If you want to use SyntaxHighlighter in your post, go to post writing page.
And you can find "HTML" tab in upper left corner (next to "Compose" tab).
In HTML editing tab, you should add this code for SyntaxHighlighter.

--- Other Codes ---
<pre class="brush: xml(This could be changed)">
[Your code here]
</pre>

or,

--- Other Codes ---
<script class="syntaxhighlight brush: xml(This should be changed too)" type="syntaxhighlighter"><![CDATA[
[Your code here]
]]></script>

So what is the difference between them?
I will show you examples.

If you put the first code in HTML;

<pre class="brush :xml">
<this
    is="An"
    xml="example"/>
</pre>
This is the result. But if you put the second code;

<script class="syntaxhighlight brush: xml" type="syntaxhighlighter"><![CDATA[
<this
    is="An"
    xml="example"/>
]]></script>

This is the result.
Both codes was same. And its results are different! Why is it?
Have you notice the difference?
Second code, using the <pre> tag makes no line breaks. It's the difference.

So, this is the end of this tutorial, and visit SyntaxHighlighter's developer homepage.

Enjoy, Bedrock.
Labels:

Popular posts from this blog

About bitwise and bit shift operands

We are getting to know about Java's basics. Java has the bitwise operators. (which all other advanced programming language do either) There are several operands of them. Bitwise operators & opreator Performs an and calculation between data bits ^ opreator Performs an or calculation between data bits | opreator Performs a xor calculation between data bits ~ operator Inverts all data bits Bitshift operators << operator Shifts the bit pattern to the left >> operator Shifts the bit pattern to the right >>> operator Shifts the zero to the leftmost position These are the opreators. which is never used. Even the Java Documentation says these are "less commonly used". So just make sure you 'heard' of these exists. Check out more about these operators here: Official Java Documentation
Read more

About loop statements

Well this is a very basic thing. This is about loop statements on a few programming language. First one is the language Java . That can't be easier than that. Second, C++ . Absolutely not a copy of Java one Looks extremely same. On the next, python This is a lot different from other languages. Its mostly because of python's special  language syntax, not much different from the logic. And more about python's loop, at the first line, it says for i in range(0, 6): . It seems logically, it should be in range(0, 5) to make it repeat to 5. But in python, range(x, y)  counts from x to y + 1, so keep this in mind. And python, doesn't have do {} while ()  statement. So instead, from this stackoverflow answer , there is a somewhat similar code in python. See the line 10, the while loop is infinite loop and it will run the code print k for the first time of the loop. And then, it checks the statement if k>= 5: and determines whether break the ...
Read more

Presentation about Heap Sorting

This was a presentation for Sunrin High school Programming class. View the original zip file on Google Drive (Contains the sorting visualization tool and the C code) Thanks
Read more