SyntaxHighlightingWithegXML - Revision history

Mholmes: /* Quick-and-Dirty Syntax Highlighting with */

2011-10-31T18:27:12Z

Quick-and-Dirty Syntax Highlighting with <egXML>

← Older revision		Revision as of 18:27, 31 October 2011
Line 8:		Line 8:
	The solution:		The solution:

	Mark up your code with the TEI element <egXML>, and use the fragments of XSLT and CSS code below to render the embedded XML into attractively-indented and coloured output.		Mark up your code with the specialist TEI element <egXML>, and use the fragments of XSLT and CSS code below to render the embedded XML into attractively-indented and coloured output.

	'''What is <egXML> and how do I use it?'''		'''What is <egXML> and how do I use it?'''
Line 32:		Line 32:

	Point taken, here it is: first CSS, then XSLT.		Point taken, here it is: first CSS, then XSLT.


	== CSS ==		== CSS ==

Mholmes: /* XSLT */

2011-10-31T16:46:18Z

XSLT

← Older revision		Revision as of 16:46, 31 October 2011
Line 93:		Line 93:

	<pre><nowiki>		<pre><nowiki>
	<!-- Handling of <egXML> elements in the TEI example namespace. -->		<!-- Handling of <egXML> elements in the TEI example namespace. -->
	<xsl:template match="teix:egXML">		<xsl:template match="teix:egXML">
	<pre class="teiCode">		<pre class="teiCode">
	<xsl:apply-templates/>		<xsl:apply-templates/>
	</pre>		</pre>
	</xsl:template>		</xsl:template>

	<!-- Escaping all tags and attributes within the teix (examples)		<!-- Escaping all tags and attributes within the teix (examples)
	namespace except for		namespace except for
	the containing egXML. -->		the containing egXML. -->
	<xsl:template match="teix:*[not(local-name(.) = 'egXML')]">		<xsl:template match="teix:*[not(local-name(.) = 'egXML')]">
	<!-- Indent based on the number of ancestor elements. -->		<!-- Indent based on the number of ancestor elements. -->
	<xsl:variable name="indent"><xsl:for-each		<xsl:variable name="indent"><xsl:for-each
	select="ancestor::teix:*"~~> <~~/xsl:for-each></xsl:variable>		select="ancestor::teix:*"> </xsl:for-each></xsl:variable>
	<!-- Indent before every opening tag if not inside a paragraph. -->		<!-- Indent before every opening tag if not inside a paragraph. -->
	<xsl:if test="not(ancestor::teix:p)"><xsl:value-of		<xsl:if test="not(ancestor::teix:p)"><xsl:value-of
	select="$indent"/></xsl:if>		select="$indent"/></xsl:if>
	<!-- Opening tag, including any attributes. -->		<!-- Opening tag, including any attributes. -->
	<span class="xmlTag"~~><<~~xsl:value-of		<span class="xmlTag"><<xsl:value-of
	select="name()"/></span><xsl:for-each select="@*"><span		select="name()"/></span><xsl:for-each select="@*"><span
	class="xmlAttName"><xsl:text~~> <~~/xsl:text><xsl:value-of		class="xmlAttName"><xsl:text> </xsl:text><xsl:value-of
	select="name()"/>=</span><span class="xmlAttVal">"<xsl:value-of		select="name()"/>=</span><span class="xmlAttVal">"<xsl:value-of
	select="."/>"</span></xsl:for-each><span class="xmlTag"~~>><~~/span>		select="."/>"</span></xsl:for-each><span class="xmlTag">></span>
	<!-- Return before processing content, if not inside a p. -->		<!-- Return before processing content, if not inside a p. -->
	<xsl:if test="not(ancestor::teix:p)"><xsl:text>		<xsl:if test="not(ancestor::teix:p)"><xsl:text>
	</xsl:text></xsl:if><xsl:apply-templates select="* \| text() \| comment()"/>		</xsl:text></xsl:if><xsl:apply-templates select="* \| text() \| comment()"/>
	<!-- Closing tag, following indent if not in a p. -->		<!-- Closing tag, following indent if not in a p. -->
	<xsl:if test="not(ancestor::teix:p)"><xsl:value-of		<xsl:if test="not(ancestor::teix:p)"><xsl:value-of
	select="$indent"/></xsl:if><span class="xmlTag"></<xsl:value-of		select="$indent"/></xsl:if><span class="xmlTag"></<xsl:value-of
	select="local-name()"/~~>><~~/span>		select="local-name()"/>></span>
	<!-- Return after closing tag, if not in a p. -->		<!-- Return after closing tag, if not in a p. -->
	<xsl:if test="not(ancestor::teix:p)"><xsl:text>		<xsl:if test="not(ancestor::teix:p)"><xsl:text>
	</xsl:text></xsl:if>		</xsl:text></xsl:if>
	</xsl:template>		</xsl:template>

	<!-- For good-looking tree output, we need to include a return after any		<!-- For good-looking tree output, we need to include a return after any
	text content, assuming		text content, assuming
	we're not inside a paragraph tag. -->		we're not inside a paragraph tag. -->
	<xsl:template match="teix:*/text()">		<xsl:template match="teix:*/text()">
	<xsl:if test="not(ancestor::teix:p)"><xsl:for-each		<xsl:if test="not(ancestor::teix:p)"><xsl:for-each
	select="ancestor::teix:*"~~> <~~/xsl:for-each></xsl:if><xsl:value-of		select="ancestor::teix:*"> </xsl:for-each></xsl:if><xsl:value-of
	select="replace(., '&', '&amp;')"></xsl:value-of><xsl:if test="not(ancestor::teix:p) or		select="replace(., '&', '&amp;')"></xsl:value-of><xsl:if test="not(ancestor::teix:p) or
	not(following-sibling::* or following-sibling::text())"><xsl:text>		not(following-sibling::* or following-sibling::text())"><xsl:text>
	</xsl:text></xsl:if>		</xsl:text></xsl:if>
	</xsl:template>		</xsl:template>
	</nowiki></pre>		</nowiki></pre>

Mholmes: /* CSS */

2011-10-31T16:44:59Z

CSS

← Older revision		Revision as of 16:44, 31 October 2011
Line 69:		Line 69:
	}		}
	</nowiki></pre>		</nowiki></pre>


			== XSLT ==


	Next, there's some XSLT.		Next, there's some XSLT.

Mholmes: /* Quick-and-Dirty Syntax Highlighting with */

2011-10-31T16:44:37Z

Quick-and-Dirty Syntax Highlighting with <egXML>

← Older revision		Revision as of 16:44, 31 October 2011
Line 31:		Line 31:
	''Now shut up explaining things, and give me the code already.''		''Now shut up explaining things, and give me the code already.''

	Point taken, here it is:		Point taken, here it is: first CSS, then XSLT.

	~~First, there's some~~ CSS. Put this in your site stylesheet, or in a separate stylesheet if you're afraid it might be infectious. This is intended to be CSS3 connecting with an XHTML5 web page, but it should work fine with earlier versions of XHTML.
			== CSS ==


			Put this in your site CSS stylesheet, or in a separate stylesheet if you're afraid it might be infectious. This is intended to be CSS3 connecting with an XHTML5 web page, but it should work fine with earlier versions of XHTML.

	<pre><nowiki>		<pre><nowiki>

Mholmes: /* Quick-and-Dirty Syntax Highlighting with */

2011-10-31T16:43:36Z

Quick-and-Dirty Syntax Highlighting with <egXML>

← Older revision		Revision as of 16:43, 31 October 2011
Line 80:		Line 80:
	Now you need to add a couple of templates to the XSLT file(s) that process your TEI XML.		Now you need to add a couple of templates to the XSLT file(s) that process your TEI XML.

	I always use XSLT 2.0 with Saxon 9+, but I think this would work perfectly well with XSLT 1.0. Add the following to your stylesheet. Bear in mind that most of the output finds itself inside an XHTML5 <pre> element, where whitespace matters, so please forgive the absence of human-readable whitespace. More competent XSLT coders will certainly find ways of making the code more readable without screwing up the whitespace. A lot will depend on the settings that are already in your stylesheet for xsl:preserve-space and xsl:strip-space.		I always use XSLT 2.0 with Saxon 9+, but I think this would work perfectly well with XSLT 1.0. Add the following to your stylesheet. Bear in mind that most of the output finds itself inside an XHTML5 <pre> element, where whitespace matters, so please forgive the absence of human-readable whitespace. More competent XSLT coders will certainly find ways of making the code more readable without screwing up the whitespace. A lot will depend on the settings that are already in your stylesheet for xsl:preserve-space and xsl:strip-space.

	Note: the key here is that all the TEI elements found inside an <egXML> element are in the Examples namespace.		Note: the key here is that all the TEI elements found inside an <egXML> element are in the Examples namespace.

	<pre><nowiki>		<pre><nowiki>

Mholmes: /* Quick-and-Dirty Syntax Highlighting with */

2011-10-31T16:42:31Z

Quick-and-Dirty Syntax Highlighting with <egXML>

← Older revision		Revision as of 16:42, 31 October 2011
Line 24:		Line 24:
	</nowiki></pre>		</nowiki></pre>

	Now, you would think that the <p> tag inside the <egXML> is a TEI <p>, but it's not. It's in the http://www.tei-c.org/ns/Examples namespace. That means two things:		Now, you would think that the <p> tag inside the <egXML> is a TEI <p>, but it's not. It's in the http://www.tei-c.org/ns/Examples namespace. That means two things:

	#When you validate your XML file against a TEI P5 schema, this <p> will not cause problems. It's outside the TEI namespace.		#When you validate your XML file against a TEI P5 schema, this <p> will not cause problems. It's outside the TEI namespace.
	#When you write XSLT to process your example TEI code, this <p> is completely distinct from your regular P5 <p>, because it's in a different namespace.		#When you write XSLT to process your example TEI code, this <p> is completely distinct from your regular P5 <p>, because it's in a different namespace.

	''Now shut up explaining things, and give me the code already.''		''Now shut up explaining things, and give me the code already.''

Mholmes: A quick-and-dirty solution to formatting example TEI code for HTML output.

2011-10-31T16:39:43Z

A quick-and-dirty solution to formatting example TEI code for HTML output.

New page

== Quick-and-Dirty Syntax Highlighting with <egXML> ==
Using <egXML> to document encoding practices

The problem:

You want to document your encoding practices in a TEI document with lots of example code, and you want to render it into HTML for display on the web, with all the code nicely indented and syntax-highlighted.

The solution:

Mark up your code with the TEI element <egXML>, and use the fragments of XSLT and CSS code below to render the embedded XML into attractively-indented and coloured output.

'''What is <egXML> and how do I use it?'''

Many ordinary TEI users will never have come across the <egXML> element, but whenever you look at the TEI Guidelines, you're seeing the results of it. Every time a piece of TEI code is shown in the Guidelines, it's embedded in an <egXML> element.

<egXML> is special in that it's not in the normal TEI namespace; it's always in its own special namespace, which is http://www.tei-c.org/ns/Examples. Inside <egXML>, you can place any well-formed fragment of TEI code you like, like this:

<pre><nowiki>
<egXML xmlns="http://www.tei-c.org/ns/Examples">

This is a paragraph.

</egXML>
</nowiki></pre>

Now, you would think that the tag inside the <egXML> is a TEI , but it's not. It's in the http://www.tei-c.org/ns/Examples namespace. That means two things:

#When you validate your XML file against a TEI P5 schema, this will not cause problems. It's outside the TEI namespace.
#When you write XSLT to process your example TEI code, this is completely distinct from your regular P5 , because it's in a different namespace.

''Now shut up explaining things, and give me the code already.''

Point taken, here it is:

First, there's some CSS. Put this in your site stylesheet, or in a separate stylesheet if you're afraid it might be infectious. This is intended to be CSS3 connecting with an XHTML5 web page, but it should work fine with earlier versions of XHTML.

<pre><nowiki>
/* Handling of example XML code embedded in pages. */
pre.teiCode{
white-space: pre-wrap;
}

/* We want our XML code to look like code. */
.xmlTag, .xmlAttName, .xmlAttVal, .teiCode{
font-family: monospace;
}

/* We want our XML code text to be bold. */
.xmlTag, .xmlAttName, .xmlAttVal{
font-weight: bold;
}

/* We want syntax highlighting. */
/* I think I stole these colour values from oXygen. Sorry George! */
.xmlTag{
color: #000099;
}

.xmlAttName{
color: #f5844c;
}

.xmlAttVal{
color: #993300;
}
</nowiki></pre>

Next, there's some XSLT.

The first thing you need to do is to put two things inside the root element of your XSLT file:

xmlns:teix="http://www.tei-c.org/ns/Examples"

(That's the TEI examples namespace.)

exclude-result-prefixes="xs xd xhtml hcmc exist teix"

(You're going to have to customize that a bit for yourself. What that's saying is: don't output xmlns nodes for these namespaces. In this example from my project, I'm suppressing unwanted namespaces from a range of different domains. You'll probably want to do something similar, but your list of namespace prefixes will be different.)

Now you need to add a couple of templates to the XSLT file(s) that process your TEI XML.

I always use XSLT 2.0 with Saxon 9+, but I think this would work perfectly well with XSLT 1.0. Add the following to your stylesheet. Bear in mind that most of the output finds itself inside an XHTML5 <pre> element, where whitespace matters, so please forgive the absence of human-readable whitespace. More competent XSLT coders will certainly find ways of making the code more readable without screwing up the whitespace. A lot will depend on the settings that are already in your stylesheet for xsl:preserve-space and xsl:strip-space.

Note: the key here is that all the TEI elements found inside an <egXML> element are in the Examples namespace.

<pre><nowiki>

<xsl:template match="teix:egXML">
<pre class="teiCode">
<xsl:apply-templates/>
</pre>
</xsl:template>


<xsl:template match="teix:*[not(local-name(.) = 'egXML')]">

<xsl:variable name="indent"><xsl:for-each
select="ancestor::teix:*"> </xsl:for-each></xsl:variable>

<xsl:if test="not(ancestor::teix:p)"><xsl:value-of
select="$indent"/></xsl:if>

<<xsl:value-of
select="name()"/><xsl:for-each select="@*"><xsl:text> </xsl:text><xsl:value-of
select="name()"/>="<xsl:value-of
select="."/>"</xsl:for-each>>

<xsl:if test="not(ancestor::teix:p)"><xsl:text>
</xsl:text></xsl:if><xsl:apply-templates select="* | text() | comment()"/>

<xsl:if test="not(ancestor::teix:p)"><xsl:value-of
select="$indent"/></xsl:if></<xsl:value-of
select="local-name()"/>>

<xsl:if test="not(ancestor::teix:p)"><xsl:text>
</xsl:text></xsl:if>
</xsl:template>


<xsl:template match="teix:*/text()">
<xsl:if test="not(ancestor::teix:p)"><xsl:for-each
select="ancestor::teix:*"> </xsl:for-each></xsl:if><xsl:value-of
select="replace(., '&', '&amp;')"></xsl:value-of><xsl:if test="not(ancestor::teix:p) or
not(following-sibling::* or following-sibling::text())"><xsl:text>
</xsl:text></xsl:if>
</xsl:template>
</nowiki></pre>

== Further customization ==

This is a relatively simple hack, and it's crude in its assumptions. For instance, I assume that content inside a TEI tag is "inline" content, and other tag content is not. Obviously, in the context of a real project, you would want to make such assumptions more explicit and elaborate.

Also note that if you use the <gi>, <att> and <val> tags in your documentation, you can hook them up with the same class attributes in your CSS, so that XML fragments in your code are also styled and coloured.

== More sophisticated solutions ==

Sebastian "Stormageddon" Rahtz's excellent TEI stylesheets include a much more extensive and intelligent module for processing <egXML>. It doesn't include syntax highlighting, but it's handles a wider range of conditions and contingencies. You can see his code here:

[http://tei.svn.sourceforge.net/viewvc/tei/trunk/Stylesheets/common2/verbatim.xsl]

The TEI By Example project also has nice syntax-highlighted rendering of TEI code. Their XSLT is not currently public, but I'm sure they'd share it if asked:

[http://teibyexample.org/]

[[Category:XSLT]]