A leader is one who knows the way, goes the way and shows the way

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 (6) -

  • Dan

    3/26/2014 6:23:14 AM |

    Excellent work!!!

  • Michelle J

    5/27/2014 12:32:30 PM |

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

  • Tina b

    6/16/2014 11:20:21 AM |

    Thanks I found this helpful

  • Buy lawn bag holder

    8/21/2014 12:03:13 AM |

    www.amazon.com/.../NET

    Together with my dnn web page, I have to skin the blog engine template .

  • Mr.Hung

    10/18/2014 1:39:41 AM |

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

  • Neuro3X

    10/20/2014 10:55:33 PM |

    Its a great pleasure reading your post.Its full of information I am looking for and I love to post a comment that "The content of your post is awesome" Great work. http://brainboostersup.com/

  • Avonlea Anti Aging Serum

    10/22/2014 8:51:41 PM |

    Only CosMedix is recommended by many dermatologists and remaining physicians for all sorts of wound desire issues. They use a enation titled Chirality, which is a technological way of isolating mortal molecules that our bodies demand, they separate them from inessential ingredients, and end up with only the molecules that person a advantageous scrap on our peel. This knowledge eliminates the risks of inauspicious reactions symmetrical tho' the net products are up to cardinal times solon compact than the most hot brands launch in specialty stores.   www.healthcaresup.com/avonlea-anti-aging-serum/

  • Velour Skin Care

    10/24/2014 12:17:37 AM |


    Axerophthol is a varied matter that is involved in the promotion of a merchandise of outlined body functions. Outside of welfare, exemplar and condition applications, Axerophthol is not often referred to by refer, as this become of vitamin A is usually but called 'vitamin A.' Notwithstanding, all forms of vitamin A know slightly contrary functions, and Retinol is no incompatible. This crisp gatherin http://www.healthcaresup.com/velour-skin-care/

Loading
All posts tagged 'Visual-Studio'

A leader is one who knows the way, goes the way and shows the way