How to get Code Syntax Highlighting?

Topics: Themes
May 27, 2013 at 11:11 PM
Hi

I have BlogEngine version 2.8 and I noticed almost all the themes I tried do not have code syntax highlighting(C# is all I tired so far).

I been trying the ones on

Admin-> Customize -> Themes - Installed Themes.
Coordinator
May 28, 2013 at 12:43 AM
Highlighter now part of TinyMCE editor and standard theme shows how to add references to the theme header.
May 28, 2013 at 3:20 AM
rtur wrote:
Highlighter now part of TinyMCE editor and standard theme shows how to add references to the theme header.
Where does it show in the standard theme?
May 28, 2013 at 2:37 PM
Edited May 28, 2013 at 2:43 PM
Hi Chobo2,

You just add the following to the header section of any theme that currently does not have this:
<link href='<%# Page.ResolveUrl("~/editors/tiny_mce_3_5_8/plugins/syntaxhighlighter/styles/shCore.css") %>' rel="stylesheet" />
<link href='<%# Page.ResolveUrl("~/editors/tiny_mce_3_5_8/plugins/syntaxhighlighter/styles/shThemeDefault.css") %>' rel="stylesheet" />

So check the site.master in the themes folder first.

Look at the header section and if you don't see the following above then you will need to add it.

What I find the best way to write posts with lots of code to display is to use Windows Live Writer.

Then install in WLW the code highlighter of your choice and there are a couple of good ones :)


http://plugins.live.com/writer/tag/code?orderby=featured&page=1


You can download WLW here:

http://www.microsoft.com/en-us/download/details.aspx?id=8621




Hope this helps,

Brian Davis
May 28, 2013 at 5:12 PM
kbdavis07 wrote:
Hi Chobo2,

You just add the following to the header section of any theme that currently does not have this:
<link href='<%# Page.ResolveUrl("~/editors/tiny_mce_3_5_8/plugins/syntaxhighlighter/styles/shCore.css") %>' rel="stylesheet" />
<link href='<%# Page.ResolveUrl("~/editors/tiny_mce_3_5_8/plugins/syntaxhighlighter/styles/shThemeDefault.css") %>' rel="stylesheet" />

So check the site.master in the themes folder first.

Look at the header section and if you don't see the following above then you will need to add it.

What I find the best way to write posts with lots of code to display is to use Windows Live Writer.

Then install in WLW the code highlighter of your choice and there are a couple of good ones :)


http://plugins.live.com/writer/tag/code?orderby=featured&page=1


You can download WLW here:

http://www.microsoft.com/en-us/download/details.aspx?id=8621




Hope this helps,

Brian Davis
Hmm. I am using ElegantBlue theme right now. I found a site.cs file and tried adding your lines to it but that did not seem to work.

I then went to the site.master and tried adding the lines to that as well and it did not work.

Yes I discovered WLW myself but would like to have the code highlighting working through tinymce as well.

I still have to figure out how to by pass some of WLW limitations
  • The code highlighter I downloaded(not sure if it is the same one you linked too) does not work well with a mobile theme I choose. The code gets cut off and does not side scroll.
  • Editing existing posts seems like a bit of a pain. If you don't create the post through WLW then you got to do some sort of hacking to be able to get that post for editing.
  • Not sure how to backup WLW yet as stated in my above point it seems to remember what you write only on the one computer you are at. If you switch computer or your computer crashes you will lose all your saved posts and will have to hack each one to edit it.
Coordinator
May 28, 2013 at 9:36 PM
I've added an item to the FAQ on changes to syntax highlighter.
Jul 1, 2014 at 10:41 AM
Edited Jul 1, 2014 at 10:41 AM
dear rtur
i use blogengine 2.9 and i have installed patch but i don't have the syntax highlighter.
i think that it is because of editor which is not tiny mce.
what can i do to have syntax highlighter?
Jul 1, 2014 at 10:42 AM
i also tried to use your implemented extension for it but i encountered an error said that _option class s not defined or something like that
http://www.rtur.net/blog/post/2009/11/15/Syntax-Highlighter-extension-for-BlogEngine
Coordinator
Jul 1, 2014 at 3:43 PM
There are two parts to this, letting you enter code to format and formatting itself.
To enter code you'll need to do it manually by switching to "code" view and adding something like "pre class='brush: js'". Or use windows live writer with code plugin.
For formatting actually to work, check standard theme. It has styles and scripts added to master page header, copy it to your theme same way.

In site.master.cs:
private static Regex reg = new Regex(@"(?<=[^])\t{2,}|(?<=[>])\s{2,}(?=[<])|(?<=[>])\s{2,11}(?=[<])|(?=[\n])\s{2,}");
protected static string ShRoot = Utils.ApplicationRelativeWebRoot + "editors/tiny_mce_3_5_8/plugins/syntaxhighlighter/";
In site.master:
<link href="~/editors/tiny_mce_3_5_8/plugins/syntaxhighlighter/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="~/editors/tiny_mce_3_5_8/plugins/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%# ShRoot %>scripts/XRegExp.js"></script>
<script type="text/javascript" src="<%# ShRoot %>scripts/shCore.js"></script>
<script type="text/javascript" src="<%# ShRoot %>scripts/shAutoloader.js"></script>
<script type="text/javascript" src="<%# ShRoot %>shActivator.js"></script>