Skip to main content

The PreTeXt Guide

Robert A. Beezer, David Farmer, Alex Jordan, Mitchel T. Keller

Section 19.4 -generated images

PreTeXt makes it straightforward to embed code that produces images (such as TikZ) into your source files. The PreTeXt-CLI basically just dumps your code out to your file so that it compiles nicely. However, for HTML display, you will need SVG graphic files. This is where the pretext/pretext script comes in. Running the pretext/pretext script frequently requires patience, particularly on Windows, so settle in with an experienced user before attempting the steps in this section. See Chapter 47 for complete details.
Our example here just illustrates using TikZ to make a simple figure (the Hasse diagram of a poset), but lots of other graphics packages can be used. One step required is to put the following three lines in the <docinfo> tag of your main file. <latex-image-preamble> is used to set up the preamble that should be used for making SVG images from your PreTeXt source. Macros that you wish to use more broadly should be put inside <macros> inside <docinfo>.
<latex-image-preamble>
\usepackage{tikz}
</latex-image-preamble>

<figure xml:id="fig-tikz">
  <caption>A figure generated with TikZ in
  <latex /></caption>
  <image width="15%" xml:id="poset">

<latex-image >
\begin{tikzpicture}
\draw (0,0) -- (0,1);
\draw (1,0) -- (1,1) -- (1,2) -- (1,3);
\draw (0,0) -- (1,2);
\draw (0,1) -- (1,0);
\draw [fill] (0,0) circle [radius=0.1];
\draw [fill] (0,1) circle [radius=0.1];
\draw [fill] (1,0) circle [radius=0.1];
\draw [fill] (1,1) circle [radius=0.1];
\draw [fill] (1,2) circle [radius=0.1];
\draw [fill] (1,3) circle [radius=0.1];
\node [left] at (0,0) {$x$};
\node [left] at (0,1) {$b$};
\node [right] at (1,0) {$a$};
\node [right] at (1,1) {$y$};
\node [right] at (1,2) {$c$};
\node [right] at (1,3) {$d$};
\end{tikzpicture}
</latex-image>
  </image>

</figure>
Listing 19.4.1. How to use <latex-image> to invoke TikZ
The code in Listing 19.4.1 produces the following output:
Figure 19.4.2. A figure generated with TikZ in
Well, that’s not 100% true for HTML. If you just run pretext build web, your terminal will display a few warnings about not generating assets such as images. To generate the assets, we have to use the -g flag. To generate the assets before building, on the command line we run the following command (on a single line). (Omitting the web target will, by default, use the first target) in the project.ptx file.)
pretext build web -g
PrevTopNext