You want to highlight your source codes in
programlisting elements with Google Code Prettifiy.
Syntax highlighting makes source code easier to read as keywords, strings, etc. appear in different colors. Use the following procedure to implement syntax highlighting with Google Code Prettifiy:
Download the source code bundle from the project's home page at https://github.com/google/code-prettify.
Copy the src directory to your HTML
output directory and rename it to highlighter.
Create a customization layer as explained in Section 2.3, “Writing Customization Layers”.
Set the html.stylesheet stylesheet
parameter:
<xsl:param name="html.stylesheet">highlighter/prettify.css</xsl:param>
This value is needed to add the default style into the header of the HTML output.
Add the named template
user.footer.content with the following
content:
<xsl:template name="user.footer.content"> <xsl:param name="node" select="."/> <script src="highlighter/prettify.js"></script> <script>prettyPrint();</script> </xsl:template>
This template is called before the end of </body> tag. Inside the template, load the
prettify.js and call the function
prettyPrint()
Add a template for programlisting which only
matches, when you add a language
attribute. Use the class.value mode as
follows:
<xsl:template match="d:programlisting[@language]" mode="class.value">
<xsl:param name="class" select="local-name(.)"/>
<xsl:choose>
<xsl:when test="@linenumbering = 'numbered'">
<xsl:value-of select="concat('prettyprint linenums ', $class)"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="concat('prettyprint ', $class)"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>If you want to enable syntax highlighting, make sure you add
a language attribute in your
programlisting tag.
If you want to enable line numbering, add the attribute
linenumbering with the value
linenums.
Rebuild your HTML with your customization layer.
The current implementation uses a JavaScript solution to render the result in your browser. This has the advantage that you do not need any extensions in your customization layer during transformation. You only need to add the above additions to your customization layer and your source code to enable syntax highlighting.
However, if JavaScript is disabled it won't work anymore. If you rely on minimal HTML without any JavaScript code, this solution is not for you. Use the highlighting mechanism which uses an XSLT extension. Add link to highlighting extension topic with JAR
As you could see above, the code in Step 6 uses the
language attribute, but doesn't pass it to the HTML
code. This is not needed as Google Code Prettify will guess.[11] If you do not want to rely on this algorithm, change
the above code and insert the language explitly:
<xsl:template match="d:programlisting[@language]" mode="class.value">
<xsl:param name="class" select="local-name(.)"/>
<xsl:variable name="lang" select="concat('lang-', @language, ' ')"/>
<xsl:choose>
<xsl:when test="@linenumbering = 'numbered'">
<xsl:value-of select="concat('prettyprint ', $lang, 'linenums ', $class)"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="concat('prettyprint ', $lang, $class)"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>Be aware that the above code does not make any checks, it
just copies the value. If your language attribute contains an
unsupported value, it may work not as expected.
If you do not like the default style from
highlighter/prettify.css, use one of the
CSS files from the styles
directory. You can view an example in the Gallery.
Copy your favorite style into the highlighter directory and change the
html.stylesheet pointing to your CSS
file.
Include URL or bibliographic references.
[11] “You don't need to specify the language since prettyprint() will guess.” cited from https://github.com/google/code-prettify/blob/master/README.md#how-do-i-specify-the-language-of-my-code.
| Project@GitHub | Issue#10 |