March 9, 2012

Stog handles <latex> ... </latex>.

Just put some LaTeX code inside and Stog will compile it to a SVG file, to show the result in your page.

The big advantage is that you can zoom in or out and the result will scale accordingly.

How does this work ? The LaTeX code is compiled with latex -interaction=batchmode to get a .dvi file. This file is sent to dvisvgm to generate a SVG file.

Example:

<latex>$a x^2 + \frac{3}{2} x - 1 = \pi$</latex>
will display this: $ x^2 + \frac{3}{2} x - 1 = \pi$

Another example:


\centerline{\begin{tikzpicture}[scale=1.8]
\draw (0,0) -- (0,4) ;
\draw [&gt;=stealth,-&gt;] (0,0) -- (0,1) ;
\draw (0,0) -- (3,0) ;
\draw [dotted, very thin, gray] (0,0) grid (3,4);
\draw (3,0) node[right]{$X_n$} ;
\draw (0,4) node[left]{$M_n$} ;
\draw (1,0) node[below]{0};
\draw (2,0) node[below]{1};\draw (1, 1) node {$\bullet$};
\draw [&gt;=stealth, -&gt;] (1, 1) -- (1, 2) node[midway,above,sloped]{$q_{0}(0)$};
\draw (1, 2) node {$\bullet$};
\draw [&gt;=stealth, -&gt;] (1, 2) -- (2, 1) node[midway,below,sloped]{$q_{00}(1)$};
\draw (2, 1) node {$\bullet$};
\draw [&gt;=stealth, -&gt;] (2, 1) -- (2, 2) node[midway,below,sloped]{$q_{100}(1)$};
\draw (2, 2) node {$\bullet$};
\draw [&gt;=stealth, -&gt;] (2, 2) -- (2, 3) node[midway,below,sloped]{$q_{1100}(1)$};
\draw (2, 3) node {$\bullet$};
\draw [draw=red, fill=red, -&gt;, double,thick] (2, 3) -- (1, 1) node[midway,above,sloped]{{\color{red}$q_{11100}(0)$}};
\draw [draw=red, fill=red, -&gt;, double,thick] (2, 3) -- (2, 4) node[midway,above,sloped]{{\color{red}$q_{11100}(1)$}};
\draw (2, 3) node {{\color{red}$\bullet$}};
\end{tikzpicture}}
\centerline{...100111}

The code:

<latex packages="{tikz}" ><![CDATA[
\centerline{\begin{tikzpicture}[scale=1.8]
\draw (0,0) -- (0,4) ;
\draw [>=stealth,->] (0,0) -- (0,1) ;
\draw (0,0) -- (3,0) ;
\draw [dotted, very thin, gray] (0,0) grid (3,4);
\draw (3,0) node[right]{$X_n$} ;
\draw (0,4) node[left]{$M_n$} ;
\draw (1,0) node[below]{0};
\draw (2,0) node[below]{1};\draw (1, 1) node {$\bullet$};
\draw [>=stealth, ->] (1, 1) -- (1, 2) node[midway,above,sloped]{$q_{0}(0)$};
\draw (1, 2) node {$\bullet$};
\draw [>=stealth, ->] (1, 2) -- (2, 1) node[midway,below,sloped]{$q_{00}(1)$};
\draw (2, 1) node {$\bullet$};
\draw [>=stealth, ->] (2, 1) -- (2, 2) node[midway,below,sloped]{$q_{100}(1)$};
\draw (2, 2) node {$\bullet$};
\draw [>=stealth, ->] (2, 2) -- (2, 3) node[midway,below,sloped]{$q_{1100}(1)$};
\draw (2, 3) node {$\bullet$};
\draw [draw=red, fill=red, ->, double,thick] (2, 3) -- (1, 1) node[midway,above,sloped]{{\color{red}$q_{11100}(0)$}};
\draw [draw=red, fill=red, ->, double,thick] (2, 3) -- (2, 4) node[midway,above,sloped]{{\color{red}$q_{11100}(1)$}};
\draw (2, 3) node {{\color{red}$\bullet$}};
\end{tikzpicture}}
\centerline{...100111}]]>
</latex>

For information you can see the source code of the page.

<post title="LaTeX in stog"
date="2012/03/09"
topics="stog"
keywords="latex, svg"
published="true"
>
<p>
Stog handles <icode lang="xml"><![CDATA[<latex> ... </latex>]]></icode>.
</p>
<sep_/>
<p>
Just put some LaTeX code inside and Stog will
compile it to a SVG file, to show the result in your page.
</p>
<p>The big advantage is that you can zoom in or out and the result
will scale accordingly.
</p>
<p>How does this work ? The LaTeX code is compiled
with <icode>latex -interaction=batchmode</icode> to get a <icode>.dvi</icode> file.
This file is sent to <ext-a href="http://dvisvgm.sourceforge.net/"><icode>dvisvgm</icode></ext-a>
to generate a SVG file.
</p>
<p>
Example:
<hcode lang="xml"><![CDATA[<latex>$a x^2 + \frac{3}{2} x - 1 = \pi$</latex>]]></hcode>
will display this: <latex>$ x^2 + \frac{3}{2} x - 1 = \pi$</latex>
</p>
<p>
Another example:
</p>
<p>
<include file="./example.tex"/>
</p>
<p>The code:
<hcode defer_="1" lang="xml">
<include file="./example.tex" raw="true"/>
</hcode>
</p>
</post>