Code formatting?

Dec 22, 2008 at 9:22 PM
Edited Dec 22, 2008 at 9:23 PM
In the issue tracker it says code formatting is fixed, but I see no way to do it.
Coordinator
Dec 22, 2008 at 9:30 PM
The way you put blocks of code in a post is by using [code] blocks like this:

[code:c#]
string Test = "abc";
[/code]

I haven't used this a lot, but the code languages that appear available are:

c#
vb
js
html
xml
tsql
msh

I got these from CodeFormatter.cs under App_Code\Extensions\CodeFormatter.
Dec 23, 2008 at 9:02 AM
Sorry, how can I turn this feature on? Am I have to use raw HTML editor?
Coordinator
Dec 23, 2008 at 4:01 PM
First, on the Extensions tab in the control panel, make sure that the CodeFormatterExtension is Enabled.

When writing a post, you don't have to use the raw HTML editor for the code block.  The code block can be typed in the regular WYSIWYG editor.  Since the [ and ] characters in [code] are not special characters requiring encoding, if you do use the raw HTML edtior, you can type [code:c#] or [code:js], etc. as is without doing any manual encoding.
Dec 23, 2008 at 5:12 PM
Thank you, but I don't quite understand.
I type the following

Hello!

[code]

public void foo()

{

   return "hello!";
}

[/code]

the end of post.

and exactly the same see in the published entry.
HTML looks like
<p>
Hello!
</p>
<p>
[code]
</p>
<p>
public void foo()
</p>
<p>
{
</p>
<p>
&nbsp;&nbsp; return &quot;hello!&quot;;<br />
}
</p>
<p>
[/code]
</p>
<p>
the end of post.
</p>
so there is no code formating in this case.
But if I write
[code]

public void foo()

{

   return "hello!";
}

[/code]
in raw HTML mode, I get what needed.
So could you please provide complete example of how code formating can be used.
Thank you.
P.S. CodeFormatterExtension is enabled.

Coordinator
Dec 23, 2008 at 5:35 PM
The main thing you're missing is the language in the opening [code] tag.  This is required so the formatter knows what syntax/coloring rules to apply to the code.  So [code] alone isn't enough.  You'll need [code:c#] or [code:js] etc.  I also find that within the code block, it's better to hit Shift-Enter to produce <br/> tags instead of just hitting Enter alone which produces <p> tags which leads to extra top/bottom margins between each line of code.

The example below I typed without being in the raw HTML editor.  After typing it, if I switch to the raw HTML editor, here's what I get:

<p>
Hello
</p>
<p>
[code:c#]
</p>
<p>
public void foo()<br />
{<br />
&nbsp;&nbsp;  return &quot;hello&quot;;<br />
}
</p>
<p>
[/code]
</p>
<p>
the end of post. 
</p>
Coordinator
Dec 23, 2008 at 6:32 PM
On a separate, but related note, I noticed a problem with the CodeFormatter extension when posting [code] with Chrome or Safari.  With Chrome/Safari, the code in the [code] block gets formatted correctly with colors, but the [code:c#] opening tag and [/code] closing tag are also rendered.  Normally, these tags should be removed when rendered on the blog.  The problem is with these browsers, the content of the post is saved without any CR or LF characters.  In FF and IE, however, CR and LF characters are saved.  Example:

== CHROME / SAFARI ==
<content>&lt;p&gt;[code:c#]&lt;/p&gt;</content>

== FF / IE ==
<content>&lt;p&gt;
[code:c#]
&lt;/p&gt;
</content>

The Regex in the CodeFormatter that removes the opening and closing [code] tags assumes there are CR / LF characters.  These modified Regex's below take this into account, and allows for the CR / LF characters to be optional.  The only difference with these Regex's is I replaced all the \r\n with (?:\r\n)?

    private Regex codeBeginTagRegex = new Regex(@"(<p>(?:\r\n)?<div class=""code"">\n\[code:.*?\](\s|)(?:\r\n)?</p>(?:\r\n)?|<p>(?:\r\n)?<div class=""code"">\n\[code:.*?\](\s|)<br /><br /><br />)",
    RegexOptions.Compiled
    | RegexOptions.CultureInvariant
    | RegexOptions.IgnoreCase
    | RegexOptions.Singleline);
        
    /// Old regex\[/code\]
  private Regex codeEndTagRegex = new Regex(@"(<p>(?:\r\n)?\[/code\]</div>(\s|)(?:\r\n)?</p>(?:\r\n)?|<br /><br /><br />\[/code\]</div>(\s|)(?:\r\n)?</p>(?:\r\n)?)",
    RegexOptions.Compiled
    | RegexOptions.CultureInvariant
    | RegexOptions.IgnoreCase
    | RegexOptions.Singleline); 

I quickly tested this behavior in the latest version of tinyMCE which BE.NET is supposed to be getting soon (maybe in v1.5?).  The CR/LF characters no longer appear to be missing in Chrome/Safari in the latest version of tinyMCE.  So these modified Regex's above will probably not be necessary with the latest version of tinyMCE.  Although they can't hurt to keep and may be necessary if you're using a different editor that doesn't insert CR/LF characters (e.g. Live Writer, FckEditor, etc).
Coordinator
Dec 27, 2008 at 2:18 AM
The new version of tinyMCE was put into BE in changeset 23719.  It looks like the problem with the opening and closing [code] tags not being removed when rendered to the blog is now happening not just for Chrome/Safari, but also FF and IE.  This isn't a problem with tinyMCE, but with the CodeFormatter extension assuming CR/LF line breaks surround the opening/closing [code] tags.  I wrote this problem up in the Issue Tracker.

http://www.codeplex.com/blogengine/WorkItem/View.aspx?WorkItemId=8738