Formatting code for HTML display

Hi,

This is really a great link
http://www.manoli.net/csharpformat/


to format c# or VB.NET/VBA/VB code in HTML 4 format to display on the web

Example of VBA code formatting using manoli.net

if you go to this website http://www.manoli.net/csharpformat/ you will be able in a breeze to parse your VBA/C# code in HTML format. You can see at the bottom of this blog post an example.
To make it work in blogspot, you just need to go in Design -> Edit HTML and just after


<b:skin><![CDATA[/*

insert the following code. You can find http://www.manoli.net/csharpformat/format.aspx at the bottom of the page the link to the .css style sheet.

/* CSharp VB Formatting */

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: Consolas, "Courier New", Courier, Monospace;
background-color: #ffffff;
/*white-space: pre;*/
}

.csharpcode pre { margin: 0em; }

.csharpcode .rem { color: #008000; }

.csharpcode .kwrd { color: #0000ff; }

.csharpcode .str { color: #006080; }

.csharpcode .op { color: #0000c0; }

.csharpcode .preproc { color: #cc6633; }

.csharpcode .asp { background-color: #ffff00; }

.csharpcode .html { color: #800000; }

.csharpcode .attr { color: #ff0000; }

.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}

.csharpcode .lnum { color: #606060; }

This is how the VBA code looks like formatte using the manoli.net application.

Option Explicit

Dim WithEvents mQry As QueryTable
Dim mOldConnection As String


Private Sub mQry_AfterRefresh(ByVal Success As Boolean)
  mQry.Connection = mOldConnection
End Sub

Private Sub mQry_BeforeRefresh(Cancel As Boolean)
    Dim DBQ As String
    Dim DefaultDir As String
    Dim Connection As String
        
    'Store the original connectin before overwriting
    mOldConnection = mQry.Connection
    
    'Build a DSN connectionless connection using OLEDB
    DBQ = ThisWorkbook.FullName
    DefaultDir = ThisWorkbook.Path
    Connection = "ODBC;DBQ=" & DBQ & ";"
    Connection = Connection & "DefaultDir=" & DefaultDir & ";"
    
    'For Excel 2003
    'Connection = Connection & "Driver={Driver do Microsoft Excel(*.xls)};DriverId=790;FIL=excel 8.0;MaxBufferSize=2048;MaxScanRows=8;PageTimeout=5;ReadOnly=1;SafeTransactions=0;Threads=3;UserCommitSync=Yes;"
    
    'For Excel 2007
    Connection = Connection & "Driver={Microsoft Excel Driver (*.xls, *.xlsx, *.xlsm, *.xlsb)};DriverId=1046;FIL=excel 12.0;MaxBufferSize=2048;MaxScanRows=8;PageTimeout=5;ReadOnly=1;SafeTransactions=0;Threads=3;UserCommitSync=Yes;"
    
    'For Excel 2003 Just change the Connecton for listed query
    'If mQry.Name = "ReportCustomers" Or mQry.Name = "ReportOrdersAndCustomers" Then
    '   mQry.Connection = Connection
    'End If
    
    'For Excel 2007 Just change the Connecton for listed query
    If mQry.ListObject.Name = "ReportCustomers" Or mQry.ListObject.Name = "ReportOrdersAndCustomers" Then
       mQry.Connection = Connection
    End If
    
    
End Sub

HTML, CSS, Java script comments

While working on this blog, I have realized that there are at lest three different ways to insert a comment on a HTML web page.

1) HTML comments
<!--This is a comment. Comments are not displayed in the browser-->

The tricky part was to find out how to visualize this comment on the webpage, something that is not supposed to show-up! . The solutions comes down to this table

Result	Description	Entity Name	Entity Number
	non-breaking space	 	 
<	less than	&lt;	&#60;
>	greater than	&gt;	&#62;
&	ampersand	&amp;	&#38;
¢	cent	&cent;	&#162;
£	pound	&pound;	&#163;
¥	yen	&yen;	&#165;
€	euro	&euro;	&#8364;
§	section	&sect;	&#167;
©	copyright	&copy;	&#169;
®	registered trademark	&reg;	&#174;

As per above table, the HTML code necessary to show up HTML comments is

&lt;!-- This is a comment. Comments are not displayed in the browser --&gt;

Now the problem is- How do we visualize &lt; ?
In this case we just need to write in the HTML source page:
&amp;lt;



2) CSS comment
    /*  comment here */
3) Java script comment
    // Comment here

Here you can find few examples from my HTML template page

The Jave script is commented becasue is delimited by <!--    -->
Whithin the Jave script code you can find additional comments  //
In the CSS body element, you can find CSS comments /*   */

<-- 

 <script src='http://www.mathjax.org/MathJax/MathJax.js' type='text/javascript'>  //
  //  This script call is what gets MathJax loaded and running
  //
  MathJax.Hub.Config({
    jax: ["input/TeX","output/HTML-CSS"],    // input is TeX and output is HTML-CSS format
    extensions: ["tex2jax.js"],              // use the tex2jax preprocessor
    tex2jax: {
//    inlineMath: [['$','$'],['\\(','\\)']], // uncomment to use $...$ for inline math
      processEscapes: 1                      // set to 1 to allow \$ to produce a dollar sign
    }
  });


-->

body {

/*  background:$bgcolor; */ /* old code */
  background:#d0e4fe; /* new code */
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

How to customize blogspot

Thanks to a very good friend of mine, Claudio Corsetti, I managed to make some changes to my blog layout

1) To make the main column wider just do this
#outer-wrapper { width: 1000px;}
#main-wrapper { width: 750px;}
#sidebar-wrapper { width: 220px;}

The main-wrapper width added to the sidebar-wrapper one should always be less than the outer-wrapper width.
I made the out-wrapper width to be 1000px taking in to account that most of the current screen are more than 1000px wide


2) To justify the text of the main wrapper
#main-wrapper {text-align:justify;}

3) If you want to add formulas using images, this setting comes useful, it controls their vertical align

.post img, table.tr-caption-container {
vertical-align: -50%;
}

Note that for this blog I will not be using images for formulas but the MathML standard.

4) To make the main column background-colour different from the main page one, we need to change the css body element

With this instruction I change page background color
body { background: #d0e4fe; }

5) the code here makes the outer-wrapper colour adjustable through the custom Layout web interface
#outer-wrapper { background:$bgcolor;}

 
CSS Excerpt
-----------------------------------------------------------------------------------------------

body {
background:$bgcolor;
background:#d0e4fe;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

#outer-wrapper {

  background:$bgcolor; 
  width: 1000px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;

  }

#main-wrapper {
width: 750px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
text-align:justify;
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
vertical-align: -50%;
}