1

I am hoping this is not a duplicate, but I was googling around so much that I can't remember where I started.

But I have a latex document that has some tikz and pgf images in it. I usually use latexmk to compile the file to pdf. Now, I wanted to see if I could compile this file to HTML, so that I can display the tikz images and such on the web. But I was not sure how to do this or what worked.

I tried to use make4ht, but that was only partially rendering my tikz images. Some of the macros that I had setup where not being rendered properly in the final output. The code I used was:

make4ht -d html -f html5+latexmk_build+mjcli myfile.tex "mathjax"

I also tried pandoc, and converting from latex --> markdown, and then from markdown --> HTML. This also did not render the tikz blocks correctly. I did add the --mathjax flags, but I don't think that mathjax supports tikz right now.

pandoc -s myfile.tex -o test.md 
pandoc -s --katex test.md -o test.html

Can anyone suggest the best approach that they have found for converting tex documents with tikz diagrams into HTML webpages.

UPDATED

As per comments by @michel.ht I tried a different driver. That helped but I am still getting formatting issues with the output. I am posting a specific example of a simple neural network. Perhaps I need to change the way that the code is written to better fit the Tikz driver?

\usepackage{tikz}
\usetikzlibrary{shapes.multipart, positioning, decorations.markings,
  arrows.meta, calc, fit}

  \begin{tikzpicture}[shorten >=1pt,->,draw=black!50, node distance=\layersep]
    \tikzstyle{every pin edge}=[<-,shorten <=1pt]
    \tikzstyle{neuron}=[circle,fill=black!25,minimum size=25pt,inner sep=0pt]
    \tikzstyle{input neuron}=[neuron, fill=red!50];
    \tikzstyle{output neuron}=[neuron, fill=orange!50];
    \tikzstyle{hidden neuron}=[neuron, fill=green!50];

    % Draw the input layer nodes
    \foreach \name / \y in {1,...,3}
    % This is the same as writing \foreach \name / \y in {1/1,2/2,3/3,4/4}
    \node[input neuron] (I-\name) at (0,-\y) {$x_{\y}$};

    % Draw the output layer node
    \node[output neuron,pin={[pin edge={->}]right:$\hat{y}$}, right of=I-2] (O) {$\sigma$};
    % Connect every node in the hidden layer with the output layer
    \foreach \source in {1,...,3}
    \path (I-\source) edge node[above]{$w_{\source}$} (O) ;
  \end{tikzpicture}

Here is the corresponding picture. The text in the nodes is missing like $x_1$, etc.

Simple network

There are some other issues with some tikz macros, but I can work on those in a subsequent post.

4
  • 1
    For make4ht, it is important to use the the alternative TikZ driver, because the one that is used by default supports only basic text formatting in text nodes. If you use custom commands in math, then you can try the "mathml,mathjax" option. If that doesn't work well, then you can define your commands in the .cfg file, see this section in the documentation. – michal.h21 Mar 27 at 16:20
  • @michal.h21 Oh very interesting. Thanks so much, I did not know about these. Let me give it a try. – krishnab Mar 27 at 16:23
  • @michal.h21 Okay I tried the dvisvgm option and it looks much better, but not quite there. But some details are still missing. Let me update the OP with a specific example. It might be that I need to just rewrite the tikz code to better map to the Tikz driver? But I really do appreciate your input here. – krishnab Mar 27 at 16:37
  • I've posted an anser that shows use of the alternative driver, it seems to work on your MWE. – michal.h21 Mar 27 at 17:04
2

Here is a modified version of your MWE that use the alternative TikZ driver for TeX4ht:

\documentclass{article}
\ifdefined\HCode
  \def\pgfsysdriver{pgfsys-dvisvgm4ht.def}
\fi 
\def\layersep{2cm}
\usepackage{tikz}
\usetikzlibrary{shapes.multipart, positioning, decorations.markings,
  arrows.meta, calc, fit}

  \begin{document}
  \begin{tikzpicture}[shorten >=1pt,->,draw=black!50, node distance=\layersep]
    \tikzstyle{every pin edge}=[<-,shorten <=1pt]
    \tikzstyle{neuron}=[circle,fill=black!25,minimum size=25pt,inner sep=0pt]
    \tikzstyle{input neuron}=[neuron, fill=red!50];
    \tikzstyle{output neuron}=[neuron, fill=orange!50];
    \tikzstyle{hidden neuron}=[neuron, fill=green!50];

    % Draw the input layer nodes
    \foreach \name / \y in {1,...,3}
    % This is the same as writing \foreach \name / \y in {1/1,2/2,3/3,4/4}
    \node[input neuron] (I-\name) at (0,-\y) {$x_{\y}$};

    % Draw the output layer node
    \node[output neuron,pin={[pin edge={->}]right:$\hat{y}$}, right of=I-2] (O) {$\sigma$};
    % Connect every node in the hidden layer with the output layer
    \foreach \source in {1,...,3}
    \path (I-\source) edge node[above]{$w_{\source}$} (O) ;
  \end{tikzpicture}
  \end{document}

The \ifdefined\HCode condition is used in order to ensure that this driver is used only with TeX4ht. You don't want to use it in the PDF output. I had to define the \layersep macro, as it was undefined in your MWE. It is used for the node distance, so you may want to change it according to your needs.

I've compiled it just using

 make4ht -m draft sample.tex

This is the result:

enter image description here

1
  • Ahh perfect. This totally worked for me. Thanks so much for the code to do this, it works now. – krishnab Mar 27 at 17:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.