Formatting code blocks in your post with prettyprint
In previous attempt, i was trying to make my code blocks to looks like a real code blocks in post manually. I do this in a few post and got sick of setting custom span class for each part and a custom css styling which is very tedious and not practical at all.
I thought of writing my own script. But what if someone else already write that ? Then i meet with prettyprint by google, a handy javaScript that automatically detect what kind of language for your code and make it pretty with syntax highlighting. Pretty print is very easy to use and it got about five styling to choose from.
Include prettify.js
To use prettyprint, i first have to include the javascript file into my
theme file. Simply copy and paste the following code before the
closing </body> tag.
Choose the styling
There are five different styling available to choose upon.
though some modification might be needed to suits your need:
1. default
2. desert
3. sunburst
4. son-of-obsidian
5. doxy
To look how each one of these styling looks click HERE.
Then to use these styling i simply add the name of the style of my choice at the end of my script src like this ..run_prettify.js?skin=son-of-obsidian". The code now look like this:
Using prettyprint on the block code
Now that i have properly include both prettyprint scripting and styling into my theme
i should test it in my post. To apply prettyprint into a blockcode, i add prettyprint class
to my pre or code tag which contain my code block.this is how it looks in the blogger post editor on compose/HTML view:
Adding Line numbering and line color
Up until now I only have my code prettified but not quite there yet. it doesn't have a line numbering or line colors yet. By default only "default" and "son-of-obsidian" styling comes with line color. Note that I am using the default styling. Now i'm adding linenums class to my opening pre tag which now look like this
Line number is not showing up !
As you follow along, you probably won't get the same output as the above code block. Don't panic, this is normal. There are two possible situation:
1. You only have line numbers for every fifth line
2. There are no line numbers at all
To put line numbering on all line of code, add this style just before the </body> tag:
There you have it. a beautiful code blocks.
Visit prettprint on github for sources and more info. For code optimization and make your themes load faster with prettyprint visit my post on Optimizing prettyprint to load your theme faster. To see how i use prettyprint on wordpress read my post on Using prettryprint on Wordpress.
I thought of writing my own script. But what if someone else already write that ? Then i meet with prettyprint by google, a handy javaScript that automatically detect what kind of language for your code and make it pretty with syntax highlighting. Pretty print is very easy to use and it got about five styling to choose from.
Include prettify.js
To use prettyprint, i first have to include the javascript file into my
theme file. Simply copy and paste the following code before the
closing </body> tag.
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
Choose the styling
There are five different styling available to choose upon.
though some modification might be needed to suits your need:
1. default
2. desert
3. sunburst
4. son-of-obsidian
5. doxy
To look how each one of these styling looks click HERE.
Then to use these styling i simply add the name of the style of my choice at the end of my script src like this ..run_prettify.js?skin=son-of-obsidian". The code now look like this:
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=son-of-obsidian"></script>
Using prettyprint on the block codeNow that i have properly include both prettyprint scripting and styling into my theme
i should test it in my post. To apply prettyprint into a blockcode, i add prettyprint class
to my pre or code tag which contain my code block.this is how it looks in the blogger post editor on compose/HTML view:
Tips: I write my code in compose view before adding both opening and closing pre tag with class="prettyprint" in HTML view.And now my code block look like this:
<pre class="prettyprint">
// my code goes here
<html><title>Some Title</title>
<head>
<link rel="stylesheet" type="text/css" href="prettify.css">
<script type="text/javascript" src="prettify.js"></script>
</head>
</html>
</pre>
Adding Line numbering and line color
Up until now I only have my code prettified but not quite there yet. it doesn't have a line numbering or line colors yet. By default only "default" and "son-of-obsidian" styling comes with line color. Note that I am using the default styling. Now i'm adding linenums class to my opening pre tag which now look like this
<pre class="prettyprint linenums">
// my code goes here
<html><title>Some Title</title>
Line number is not showing up !
As you follow along, you probably won't get the same output as the above code block. Don't panic, this is normal. There are two possible situation:
1. You only have line numbers for every fifth line
2. There are no line numbers at all
To put line numbering on all line of code, add this style just before the </body> tag:
<style type='text/css'>
li.L0, li.L1, li.L2, li.L3, li.L4,
li.L5, li.L6, li.L7, li.L8, li.L9 {
list-style-type: decimal !important;
}
</style>
For those that have no line numbers showing up, this is because you have apply
custom padding somewhere in your code. Nevermind that, just put this style code just before the </body> tag:
<style type='text/css'>
li.L0, li.L1, li.L2, li.L3, li.L4,
li.L5, li.L6, li.L7, li.L8, li.L9 {
list-style-position: inside;
list-style-type: decimal !important;
}
</style>
There you have it. a beautiful code blocks.
Visit prettprint on github for sources and more info. For code optimization and make your themes load faster with prettyprint visit my post on Optimizing prettyprint to load your theme faster. To see how i use prettyprint on wordpress read my post on Using prettryprint on Wordpress.
