Friday, November 21, 2008
Source code webification

If you have to show your source code in a web browser, the simplest way is to use the html <PRE> tags and customize the tag's style with CSS. However, PREs don't always print well and sometimes you just want to make your code indent nicely using the universally acceptatble non-breaking space tags.

This little applet takes the manual copy&pasting out of such conversions.

You press the "Get Source" button to load a *.vb file, then press the "Webify" button and in a second you're told that the converted text is on your clipboard ready to be pasted into any html texteditor.

...and here's how it looks in the browser...

The code is very simple. Just create a new WinForms project and on the form add three buttons (butGetSource, butWebify and butClose) and a textbox (txtWebCoder). To make things nice, set the textbox to anchor all sides and to show both scrollbars.

Now switch to codeview and paste in the following event routines:

Private Sub butWebify_Click(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles butWebify.Click

        Dim sb As New System.Text.StringBuilder
        Dim s As String = txtWebCoder.Text
        Dim iEnd, iFoundAt As Integer
        iFoundAt = InStr(iEnd + 1, s, vbCr)
        Do
            sb.Append(AddPadChars(s.Substring(iEnd, iFoundAt - iEnd)))
            iEnd = iFoundAt + 1
            iFoundAt = InStr(iEnd + 1, s, vbCr)
        Loop Until iFoundAt = 0

        Clipboard.SetDataObject(sb.ToString)

        MsgBox("Webified string is now on the clipboard")
    End Sub

    Private Function AddPadChars(ByVal Value As String) As String

        Dim i As Integer
        Value = Value.TrimEnd
        Value = Value.Replace("<", "&lt;")
        Value = Value.Replace(">", "&gt;")
        'note the spaces before and aftger the following ampersand
        'so that the previous replaces don't get doubled-up
        Value = Value.Replace(" & ", " &amp; ")
        If Value.Length = 0 Then Return "<br>" & vbCrLf
        Dim sb As New System.Text.StringBuilder("<br>")
        For i = 0 To Value.Length
            If Value.Substring(i, 1) = " " Then
                sb.Append("&nbsp;")
            Else
                Exit For
            End If
        Next
        sb.Append(Value.Substring(i, Value.Length - i))
        
        'tack on a crlf just to make it pretty in the text editor
        Return sb.ToString & vbCrLf

    End Function

    Private Sub butGetSource_Click(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles butGetSource.Click

        Dim oFileOpen As New OpenFileDialog
        With oFileOpen
            .Filter = "VB source files|*.vb"
            If .ShowDialog = DialogResult.OK Then
                LoadTextBox(.FileName)
            End If
        End With

    End Sub

    Private Sub LoadTextBox(ByVal fileName As String)

        Dim fs As IO.File
        Dim sr As IO.StreamReader
        Try
            sr = fs.OpenText(fileName)
            txtWebCoder.Text = sr.ReadToEnd
        Catch ex As Exception
            msgbox(ex.ToString)

        Finally
            If Not sr Is Nothing Then
                sr.Close()
                sr = Nothing
            End If
        End Try

    End Sub

    Private Sub butClose_Click(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles butClose.Click
        Me.Close()
    End Sub

If your target browser supports <DIV> tags and styles then you can use those to set a specific back color or font to the code block by just wrapping the stringbuilder result with inline style code, such as:

<div style="background-color=D3D3D3; font-family=Times; font-size=10pt">

We'll let you enhance the code for quickly cleaning for PRE tags. All you need to do is replace the brackets and ampersands and wrap the code in <PRE>s. Either set the PRE style in an external sheet or use something like this inline style code:

<pre style="overflow: auto !important;  overflow: scroll; width:80%; 
padding: 1em; margin: 1em; margin-left: 40px;color:Blue;
background-color:LightYellow; clear: both;" >

<PRE> tags and CSS are the best way to put code into web pages, they make copying your code simple for your readers and automatically provide scrollbars if the code goes too wide or long for the dedicated space, but sometimes PRE isn't an option. Falling back on traditional non-breaking spaces will nicely format your code for display in all browsers and this little applet will take the grunt work out of adding all those &nbsp; tags manually.

Hope it helps!

Robert Smith
Kirkland, WA

 

added to smithvoice february 2005


Print  

pagecomment
  Add Comment



Submit Comment
  View Ratings
50.00%0
40.00%0
30.00%0
20.00%0
10.00%0

Number of Comments 0 , Average of Ratings
  View Comments
No comment.


Privacy Statement  |  Terms Of Use
Copyright 2008 by Robert C. Smith