Displaying code in a webpage poses certain challenges. The main being preventing the browser from treating it as something to be rendered, the second being making it appealing and easy to follow.
Most languages can be displayed in your html by enclosing the text in <pre>tags</pre>. The pre tag prevents any escaping or whitespace alteration (for the most part).
Here is some Xslt inside some pre tags. I use a macro and my RabidEmbed umbraco package to insert these, but they could as well be pasted into my WYSIWYG editor.
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- // Output will be near identical copy of input Xml -->
<xsl:output method="xml" indent="yes"/>
<!-- // Match all attributes and nodes that aren't the root node -->
<xsl:template match="@* | child::node()">
<!-- // Copy the passed element. . . -->
<xsl:copy>
<!-- // . . .and all of its attributes -->
<xsl:copy-of select="@*"/>
<!-- // . . .apply appropriate template to all children -->
<xsl:apply-templates/>
</xsl:copy>
</xsl:template>
<!-- // Change these elements in this manner when performing the copy -->
<xsl:template match="OrdinalDay">
<!-- // We know this element won't have attributes or children to copy -->
<xsl:copy>
<!-- // Just add one to the value-->
<xsl:value-of select=". + 1"/>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
Now, how do we get it to show up colorized like in Visual Studio? Well, the way I do it is using Manoli's code formatting tool, along with including some styles in my site css. This gives us:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- // Output will be near identical copy of input Xml -->
<xsl:output method="xml" indent="yes"/>
<!-- // Match all attributes and nodes that aren't the root node -->
<xsl:template match="@* | child::node()">
<!-- // Copy the passed element. . . -->
<xsl:copy>
<!-- // . . .and all of its attributes -->
<xsl:copy-of select="@*"/>
<!-- // . . .apply appropriate template to all children -->
<xsl:apply-templates/>
</xsl:copy>
</xsl:template>
<!-- // Change these elements in this manner when performing the copy -->
<xsl:template match="OrdinalDay">
<!-- // We know this element won't have attributes or children to copy -->
<xsl:copy>
<!-- // Just add one to the value-->
<xsl:value-of select=". + 1"/>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
Pretty cool. Most browsers can adjust font size with Ctrl+'+' and Ctrl+'-', to make the text bigger, which I styled small to discourage line runover.
