Code Beautifier

One of the challenges I've faced as a blogger is quickly reproducing code that looks good in HTML. I've tried a few different online code conversion sites, and even a C# library. But I never quite got the results I wanted. I found myself revising the HTML to fix up key words, comments, and operators that sometimes got missed, were the wrong color, or the wrong font. All that HTML editing was tedious and time consuming.

What I really wanted to do was copy my code from SSMS, Visual Studio, or the PowerShell ISE and paste it into my blog so I could spend less time as a web dev and more time writing. Since none of the other tools I found gave me the results I wanted, I wrote my own. The code for my little app is available on GitHub. (It's my first project, so if something is missing or wrong, let me know.) It was created with Visual Studio 2015--there's a compiled exe if you prefer that.

Using The App

Copy code from your development environment and paste it into the text field on the "Rich Text" tab. Here's a CREATE TABLE example from SSMS:

Now click the "Beautify" button. The app generates HTML and automatically copies it to the clipboard. If desired, you can view the HTML in the "Formatted HTML" tab. Now paste the code into your blogging platform or HTML editor to see the results.

USE [msdb]

/****** Object:  Table [dbo].[syssessions]    Script Date: 4/26/2017 11:11:26 PM ******/


IF NOT EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[syssessions]') AND type in (N'U'))
CREATE TABLE [dbo].[syssessions](
 [session_id] [int] IDENTITY(1,1) NOT NULL,
 [agent_start_date] [datetime] NOT NULL,
 [session_id] ASC

Here's another example, this time from the PowerShell ISE:

Again, I click the "Beautify" button. The app generates this HTML:

 # Open SQL connection
$conn = New-Object System.Data.SqlClient.SqlConnection
$conn.ConnectionString = "Server=.\SQLExpress;Database=master;Integrated Security=True"

# Get data via SqlDataReader
$cmd = New-Object System.Data.SqlClient.SqlCommand
$cmd.CommandText = "SELECT * FROM sys.objects"
$cmd.Connection = $conn

$dr = New-Object System.Data.SqlClient.SqlDataReader
$dr = $cmd.ExecuteReader()

while ($dr.Read())
    write-host $dr.GetString(0)

Notes and Observations

  • You may have noticed the line numbers from the PowerShell ISE were lost. I didn't bother addressing that--I didn't care. I suspect that's an easy enhancement. Maybe someday...
  • The generated HTML doesn't use any CSS. Real web devs would probably scoff, but that's ok.
  • Speaking of HTML, I usually wrap all my code samples in a <pre> tag, which is decorated with CSS.
  • The options tab is (hopefully) self-explanatory. The more options you check, the "larger" the generated HTML gets. I suspect I'll only ever use the "Color" option.
  • Font names could be problematic: the list of fonts available within your glorious OS is probably much larger than what your browser supports. Admittedly, I didn't do a lot of testing with this.
  • I tried coding a "Font size" option, but it was tricky. Font.Size in the .NET Framework doesn't translate too well to a browser. I didn't like the results, so I scrapped the idea.
  • I discovered background colors in the Visual Studio shell aren't included in the copy buffer when I paste into my app (or a Word document or an HTML-formatted email, etc.). I was able to paste from Visual Studio into a Word document, decorate text with a background color, and then copy/paste text from the Word document into the app.

  • Let me know if you find this tool useful. Or crappy. Or whatever. Comments welcome.

    UPDATE: September 21, 2017

    I've added three enhancements: a menu strip, root node options, and app configurations settings that allow you to save default values for the Options tab.

    Menu Strip

    This is a simple menu with File|Exit and Help|About. (The about window is new.)

    Root Node Options

    This allows you to wrap all of the encoded HTML into a "root" node. For instance, I enclose mine in a <pre> node. You can further specify node attributes. For instance class, style, or both, etc.

    App Configuration

    The "Code Beautifier.exe.config" file is a plain-text file consisting of XML data, as seen below. You can set default values (highlighted in yellow) for the Options tab by editing this file. Then, when you open the app, your desired settings will already be selected.

    <?xml version="1.0" encoding="utf-8" ?>
        <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.5.2" />
          Set these values as desired and the app will default to them when it is started.
        <!--HTML format options: Valid values are "true" or "false".  -->
            <add key="Color" value="true" />
            <add key="BackColor" value="false" />
            <add key="FontName " value="false" />
            <add key="FontBold" value="false" />
        <!--Root Node Options:-->
            <!--  Valid values are "true" or "false". -->
            <add key="EncloseHtmlInRootNode" value="true" />
            <!--  String values. 
                  Note the encoding of quotes in XML via &quot;
            <add key="RootNodeName" value="pre" />
            <!--add key="NodeAttributes" value="class=&quot;myCode&quot;" /-->
            <add key="NodeAttributes" value="class=&quot;myCode&quot; style=&quot;font-size: small; color: black; font-family: Consolas, &quot;Courier New&quot;, Courier, Monospace;&quot;" />