Here is a short, complete example XHTML file, in-page-ex.xml, demonstrating basic use of Content Pseudo-TeX embedded within the XHTML -- the relevant parts of the file are highlighted:
CPT -- In-Page Test ]]> ]]> Testing in-page CPT mark-up:]]>> ]]> ]]>
(View page locally, with relative URLs. There is also a page with more complicated examples.)
The <script/> and <object/> tags are necessary to load the JavaScript for handling the embedded content, and the Java applet for translating the Content Pseudo-TeX into Content MathML. The surrounding <p>...</p> tags help keep XHTML formatting valid and also help hide the applet. These tags need to appear exactly as shown, immediately after the opening <body> tag of the XHTML document (not within the <head>...</head> environment).
In the example, the Content Pseudo-TeX is enclosed within the <span class="math">...</span> environment. Note also the <![CDATA[...]]> environment -- the Content Pseudo-TeX must be protected from the XHTML parser by telling the parser that it is raw character data (CDATA). The enclosed text, \int[v:x][l:0][u:\pi;]{\sin{x}}=2, is the actual Content Pseudo-TeX mark-up -- for details of the syntax, see the documentation page. Use <span class="math">...</span> for in-line math expressions (as in the example file), <div class="math">...</div> for displayed math expressions. The class="math" attribute is the flag which indicates (to the JavaScript routines) that the environment contains Content Pseudo-TeX mark-up (which is then sent to the embedded Java applet for translation, then placed within the document again by the JavaScript, inside the <span> or <div> tag, which is not removed). The placement and presentation of the mathematics can be further configured by applying a style="..." attribute to the <span> or <div> tag.
See the list of tools and materials.
By way of acknowledgement, I should point out that this technique of embedding Content Pseudo-TeX within a page is based, in theory at least, upon the mechanism used by jsMath to embed its TeX-like mark-up in HTML pages. The main visible difference between jsMath and Content Pseudo-TeX is in the syntax of the embedded mark-up. In particular, since jsMath attempts to mimic LaTeX mathematics closely, its mark-up is presentation-oriented, whereas Content Pseudo-TeX is built around Content MathML and is therefore heavily semantic. Internally, jsMath also uses a different mechanism for placing the mathematics within the page, using either small images for math symbols placed using CSS or special browser fonts. Content Pseudo-TeX, on the other hand, relies on the (Firefox) browser's native MathML capabilities, placing the MathML within the page using JavaScript methods to manipulate the Document Object Model (DOM).