Vashon Software

Site
Web

You are here >

Blogolita

Styling Code in your DotNetNuke Blogs

Jul 19

Written by:
7/19/2009 2:59 PM

Interested in easily showing off code in your DNN blog — without writing custom CSS styles?

Solution 1:

Use the numerous free plug-ins for Microsoft’s Live Writer:

My current favorite is Source Code Formatter from Amer Gerzic (listed in Live Writer as “Source Code…”) includes the most flexible options for custom colors, selected text and more and includes source code:

  1: Imports DotNetNuke.Entities.Tabs
  2: Namespace DotNetNuke.Common.Utilities
  3:     Partial Class SiteMap
  4:         Inherits Framework.PageBase
  5:         Const SITEMAP_PRIORITY As String = "0.5"
  6:         Const SITEMAP_MAXURLS As Integer = 50000
  7:         Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
  8:             Try
  9:                 Response.ContentType = "text/xml"
 10:             Catch exc As Exception
 11:             End Try
 12:         End Sub
 13:         End If  ' Error!
 14:     End Class
 15: End Namespace

CodeSnippet from Leo Vildosola supports Visual Basic (used below), C# and a number of other syntaxes - but not yet VB.Net. There are a variety of options for formatting alternative lines, embedding styles, and so on:

   1: Imports DotNetNuke.Entities.Tabs   2: Namespace DotNetNuke.Common.Utilities   3:     Partial Class SiteMap   4:         Inherits Framework.PageBase   5:         Const SITEMAP_PRIORITY As String = "0.5"   6:         Const SITEMAP_MAXURLS As Integer = 50000   7:         Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load   8:             Try   9:                 Response.ContentType = "text/xml"  10:             Catch exc As Exception  11:             End Try  12:         End Sub  13:         End If  ' Error!  14:     End Class  15: End Namespace

Lavernock Enterprise’s Paste as Visual Studio Code provided a good set of options but requires the source to come from Visual Studio:
Code Snippet
Imports DotNetNuke.Entities.Tabs
Namespace DotNetNuke.Common.Utilities
    Partial Class SiteMap
        Inherits Framework.PageBase
        Const SITEMAP_PRIORITY As String = "0.5"
        Const SITEMAP_MAXURLS As Integer = 50000
        Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Try
                Response.ContentType = "text/xml"
            Catch exc As Exception
            End Try
        End Sub
        End If  ' Error!
    End Class
End Namespace
Insert Code for Windows Live Writer by Omar, uses Jean-Claude Manoli’s C# formatting library: This shows up in Live Writer’s Insert menu as simply “Code…”.

   1:  Imports DotNetNuke.Entities.Tabs

   2:  Namespace DotNetNuke.Common.Utilities

   3:      Partial Class SiteMap

   4:          Inherits Framework.PageBase

   5:          Const SITEMAP_PRIORITY As String = "0.5"

   6:          Const SITEMAP_MAXURLS As Integer = 50000

   7:          Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

   8:              Try

   9:                  Response.ContentType = "text/xml"

  10:              Catch exc As Exception

  11:              End Try

  12:          End Sub

  13:          End If  ' Error!

  14:      End Class

  15:  End Namespace

Rich Editor for Windows Live Writer from Nicko Satria Utama handles C# and VB.NET, but without much formatting control:
Imports DotNetNuke.Entities.Tabs

Namespace DotNetNuke.Common.Utilities

    Partial Class SiteMap

        Inherits Framework.PageBase

        Const SITEMAP_PRIORITY As String = "0.5"

        Const SITEMAP_MAXURLS As Integer = 50000

        Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

            Try

                Response.ContentType = "text/xml"

            Catch exc As Exception

            End Try

        End Sub

        End If ' Error!

    End Class

End Namespace
Paste from Visual Studio, from Douglas Stockwell (listed in Live Writer as “from Visual Studio…”) offers no options, and also requires the code to come from Visual Studio:
Imports DotNetNuke.Entities.Tabs
NamespaceDotNetNuke.Common.Utilities
    Partial ClassSiteMap
        Inherits Framework.PageBase
        Const SITEMAP_PRIORITY As String = "0.5"
        Const SITEMAP_MAXURLS As Integer = 50000
        Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Try
                Response.ContentType = "text/xml"
            Catch exc As Exception
            End Try
        End Sub
        End If ' Error!
    End Class
End Namespace
Syntax Highlighter Plugin from Barry also apparently uses Alex Gorbatchev’s SyntaxHighlighter library – but doesn’t properly install it or embed the javascript:
Imports DotNetNuke.Entities.Tabs
Namespace DotNetNuke.Common.Utilities
    Partial Class SiteMap
        Inherits Framework.PageBase
        Const SITEMAP_PRIORITY As String = "0.5"
        Const SITEMAP_MAXURLS As Integer = 50000
        Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Try
                Response.ContentType = "text/xml"
            Catch exc As Exception
            End Try
        End Sub
        End If ' Error!
    End Class
End Namespace

Insert Tag Snippet from Coskun Sunali, a Microsoft MVP, just wraps the code with <code> and <pre>, so doesn’t do any syntax highlighting:

      Imports DotNetNuke.Entities.Tabs
Namespace DotNetNuke.Common.Utilities
    Partial Class SiteMap
        Inherits Framework.PageBase
        Const SITEMAP_PRIORITY As String = "0.5"
        Const SITEMAP_MAXURLS As Integer = 50000
        Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Try
                Response.ContentType = "text/xml"
            Catch exc As Exception
            End Try
        End Sub
        End If  ' Error!
    End Class
End Namespace

BlogMyCode VS2005 PlugIn from Tamir actually works from Visual Studio (select some code and right-click to auto-create a blog entry in Live Writer) – however won’t work if you have Visual Studio 2008 or 2010 installed, so I wasn’t able to test.
Insert Source Code Snippet from Code Past (Tamir) doesn’t know that the latest copy of Live Writer 2009 is installed, so fails to install. It also apparently requires that the source be copied from Visual Studio.

Synatx Higlighter [sic] 2.0 for Windows Live Writer by Prabir takes advantage of SyntaxHighlighter for Windows Live Writer, but many exposed features (line numbering, backgrounds) are unwritten, hence disabled:

Imports DotNetNuke.Entities.Tabs
Namespace DotNetNuke.Common.Utilities
    Partial Class SiteMap
        Inherits Framework.PageBase
        Const SITEMAP_PRIORITY As String = "0.5"
        Const SITEMAP_MAXURLS As Integer = 50000
        Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Try
                Response.ContentType = "text/xml"
            Catch exc As Exception
            End Try
        End Sub
        End If  ' Error!
    End Class
End Namespace

Solution 2:

Code Prettify for Windows Live Writer only attaches <pre class="prettyprint"> & </pre> around the code already copied to your clipboard,so doesn’t bloat your code with embedded style definitions, but does require you:

Download two files from Google and put them on your server in a location they can be read to pick up the styles. (I put them into the js directory at the root of the DNN site, as done for the next solution below too.)
Include the script and stylesheets in the <head/> section of your site’s default.aspx document (you will need to make sure the css and js file are on your server, and adjust the paths in the script and link tag)
```
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
```
Add onload="prettyPrint()" to your site’s default.aspx body tag.
Manually modify the stylesheet to get the coloring you prefer.

Imports DotNetNuke.Entities.Tabs
Namespace DotNetNuke.Common.Utilities
    Partial Class SiteMap
        Inherits Framework.PageBase
        Const SITEMAP_PRIORITY As String = "0.5"
        Const SITEMAP_MAXURLS As Integer = 50000
        Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Try
                Response.ContentType = "text/xml"
            Catch exc As Exception
            End Try
        End Sub
        End If  ' Error!
    End Class
End Namespace

Solution 3:

Though a bit more work to set up, Alex Gorbatchev’s SyntaxHighlighter can deliver nice results too:

Part A: Making the styles available on your DNN site

Download the latest version and extract the zip file.
Copy all the files from the resulting scripts directory, and merge all these files directly into your DNN site’s js directory:
Add the following references to the <head> section of the default.aspx file at the root of the portal or site:

  1: <script type="text/javascript" src="/js/shCore.js"></script> 
  2: <script type="text/javascript" src="/js/shLegacy.js"></script> 
  3: <script type="text/javascript" src="/js/shBrushCSharp.js"></script>
  4: <script type="text/javascript" src="/js/shBrushvB.js"></script>
  5: <script type="text/javascript" src="/js/shBrushSql.js"></script>
  6: <script type="text/javascript" src="/js/shBrushXml.js"></script> 
  7: <link rel="stylesheet" type="text/css" href="/js/SyntaxHighlighter.css"></link> 
  8: <link type="text/css" rel="stylesheet" href="/js/shCore.css"  />
  9: <link type="text/css" rel="stylesheet" href="/js/shThemeDefault.css"  /> 
 10: <script type="text/javascript">  
 11:     SyntaxHighlighter.config.clipboardSwf = '/js/clipboard.swf';
 12:     SyntaxHighlighter.all();  
 13:     dp.SyntaxHighlighter.HighlightAll('code');   
 14: </script>
 15: </head>

Thanks to a variety of sources for this second solution:
   http://alexgorbatchev.com/wiki/SyntaxHighlighter
   http://www.pchenry.com/Home/tabid/36/EntryID/130/Default.aspx
   http://blog.threenine.co.uk/Blog/tabid/93/EntryId/15/How-To-Syntax-Highlighting-in-Code-Samples.aspx
   http://psykoptic.com/blog/post/2008/12/01/Code-Syntax-Highlight-Plugin-for-FCKeditor.aspx

Trackback Print

Tags:

Categories:

Location: Blogs Parent Separator

News and Updates

0 comment(s) so far...

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:

Security Code Enter the code shown above in the box below
Add Comment Cancel