Render embedded Tikz code

.gitignore

@@ -17,3 +17,8 @@ server.log
 auto/
 .vscode/
 *.swp
+*.aux
+*.fdb_latexmk
+*.fls
+*.log
+*.synctex.gz

app/decker.hs

@@ -160,6 +160,20 @@ main = do
           ["-e", "set output \"" ++ out ++ "\""]
           src
     --
+    priority 2 $
+      "//*.tex.svg" %> \out -> do
+        let src = dropExtension out
+        let pdf = src -<.> ".pdf"
+        let dir = takeDirectory src
+        need [src]
+        () <-
+          cmd
+            "pdflatex -halt-on-error -interaction batchmode"
+            ["-output-directory", dir]
+            src
+        () <-cmd "pdf2svg" pdf out
+        cmd "rm" pdf
+    --
     phony "clean" $ do
       removeFilesAfter publicDir ["//"]
       removeFilesAfter projectDir cruft

src/Render.hs

@@ -17,8 +17,7 @@ import qualified Data.Set as Set
 import Development.Shake
 import Extra
 import Project
-import System.Directory
-       (createDirectoryIfMissing, doesFileExist)
+import System.Directory (createDirectoryIfMissing, doesFileExist)
 import System.FilePath.Posix
 import Text.Pandoc
 import Text.Pandoc.Walk
@@ -31,6 +30,8 @@ renderCodeBlocks pandoc =
 
 data Processor = Processor
   { extensions :: [String]
+  , preamble :: String
+  , postamble :: String
   } deriving (Show)
 
 renderClass :: String
@@ -45,9 +46,13 @@ gnuplotPrelude _ = "set terminal svg;"
 processors :: Map.Map String Processor
 processors =
   Map.fromList
-    [ ("dot", Processor [".dot"])
-    , ("gnuplot", Processor [".gnuplot", ".gpi", ".plt", "gp"])
-    , ("tikz", Processor [".tex", ".latex"])
+    [ ("dot", Processor [".dot"] "" "")
+    , ("gnuplot", Processor [".gnuplot", ".gpi", ".plt", "gp"] "" "")
+    , ( "tikz"
+      , Processor
+          [".tex", ".latex"]
+          "\\documentclass{standalone} \\usepackage{tikz} \\usepackage{verbatim} \\begin{document} \\pagestyle{empty}"
+          "\\end{document}")
     ]
 
 renderedCodeExtensions :: [String]
@@ -73,8 +78,7 @@ maybeRenderCodeBlock :: Block -> Action Block
 maybeRenderCodeBlock code@(CodeBlock (id, classes, namevals) contents) =
   case findProcessor classes of
     Just processor -> do
-      svgFile <-
-        extractCodeIfChanged "" ((head . extensions) processor) contents
+      svgFile <- extractCodeIfChanged "" processor contents
       return $
         Para
           [ Image
@@ -90,13 +94,14 @@ svgDataUrl :: String -> String
 svgDataUrl svg =
   "data:image/svg+xml;base64," ++ (B.unpack (B64.encode (B.pack svg)))
 
-extractCodeIfChanged :: String -> FilePath -> FilePath -> Action FilePath
-extractCodeIfChanged basename extension code = do
+extractCodeIfChanged :: String -> Processor -> FilePath -> Action FilePath
+extractCodeIfChanged basename processor code = do
   projectDir <- project <$> getProjectDirs
   let crc = printf "%08x" (calc_crc32 code)
   let basepath =
         "generated" </>
         (concat $ intersperse "-" [defaultString "code" basename, crc])
+  let extension = (head . extensions) processor
   let sourceFile = projectDir </> basepath <.> extension
   let svgFile = projectDir </> basepath <.> extension <.> ".svg"
   publicResource <- getPublicResource
@@ -104,10 +109,13 @@ extractCodeIfChanged basename extension code = do
     liftIO $
     unlessM (System.Directory.doesFileExist svgFile) $ do
       createDirectoryIfMissing True (takeDirectory sourceFile)
-      writeFile sourceFile code
+      writeFile
+        sourceFile
+        ((preamble processor) ++ "\n" ++ code ++ "\n" ++ (postamble processor))
   need [svgFile]
   return svgFile
 
 defaultString :: String -> String -> String
-defaultString d str | null str = d
+defaultString d str
+  | null str = d
 defaultString _ str = str

test/decks/rendered-code-deck.md

@@ -80,14 +80,86 @@ splot 1 / (x*x + y*y + 0.5)
 
 ------
 
-# Dot Files as Images (Not just yet) {layout="columns"}
+# Dot Files as Images
 
-## Image Tag {.left grow="1"}
+## Image Tag {.split}
 
 ``` {.markdown}
 ![](graph.dot)
 ```
 
-## Rendered and included {.right grow=2}
+## Rendered and included
 
 ![](graph.dot)
+
+------
+
+# Tikz Files as Images
+
+## Image Tag {.split}
+
+``` {.markdown}
+![](tikz.tex)
+```
+
+## Rendered and included
+
+![](tikz.tex)
+
+------
+
+# Tikz Embedded
+
+``` {.tikz .render width="50%"}
+\begin{tikzpicture}[scale=3,cap=round]
+  % Local definitions
+  \def\costhirty{0.8660256}
+
+  % Colors
+  \colorlet{anglecolor}{green!50!black}
+  \colorlet{sincolor}{red}
+  \colorlet{tancolor}{orange!80!black}
+  \colorlet{coscolor}{blue}
+
+  % Styles
+  \tikzstyle{axes}=[]
+  \tikzstyle{important line}=[very thick]
+  \tikzstyle{information text}=[rounded corners,fill=red!10,inner sep=1ex]
+
+  % The graphic
+  \draw[style=help lines,step=0.5cm] (-1.4,-1.4) grid (1.4,1.4);
+
+  \draw (0,0) circle (1cm);
+
+  \begin{scope}[style=axes]
+    \draw[->] (-1.5,0) -- (1.5,0) node[right] {$x$};
+    \draw[->] (0,-1.5) -- (0,1.5) node[above] {$y$};
+
+    \foreach \x/\xtext in {-1, -.5/-\frac{1}{2}, 1}
+      \draw[xshift=\x cm] (0pt,1pt) -- (0pt,-1pt) node[below,fill=white]
+            {$\xtext$};
+
+    \foreach \y/\ytext in {-1, -.5/-\frac{1}{2}, .5/\frac{1}{2}, 1}
+      \draw[yshift=\y cm] (1pt,0pt) -- (-1pt,0pt) node[left,fill=white]
+            {$\ytext$};
+  \end{scope}
+
+  \filldraw[fill=green!20,draw=anglecolor] (0,0) -- (3mm,0pt) arc(0:30:3mm);
+  \draw (15:2mm) node[anglecolor] {$\alpha$};
+
+  \draw[style=important line,sincolor]
+    (30:1cm) -- node[left=1pt,fill=white] {$\sin \alpha$} +(0,-.5);
+
+  \draw[style=important line,coscolor]
+    (0,0) -- node[below=2pt,fill=white] {$\cos \alpha$} (\costhirty,0);
+
+  \draw[style=important line,tancolor] (1,0) --
+    node [right=1pt,fill=white]
+    {
+      $\displaystyle \tan \alpha \color{black}=
+      \frac{ {\color{sincolor}\sin \alpha} }{\color{coscolor}\cos \alpha}$
+    } (intersection of 0,0--30:1cm and 1,0--1,1) coordinate (t);
+
+  \draw (0,0) -- (t);
+\end{tikzpicture}
+```

test/decks/tikz.tex

+\documentclass{standalone}
+    
+    \usepackage{tikz}
+    \usepackage{verbatim}
+    
+    \begin{document}
+    \pagestyle{empty}
+    
+    \begin{tikzpicture}[scale=3,cap=round]
+      % Local definitions
+      \def\costhirty{0.8660256}
+
+      % Colors
+      \colorlet{anglecolor}{green!50!black}
+      \colorlet{sincolor}{red}
+      \colorlet{tancolor}{orange!80!black}
+      \colorlet{coscolor}{blue}
+    
+      % Styles
+      \tikzstyle{axes}=[]
+      \tikzstyle{important line}=[very thick]
+      \tikzstyle{information text}=[rounded corners,fill=red!10,inner sep=1ex]
+    
+      % The graphic
+      \draw[style=help lines,step=0.5cm] (-1.4,-1.4) grid (1.4,1.4);
+    
+      \draw (0,0) circle (1cm);
+    
+      \begin{scope}[style=axes]
+        \draw[->] (-1.5,0) -- (1.5,0) node[right] {$x$};
+        \draw[->] (0,-1.5) -- (0,1.5) node[above] {$y$};
+    
+        \foreach \x/\xtext in {-1, -.5/-\frac{1}{2}, 1}
+          \draw[xshift=\x cm] (0pt,1pt) -- (0pt,-1pt) node[below,fill=white]
+                {$\xtext$};
+    
+        \foreach \y/\ytext in {-1, -.5/-\frac{1}{2}, .5/\frac{1}{2}, 1}
+          \draw[yshift=\y cm] (1pt,0pt) -- (-1pt,0pt) node[left,fill=white]
+                {$\ytext$};
+      \end{scope}
+    
+      \filldraw[fill=green!20,draw=anglecolor] (0,0) -- (3mm,0pt) arc(0:30:3mm);
+      \draw (15:2mm) node[anglecolor] {$\alpha$};
+    
+      \draw[style=important line,sincolor]
+        (30:1cm) -- node[left=1pt,fill=white] {$\sin \alpha$} +(0,-.5);
+    
+      \draw[style=important line,coscolor]
+        (0,0) -- node[below=2pt,fill=white] {$\cos \alpha$} (\costhirty,0);
+    
+      \draw[style=important line,tancolor] (1,0) --
+        node [right=1pt,fill=white]
+        {
+          $\displaystyle \tan \alpha \color{black}=
+          \frac{{\color{sincolor}\sin \alpha}}{\color{coscolor}\cos \alpha}$
+        } (intersection of 0,0--30:1cm and 1,0--1,1) coordinate (t);
+    
+      \draw (0,0) -- (t);
+    
+    \end{tikzpicture}
+    
+    \end{document}
\ No newline at end of file