Showing posts with label Source Code Formatting. Show all posts
Showing posts with label Source Code Formatting. Show all posts

Friday, July 16, 2010

PRE Tag Internet Explorer Scrollbar Solution

<pre> tag is very useful for writing code. I use it all the time actually for posting C# code.
There is however a problem with Internet Explorer:
If the text is too long, and a horizontal scroll bar appears, it overlaps the bottom line.
You can find many solutions to this problem in this link, including scanning the document with JavaScript fixing all the pre tags.
My solution is a lot simpler.

Solution:
If you know that the text is too long and a horizontal scroll bar will appear, then add the following code at the bottom, just before the </pre> ending tag:

<!--[if IE]>

<![endif]-->

Explanation:
If the user is using Internet Explorer, then there will be an extra (empty) line inside the pre tag, and the horizontal scroll bar will overlap the empty line and not the original content.

Sunday, February 21, 2010

Add C# Code Formatter Widget To Your Blog

This widget formats all the C# code in your blog so it looks exactly like in Visual Studio.
It supports all the cases of string literals, comments, keywords and preprocessors. It has a huge list of all commonly used types, and it has some capability of learning new types (classes, enums, interfaces, structs) from your code.
Try it now online! - OR - Add it to your blog:
Note: the widget is for lazy people like me, if you want you can add the formatting script to your HTML Layout manually.

Here is a simple example:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace exp1
{
    class Program
    {
        public static void Main(string[] args)
        {
            Console.WriteLine("Hello, world!");
        }
    }
}

This is what the author sees when writing the post:
<pre formatcs="1">using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace exp1
{
    class Program
    {
        public static void Main(string[] args)
        {
            Console.WriteLine("Hello, world!");
        }
    }
}</pre>

So how does it work?
The script scans the page looking for <pre> elements with the attribute formatcs=1. Each element is then formatted as C# code.
The <pre> tag was chosen for a reason - if the user doesn't have JavaScript supported, then the <pre> tag is the best way to show code in a blog.

Here is a more advanced example:
[XmlRoot("Node")]
class MyNode<T> : MyBaseClass<T>
    where T : Dictionary<List<T>, int>, ISerializable
{
    MyNode MyNode = new SuperNode();
    
    /// <summary>   *
    /// comment2... *
    /// </summary>  *
    MyType1 foo(out MyType2 x)
    {
        x = MyType1.StaticFunction(@"c:\");
        Console.WriteLine(" aaaa \" \\\" \\\\");
        return new T();
    }
}
Note that these classes are being deduced by reading the code: MyNode, MyBaseClass, SuperNode, MyType1, MyType2.
Note that "T" is not styled as a type, exactly as in Visual Studio.

OK OK! I'm convinced! How do I add this widget to my blog?
Simply by clicking here:
- Or - You can use the online version here:
formatmycsharpcode.blogspot.com

For more information refer to this wiki page.

Saturday, February 20, 2010

Use JavaScript to Format C# Code to HTML

To format C# code online go here.
To add it as a widget go to this post.
To get the most recent source code go here.

Example of how it looks:
using System.Xml.Serialization;

namespace foo
{
    public partial class Form1<AAA> : Form
    {
        void bar<T, R, L>(int k, Form1 f)
            where T : ISerializable
            where R : Dictionary<string, List<Form1>>, ISerializable
        {
            Form1 Form1 = new Form1();
        }
    }
}

I wrote a script in JavaScript to format C# Code.
I needed such a script because I didn't like the old way of copying the code to Microsoft Word, then to Blogger, and then looking for and removing all the <META> and <LINK> tags that Blogger doesn't accept.
Before I did that, I looked on the Internet, and I found this wonderful site: http://www.manoli.net/csharpformat
But it doesn't handle strings very well, and doesn't recognize types.

For example, the expression 'string path = @"c:\";' returns:
<span class="kwrd">string</span> path = @"c:\";
Which means the string is black instead of red.
About types, I think it's not supported at all.
I downloaded their source code and I found some useful things for my code.

I used more accurate regular expressions to identify strings:
// backslash slash before the end using @
string path = @"c:\";
// even number of backslashes means no backslash
string x = " \" \\\" \\\\";
/* support for multi line
   comments and strings
*/
string y = @" begin
                end";
/// <summary> This kind is also supported
/// </summary>

Formatting strings, comments and keywords is no big deal, but what about types?
Sometimes you don't know if something is a type or a variable, for example:
Something.DoIt();
(There is a way of telling the script that "Something" is a type, and it will be explained later)
It could be a field or a property called "Something", or it could be a class called "Something" and in that case "DoIt" would be a static function.
But sometimes you do know that something is a type, and it worth remembering it for the future:
class Something { } // here the script identifies "Something" as a type
Something.DoIt(); // here it uses the information from earlier

But what about "Application.DoEvents()" ?
In that case the script has a list of common types:
Application.DoEvents();

I compiled this list using this code:
static string GetAllTypes()
{
    string regex = "";
    foreach (Assembly asm in AppDomain.CurrentDomain.GetAssemblies())
    {
        foreach (Type type in asm.GetTypes())
        {
            string name = new Regex("(`.*)").Replace(type.Name, "");
            if (new Regex("^[A-Za-z0-9]+$").IsMatch(name))
            {
                regex += name + "|";
                Match match = new Regex("^(.+)Attribute$").Match(name);
                if (match.Success){
                    regex += match.Groups[1].Value + "|";
                }
            }
        }
    }
    return regex;
}

Sometimes the long list affects the loading time of the blog, so I have another manually written list that has the most commonly used types like: List, EventArgs, ...
Note that the shorter list doesn't necessarily mean the script wont recognize any types, that is because it learns the types from the code itself (as shown in the example above).

In order to use the script you need to write the following code:
<pre formatcs=1>
your code here
</pre>

If the script doesn't recognize a type from some reason, like in the in example of "Something.DoIt()" case, then you can instruct the script to recognize it by adding a new attribute called "types":
<pre formatcs=1 types="Something">
Something.DoIt();
</pre>
And the result:
Something.DoIt();
The types attribute accepts a list of type names, and it can be separated by comma, white space, anything.

The script can handle generics - means it doesn't paint it like in here:
class MyClass<T>
{
    List<T> x = new List<T>();
}

However, there might be cases where the class definition is missing, and then T might be mistaken for type:
x = new T();

Another issue with generics and more specifically with the "<" sign is that you have to write "&lt;", otherwise Blogger is going crazy adding all sorts of strange ending tags to the posts. This behavior is not caused by the script, but it does keep it from working correctly. I don't know how it behaves on other blogging sites, but I tested the script offline on my computer it works with normal "<" too.

I plan to make a gadget that adds this functionality to a blog. I will call it "C# Code Formatter".
But in the meantime the script can be used from here:
jscsharpformatter.googlecode.com

I added a new "HTML/JavaScript" gadget on the bottom of the page with the following code:
<script type="text/javascript" src="http://sites.google.com/site/ycouriel/files/csharp_formatter_normal.js">
</script>
<script type="text/javascript">
var howmany = findAndFormatCSharp();
document.write(howmany + " c# code elements were formatted");
</script>

Feedback is very welcome!