☰

我可以将 TikZ（而不是 PSTricks）用于 latex2html5 吗？

tag-icon • tag-icon tikz-pgf pstricks latex2html
我可以将 TikZ（而不是 PSTricks）用于 latex2html5 吗？

我今天发现了这个：

http://latex2html5.com/

使用 LATEX 和 PSTricks 在线编写交互式数学方程式和图表

看起来不错，但我更熟悉蒂克兹. 有谁知道一些等效的东西，它不是基于技巧但蒂克兹？

答案1

有一个简单的例子，展示了tikz-to-svg、mathjax以及webfonts的用法tex4ht。

首先是一些示例文档：

\documentclass[]{article}
\usepackage{tikz, myexternalize, myfontspec, mathtools}
\setmainfont{STIXGeneral}
\setmathfont{XITS Math}
\begin{document}


First, show me some inline math: 
\(\forall x \in X, \quad \exists y \leq \epsilon\)

Now some display math:

\[
    \frac{n!}{k!(n-k)!} = \binom{n}{k}
\]

And finally, some tikz picture, source is some answer on TeX.sx:

\begin{tikzpicture}
    % Time axis
    \draw (0,0) -- node[below=1cm] {Time $\to$} (6,0);
    % Emotional axis
    \draw (0,0) -- node[left] {\parbox{2cm}{\centering $\uparrow$ \\ Emotional \\ intensity}} (0,4);
    % Time ticks
    \foreach \x [count=\j] in {0.2,3,4.5,6} {
        \draw (\x,0) coordinate (t\j) -- (\x,-0.1cm) node[below] (tt\j) {Time \j};
    }
    \node[below] at (tt1.south) {(Emotional event)};
    % Curves
    \draw (t1) .. controls +(1,2) .. node[above right] {Experienced} (t2);
    \draw[dashed] (t1) .. controls +(1,4) .. node[above right] {Predicted} (t4);
\end{tikzpicture}

Some samples \textit{of font} \textbf{changes} and diacritics: Příliš žluťoučký kůň úpěl ďábelské ódy.
\end{document}

使用了两个自定义包，myexternalize和myfontspec。这些包尝试解决fontspec和tikz-externalize的问题tex4ht。

现在我们应该展示这些包。myexternalize.sty：

\usetikzlibrary{external}
\tikzset{
    tex4ht inc/.style={
        /pgf/images/include external/.code={%
            \includegraphics[]{##1.svg}%
        }

    }
}

\@ifpackageloaded{tex4ht}{
    \tikzexternalize[mode=only graphics]
        \tikzset{tex4ht inc}
}{
    \tikzset{external/system call={lualatex \tikzexternalcheckshellescape -halt-on-error -interaction=batchmode -jobname "\image" "\texsource"}}
\tikzset{
 external/system call/.add={}                                                
      {; inkscape -z -f "\image.pdf" -l "\image.svg"
            }    
}
    \tikzexternalize
}

此包用于lualatex将tikz图片转换为pdf并将inkscape这些图片转换pdf为 svg。 详细信息可参见这里和这里。您还需要文件myexternalize.4ht，该文件配置tex4ht为包含svg图像：

\Configure{graphics*}  
         {svg}{  
          {\Configure{Needs}{File: \[email protected]}\Needs{}}
          \Picture[\csname a:GraphicsAlt\endcsname]{\csname Gin@base\endcsname.svg \csname a:Gin-dim\endcsname}%  
         }

现在我们需要使用包来处理字体myfontspec.sty：

\@ifpackageloaded{tex4ht}{
    \usepackage[utf8]{inputenc}
    \usepackage[T1]{fontenc}
  \newcommand\setmainfont[1]{}
  \newcommand\setmathfont[1]{}  
}{
    \usepackage{fontspec}
    \usepackage{unicode-math}
}

此文件仅在使用 编译时加载inputenc和打包并定义一些虚拟命令，否则使用。现在您可以编译您的文档以获取图像：fontenctex4htfontspecsvg

lualatex -shell-escape filename

现在我们需要为 mathjax 和 webfonts 提供一些配置tex4ht。文件myconfig.cfg：

\Preamble{xhtml, mathml}
% Configure for mathjax
\Configure{VERSION}{}
\Configure{DOCTYPE}{\HCode{<!DOCTYPE html>\Hnewline}}
\Configure{HTML}{\HCode{<html>\Hnewline}}{\HCode{\Hnewline</html>}}
\Configure{@HEAD}{\HCode{<script type="text/javascript"\Hnewline
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"\Hnewline
></script>\Hnewline}}
\begin{document}
\newcommand\AddFontFace[4]{%
\Css{@font-face {
    font-family: #1;
    src: local("#2"),
        url('#3');
    #4
 }}
\special{t4ht+@File: #3}
}
\edef\CurrentFontFamily{rmfamily}
\newcommand\SetFontFamily[1]{
\edef\CurrentFontFamily{#1}
}
\newcommand\NormalFont[2]{\AddFontFace{\CurrentFontFamily}{#1}{#2}{font-weight: normal;font-style: normal;}}

\newcommand\BoldFont[2]{\AddFontFace{\CurrentFontFamily}{#1}{#2}{font-weight: bold;font-style: normal;}}
\newcommand\ItalicFont[2]{\AddFontFace{\CurrentFontFamily}{#1}{#2}{font-weight: normal;font-style: italic;}}
\newcommand\BoldItalicFont[2]{\AddFontFace{\CurrentFontFamily}{#1}{#2}{font-weight: bold;font-style: italic;}}

\NormalFont{STIXDefault}{STIXGeneral-Regular.woff}
\BoldFont{STIXDefault}{STIXGeneral-Bold.woff}
\ItalicFont{STIXDefault}{STIXGeneral-Italic.woff}
\BoldItalicFont{STIXDefault}{STIXGeneral-BoldItalic.woff}
\Css{body{font-family:rmfamily, "STIXDefault", sans-serif;}}
\EndPreamble

mathjax之前 有 的定义\begin{document}，之后是字体的定义。我创建了新的命令\AddFontFace，将字体定义添加到css文件中，并创建了许多命令来包含不同字体粗细和样式的文件。之所以Stix fonts使用，是因为 使用了这些字体mathjax，所以当它们也用于文本时看起来不错。您需要.woff从 提供的 zip 文件中复制使用的文件Sourceforge。

现在我们可以用以下命令编译该文档：

htlatex filename "myconfig, mathml, charset=utf-8" " -cunihtf -utf8"

生成的pdf：

在此处输入图片描述

和 html：

在此处输入图片描述

您还可以看到html 页面实际运行。

相关内容