Tag Archives: CSS

Displaying Code on Blogger.com

UPDATE: Syntax Highlighter has been updated. Please check the site for the updated process. This post is now historical.

I just moved my blog to Blogger.com. I wanted to be able to post code and I previously had Code Syntax Highlighter working. It is great because when viewed on a device that does not support HTML well (like some RSS feed readers) the code is just surrounded in a Pre tag and does not end up with a lot of HTML syntax around it. When displayed on the web site it looks well formatted. It didn’t take much to get it working on Blogger. You just need to add some script tags and a link to your style sheet. You will need to store these on another web server as Blogger does not allow you to upload files except pictures. I chose to put the script tag references in a “HTML/JavaScript” gadget. That way I can change my template and reduce the amount of code I need to adapt in the template to get the syntax highlighting setup. I went to the “Layout” tab then “Page Elements”. I added a new “HTML/JavaScript” Gadget and I enter the following html

<script class="javascript" src="http://YourAddress.com/js/shCore.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushCSharp.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushCpp.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushCss.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushJScript.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushRuby.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushVb.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushPython.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushXml.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code',true,false,false,1,false);
</script>

I Still needed the CSS sheets for the highlighting. I couldn’t find any way to get it to work without updating the template so I added the line below just after the <Head> tag.

<link href='http://YourAddress.com/css/syntaxhighlighter.css' rel='stylesheet' type='text/css'/>

I am using windows live writer and there are some challenges with the Pre tags. If you just go to the HTML and paste any HTML text the browser still interprets it. I first paste it into the  web layout or normal view then go to the HTML code view and surround the test in the pre tags. For example, the code above looks like this in live writer HTML view:

<pre class="html" name="code">&lt;link href='http://YourAddress.com/css/syntaxhighlighter.css' rel='stylesheet' type='text/css'/&gt;</pre>

I made some changes to the default CSS sheet. I started off with the CSS that Scott Hanselman uses but I made it look more like Visual Studio by removing the darker line numbering section and the alternate line darkening. Just personal presence.

Here is a problem I found about wrapping. I didn’t like how it wrapped the text. This causes gaps in line numbers and because it does not honor the indentions it’s harder to follow the code. I noticed also that when you post one line that goes beyond the width of the box the height of the box does not resize when it adds the scroll bar over the text (IE6 and 7). There is no way to see the text. I added 15 pixels to the bottom. It is still annoying that it turns on the vertical scroll bar. The alternative it to turn on scrolling all the time and the box is sized correctly and the vertical scroll bar never highlights. The down side is that it is always there just grayed out.

The code syntax Highlighter supports C#, VB, HTML, XML, Ruby and more.  Post your comments below to tell me if you like it or if you have an other suggestions on how best to post code.



vvvvvv

My Pre tags disappeared from DotNetNuke (DNN)

* Update, I have moved my blog to Orchard running on Azure after several years on Blogger.com*

Since this is a “Technical” blog I expect to be showing a lot of code. One of the best ways I have seen is done by Scott Hanselman. He uses Pre tags and the Code Syntax Highlighter java library to add CSS styles to the words. He then uses CSS sheets to add color. It even adds the line numbering on the side. I stole the code (As far as I can see it’s free) and put it on my DotNetNuke (DNN) site I am using for the blog. It looked fantastic… wait, what looks wrong… It’s missing the indentions… and the extra line spaces.

I had to dig a little deeper. I edited the post and sure enough in the source view of the FCK editor there were no indentions or spaces. I put them back in and posted it and they disappeared again. I edited the post again and toggled between source and standard view on the FCK editor and the spaces and indentions disappeared each time.

Since it’s better to search for someone else’s solution than to debug on your own I searched and found this bug report for the FCK editor. They had a newer version so I put it in my site (after making a copy of the existing code). Voila, now when I toggle between source and standard views the formatting stays. So cool. Now I post it back and … what the???

They’re gone. I double checked and the FCK editor is working. I pulled up fiddler and sure enough the page was sending the data with the spaces to the server but they weren’t coming back down. Just to see if it was a blog module thing or a wider concern I tried it in the Text/HTML module and the results were the same. I even checked the database and sure enough the spaces were there so somewhere on the way to the client they were getting stripped.

Most likely DNN has some code to validate input and it is editing it out. This was probably a security concern going a bit too far. I could get the source code for DNN and walk through and find out what HTML editing they are doing on inputs. I thought I would post this blog first then maybe the DNN guys could use this for the investigation.

I had more trouble with the Pre tag while writing the blog. Whenever I post pre tag with the <> around it the returning code looks fine on the screen but when I edit the post things get moved around. I took a look at fiddler again and it looks like the text being sent down to the FCK editor is UTF8 encoded but anywhere I put in text that had to be encoded is not escaped. It looks like FCK editor is having to interpret the encoded data without enough information to determine what was originally encode and what was not.

Boy what a mess. I tried several things. I finally settled on a work around where I put the HTML markup in for the indentions and the extra lines into the pre tags and it seems to survive all the manipulations and even goes through multiple edits. It’s a pain to do it by hand. Now I have to make a decision about automating the work around or digging deeper to fix the root cause. The right thing for the community would be to fix the root cause. What would you do next?