So far, I've been using the Courier monospace font to show code in my posts on Blogger. Jekyll has better support for syntax highlighting and a static site with Github pages is the "in thing" these days. Let's see how well Prettify works with Blogger for syntax highlighting.
Switch to the HTML view in the Blogger composer and add the following line after the <body> tag to include the Prettify library in your blog post.
A screenshot of how the HTML view looks when you add the above line:
That gives you the default skin. There are others available. For example, the following line applies the Sons-of-Obsidian skin instead of the default skin.
When you want to add code to your blog post, switch to the HTML view and copy-paste the following three lines.
After adding these lines in the HTML view, switch back to the Compose view. Now, you can edit the contents of syntax highlighted box (which shows only ...source code here... in the Compose view) and add the code that you wanted to. For example, you can get the following
by adding the <pre> tag as shown in the screenshot below.
If the code snippet is long and you want to limit the height of the snippet and force vertical scroll bars, use the following <pre> tag instead. The linenums in the class of the <pre> tag gives line numbers.
With this, you'll get a snippet like the one below.
The Prettify README is decent reference if you want to try something different.
While Prettify looks decent, Github Pages with a static site generator tool such as Jekyll has a couple of advantages over Blogger:
- Revision history with git
- More control. Unlikely though it is for Blogger to close shop, if you're using a static site generator, it'll be easier to switch the hosting provider should your current provider go out of business.
- Markdown is really nice and it's possible to edit Markdown in vim rather than in a rich text editor.
- Easy to use the same infrastructure to generate non-blog parts of the website such as a personal home page and pages for projects.
Maybe I should give Jekyll + Github Pages a try . . .
PS
I think I've found a better solution. The following online tools take code segments and throw out syntax highlighted HTML that can be copy-pasted into the blog post.
http://hilite.me/
http://pygments.org/
http://tohtml.com/
It's better than having a load-time dependency on google-code-prettify. But, it would be even better if the syntax highlighting was done entirely in javascript. Not like the method described in this post, rather through a static page that has javascript do syntax highlighting on the client side rather than on the server side. Yes, I'm rather paranoid about online services dying out.
Switch to the HTML view in the Blogger composer and add the following line after the <body> tag to include the Prettify library in your blog post.
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
A screenshot of how the HTML view looks when you add the above line:
That gives you the default skin. There are others available. For example, the following line applies the Sons-of-Obsidian skin instead of the default skin.
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sons-of-obsidian"></script>
When you want to add code to your blog post, switch to the HTML view and copy-paste the following three lines.
<pre class="prettyprint" style="overflow-wrap: normal; overflow-x: auto; overflow: scroll;"> ...source code here... </pre>
After adding these lines in the HTML view, switch back to the Compose view. Now, you can edit the contents of syntax highlighted box (which shows only ...source code here... in the Compose view) and add the code that you wanted to. For example, you can get the following
int main()
{
return 0; // always return successful
}
by adding the <pre> tag as shown in the screenshot below.
If the code snippet is long and you want to limit the height of the snippet and force vertical scroll bars, use the following <pre> tag instead. The linenums in the class of the <pre> tag gives line numbers.
<pre class="prettyprint linenums" style="height: 20em; overflow-wrap: normal; overflow-x: auto; overflow: scroll;"> ...source code here... </pre>
With this, you'll get a snippet like the one below.
#include <stdio.h>
int factorial(int n); // forward declaration
int main()
{
int i;
for(i = 0; i < 5; i++)
{
printf("factorial(%d) = %d\n", i, factorial(i));
}
return 0;
}
int factorial(int n)
{
if(n <= 0)
{
return 1; // factorial(0) == 1
}
else
{
return n * factorial(n-1);
}
}
The Prettify README is decent reference if you want to try something different.
While Prettify looks decent, Github Pages with a static site generator tool such as Jekyll has a couple of advantages over Blogger:
- Revision history with git
- More control. Unlikely though it is for Blogger to close shop, if you're using a static site generator, it'll be easier to switch the hosting provider should your current provider go out of business.
- Markdown is really nice and it's possible to edit Markdown in vim rather than in a rich text editor.
- Easy to use the same infrastructure to generate non-blog parts of the website such as a personal home page and pages for projects.
Maybe I should give Jekyll + Github Pages a try . . .
PS
I think I've found a better solution. The following online tools take code segments and throw out syntax highlighted HTML that can be copy-pasted into the blog post.
http://hilite.me/
http://pygments.org/
http://tohtml.com/
It's better than having a load-time dependency on google-code-prettify. But, it would be even better if the syntax highlighting was done entirely in javascript. Not like the method described in this post, rather through a static page that has javascript do syntax highlighting on the client side rather than on the server side. Yes, I'm rather paranoid about online services dying out.
So grateful to the INK for ALL designers that released the functionality to export documentation that I can use directly with my static site generator: http://bit.ly/2ECXoDa
ReplyDelete