TeX - LaTeX Asked on August 12, 2021
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.
There are some other issues with some tikz macros, but I can work on those in a subsequent post.
Here is a modified version of your MWE that use the alternative TikZ driver for TeX4ht:
documentclass{article}
ifdefinedHCode
defpgfsysdriver{pgfsys-dvisvgm4ht.def}
fi
deflayersep{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 ifdefinedHCode
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:
Correct answer by michal.h21 on August 12, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP