Code Fragments

WXT offers to colorcode or "prettprint" some languages, mainly programcode. This is achived with two diffrenet mechanismes:

Google's prettyprint [18] . This is the preferred tool since it is flexible and fast. Depends on Javascript
WXT's own codeparser. This is necessary if the material is not shown in a web-browser as HTML.

Which tool to use depends on the option preformat-language. If preformat-language is set to yes WXT's parser is used, otherwise Google's prettyprint is used. no is default. The reason for using WXT's preformatting is normally to prepare for PDF-conversion.

Google prettyprint

This tool is described in Google Code Prettify [18] . To make this work you must download and include the necessary javascriptcode in your templates. See source of this page to get the idea.

You must also define and, if you like, redefine the styles to get the result you want. The original styles from google, as of june 2010, is set up like this:

/* Pretty printing styles. Used with prettify.js. */
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888 }
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }
@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}

You will seeom the discussion of styles, Styles , that the standard stylesheet distrubuted with WXT have modified this.

You may achieve colorcoding in two ways:

Directly

You may simply put the following code on your page:


<pre class="prettyprint lang-js">
<![CDATA[
function simplepopup(theURL,wname,wstyle)
{
    // just a sample function
  try{
      newwindow=window.open(theURL, wname, wstyle);
      if (window.focus) {newwindow.focus()}
    }
    catch(E){
      alert('You may have blocked popups');
    }
  }]]>
</pre>

to achieve this:


function simplepopup(theURL,wname,wstyle)
{
    // just a sample function
  try{
      newwindow=window.open(theURL, wname, wstyle);
      if (window.focus) {newwindow.focus()}
    }
    catch(E){
      alert('You may have blocked popups');
    }
  }

With a PI

You may import files ,or fragments from files, and get them colorcoded with the following PIs: importtxt, expandable, popup.

You may put this on your page:


<div>
<?_wxt importtxt location="wxtjs.js" 
       leftpar="//popup" rightpar="//eofpopup" lang="lang-js"?>
</div>

to achive this:

WXTs codeparser

WXT has its own codeparser that prepares all material on the webpages before they reach the browser. That is it is not dependant of javascript. WXT's parser is more limited that the general Google-concept. It supports the following langages:

lang-j (java)
lang-js (javascript)
lang-c (c)
lang-cpp (c++)
lang-csh (c#)
lang-css (Cascading Style Sheets)
lang-xml (XML)
lang-sql (SQL)
lang-aspx (ASPX)
lang-cs3 (actionscript)
lang-mal (matlab)
lang-py (python)
lang (generic without colorencoding. All encoding defaults to this on failure on others)

WXT's parser reads your material in the same way as Google's tool, and the examples above work the same way.