Add syntax highlighting to Blogengine.net 2.9 using CSS3 and jQuery

Accidents happen!!. That is what I was told by my previous host after they failed to recover my blog’s data from their SQL Server after it suffered a catastrophic failure. Considering this was the second time and I am not being interested in having the pleasure of experiencing another accident, I moved the blog to a different hosting provider.

With that comes the task of having to recreate all posts (I had performed some backup after the first “accident”). Since I was happy with Blogengine.Net prior to the data loss, I didn't see a reason to switch to a different blogging engine (that may not true as I considered writing my own engine in Mono and hosting it at home on a Linux server, I then changed my mind due to ISP’s EULA) .

I downloaded BE 2.9 then realized that the engine has gone through a major overhaul. There are some great and not so great changes:

Great things:

  1. Use of Angularjs
  2. HTML5 is heavily used
  3. CSS3 is used
  4. Mobile ready (using twitter bootstrap)

Not so great:

  1. TinyMCE editor not used (uses bootstrap-wysiwyg)
  2. syntaxhighlighter.js was removed from the engine

I can live with the new editor, its light weight and easy on the eyes. However, having no syntax highlighting in development driven blog made me realize how much I missed Sytaxhighter.js so I decided to crap my won using CSS3, jQuery and Visual Studio Productivity Power Tools.

These are steps taken to allow syntax highlighting as its shown on this blog:

  1. Downloaded VS.NET Power tools from Here
  2. Configured the tool to set a CSS class on the copied code (in VS.NET go to tools, Options, Productivity Power Tools)
  3. Add the following CSS3 into main.css in BE’s standard template (or whatever template you use). Note the use of !important here? we want to override whatever the default templates provide
    pre {
           border: 1px solid #367136;
           border-radius: 4px !important;
           counter-reset: line-numbering !important;
           height: auto;
           max-height: 500px;
           overflow: auto;
           padding: 10px 5px 5px;
           white-space: pre !important;
           word-break: normal !important;
           word-wrap: normal !important;
       }
     
           pre .line:before {
               /*CSS3 line numbering*/
               content: counter(line-numbering, decimal) !important;
               counter-increment: line-numbering !important;
               padding-right: 2em !important;
               text-align: right !important;
               width: 1.5em !important;
           }
     
       .linenum {
           background-color: #F1F1F1;
           border-right: 5px solid #6CE26C;
           color: #000000;
           display: inline-block;
           width: 2em !important;
       }
  4. In the master.master file of your template add the following jQuery snippet
    <script>
            $(function () {
                $("pre.code").html(function (index, html) {
                    return html.replace(/^(.*)$/mg, "<span class=\"linenum\"><span class=\"line\">$1</span></span>");
                });
            });
        </script>

That’s it, now you have syntax highlighting with line numbering without having to download an external JavaScript library.

Comments (4) -

Excellent work!!!

Was about to abandon BlogEngine.Net before finding this.
A blog without syntax highlighting is useless.

Thanks I found this helpful

Hi,
How add it to editor BlogEngine, I use edtor "summernote".
Thanks

Add comment