☰

tufte-latex 文件可以输出 tufte-css HTML 吗？

tag-icon • tag-icon tufte html
tufte-latex 文件可以输出 tufte-css HTML 吗？

我的大部分 LaTeX 工作都是使用 tufte-handout 和 tufte-book 类完成的，我通常使用 LuaLaTeX 将它们转换为 PDF。最近我一直在尝试使用 htlatex 或其他工具将我的作品输出为 HTML，但 HTML 输出效果都很糟糕。我曾天真地尝试将 tufte-css 添加到 htlatex 生成的 html 文件的输出中，结果却一团糟。有没有好的工作流程来完成这项工作？

经过编辑，包含 MWE：

\documentclass{tufte-handout}

\begin{document}

    Here is some text. \marginnote{Here is a margin note.}
    
    Here is some math: \(a^2+b^2=c^2\)
    
    \[e^{i\pi}+1=0\]

\end{document}

我使用 htlatex 将其编译为 HTML，并将 tufte.css 添加到标题中，效果确实不错。不幸的是，同样的工作流程似乎不适用于更复杂的文档。

答案1

可以配置 TeX4ht 以生成 Tufte HTML 所需的输出。目前，我有工作逐字记录、注释、参考书目、章节\maketitle和图表。

以下是一个示例文档：

\documentclass[]{tufte-book}
\usepackage{kantlipsum}
\usepackage{url}
\usepackage{graphicx}
\begin{document}
\title{Sample Document}
\author{Michal Hoftich}
\maketitle
\tableofcontents
\section{Introduction}

This is an example of Tufte \LaTeX\ document converted to Tufte HTML using \TeX4ht\footnote{\url{https://tug.org/tex4ht/}}.
It shows various commands provided by Tufte classes. Most of the text are just random words 
provided by the Kantlipsum\footnote{\url{https://ctan.org/pkg/kantlipsum?lang=en}} package, so please don't 
try to find a message in that.

\begin{marginfigure}
  \includegraphics[width=\textwidth]{example-image.png}
  \caption{Example margin figure}
\end{marginfigure}

\section{First section}

Here is some math: \(a^2+b^2=c^2\)

\[e^{i\pi}+1=0\]

\kant[1]

\subsection{Hello, subsection}


\begin{figure}[tbt]
  \caption{Example figure}
  \includegraphics[width=\textwidth]{exports-imports.png}
\end{figure}

\kant[2]

% \begin{margintable}
%   \begin{tabular}{l l}
%     hello & world\\
%     second & line
%   \end{tabular}
%   \caption{Margin table}
% \end{margintable}

\begin{figure*}[tbt]
  \includegraphics[width=\textwidth]{napoleons-march.png}
  \caption{Full width figure}
\end{figure*}
\begin{verbatim}
Hello verbatim 
Some special characters: {|}\ % "
\end{verbatim}

\newthought{We can try thought} \allcaps{uppercase} \textit{příliš žluťoučký kůň} \kant[3]

I am also interested in footnotes\footnote{Hello, this is a footnote}. \kant[4]

Another paragraph, try sidenote this time\sidenote{This is a sidenote}. And also marginnote\marginnote{Hello, this is a marginnote}.

I want to try citations\cite{Tufte2001,Tufte1990,Tufte1997,Tufte2006}.

\begin{fullwidth}
  This paragraphs is in full size \kant[5]
 \end{fullwidth}



\bibliography{sample-handout}
\bibliographystyle{plainnat}


\end{document}

我用过这个 .bib 文件测试参考书目支持。

现在仅以文件的形式提供支持.cfg：

\Preamble{xhtml}
% add tufte.css to your document
\Configure{AddCss}{tufte.css}

% helper macro to close the current paragraph
\def\endparagraph{\ifvmode\IgnorePar\fi\EndP}

% insert <article> element to the document body
\Configure{@BODY}{\endparagraph\HCode{<article>}}
\Configure{@/BODY}{\endparagraph\HCode{</article>}}

% Tufte LaTeX makes \section and \subsection to behave like \section* and \subsection*
% so we need to configure like<section level>
% These configurations insert <section> elements and print titles in apropriate header elements
\Configure{likesection}
{\endparagraph\HCode{<section>}}{\endparagraph\HCode{</section>}}
{\HCode{<h2>}}{\HCode{</h2>}\par\ShowPar}

\Configure{likesubsection}
{\endparagraph\HCode{<section>}}{\endparagraph\HCode{</section>}}
{\HCode{<h3>}}{\HCode{</h3>}\par\ShowPar}

% we must redefine TOC to print starred sectioning commands
% \TableOfContents is provided by TeX4ht
\renewcommand\tableofcontents{\endparagraph\HCode{<h2>Contents</h2>\Hnewline}\TableOfContents[likesection,likesubsection]}

% custom \maketitle
\makeatletter
\renewcommand{\maketitle}{%
  \begingroup%
    \endparagraph\HCode{<h1>}\@title\HCode{</h1>}%
    \HCode{<p class="subtitle">}\@author\HCode{</p>}%
    \HCode{<p class="subtitle">}\@date\HCode{</p>}%
  \endgroup
}

% make images resize automatically
\Configure{Gin-dim}{}
\Css{img {
    max-width: 100\%;
    height: auto;
}}

% fix for commands redefined by soul
\@ifpackageloaded{soul}{%
\renewcommand{\allcaps}[1]{\MakeTextUppercase{#1}}%
\renewcommand{\smallcaps}[1]{{\scshape\MakeTextLowercase{#1}}}%
\renewcommand{\textsc}[1]{\textcaps{#1}}%
}{}

% footnotes and sidenotes

\long\def\@tufte@sidenote[#1][#2]#3{%
  \stepcounter\@mpfn%
\bgroup% make font changes local
  \HCode{<label for="sitenote-\thempfn" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sidenote-\thempfn" class="margin-toggle" />}%
  \HCode{<span class="sidenote">}#3\HCode{</span>}%
\egroup%
}
\renewcommand\marginnote[2][0pt]{%
  \stepcounter\@mpfn%
\bgroup% make font changes local
  \HCode{<label for="sitenote-\thempfn" class="margin-toggle"></label><input type="checkbox" id="sidenote-\thempfn" class="margin-toggle" />}%
  \HCode{<span class="marginnote">}#2\HCode{</span>}%
\egroup%
}

% environments

\ConfigureEnv{verbatim}{\endparagraph\HCode{<pre><code>}\NoFonts}{\EndNoFonts\endparagraph\HCode{</code></pre>}}{}{}
\ConfigureEnv{fullwidth}{\endparagraph\HCode{<div class="fullwidth">}%
\ConfigureList{list}{}{}{}{}% fullwidth uses list environment internally, we don't need this
\par\ShowPar\indent% require insertion of paragraph
}
{\endparagraph\HCode{</div>}}{}{}

% floats

\NewConfigure{marginfloat}{2}

% redefine internal margin float environment in order to prevent use of minipage and other undersirable environments
\renewenvironment{@tufte@margin@float}[2][-1.2ex]%
{\FloatBarrier% process all floats before this point so the figure/table numbers stay in order.
\begingroup%
\let\textwidth\marginparwidth% \includegraphics[width=\textwidth]{...} should work
\def\@captype{#2}%
\par%
% redefine paragraph
\Configure{HtmlPar}{\EndP\csname a:marginfloat\endcsname}{\EndP\csname a:marginfloat\endcsname}{\csname b:marginfloat\endcsname}{\csname b:marginfloat\endcsname}%
}
{\endgroup}

\Configure{marginfloat}{\HCode{<p><span class="marginnote">}
% we must handle \caption inside marginnote
\Configure{caption}{\HCode{<span class="figure">}}{:\space}{}{\HCode{</span>}}
}{\HCode{</span></p>}}{}{}

% display marginnote caption on a separate line
\Css{.marginnote .figure{display:block;}}

\renewenvironment{@tufte@float}[3][htbp]%
{\@float{#2}[#1]}{\end@float}

% caption should produce margin note by default
\Configure{caption}{\HCode{<span class="marginnote">}}{:\space}{}{\HCode{</span>}}

% figure* should produce full width image
% we need to make few adjustments
\ConfigureEnv{figure*}{
\Configure{float}{}{\endparagraph\HCode{<figure class="fullwidth">}}{\endparagraph\HCode{</figure>}\csname par\endcsname\ShowPar}
\Configure{caption}{\endparagraph\HCode{<span class="figure">}}{:\space}{}{\HCode{</span>}}
}{}{}{}

\ConfigureEnv{margintable}{\endparagraph\HCode{<div class="margintable">}\Configure{caption}{}{:\space}{}{}}{\endparagraph\HCode{</div>}}{}{}

% fix for display math length
\Css{div.math-display, div.par-math-display {width: 55\%}}

\makeatother

\begin{document}
\EndPreamble

将其另存为myconfig.cfg。可以使用以下方法编译该文档：

pdflatex sample.tex
bibtex sample
make4ht -m draft -c myconfig.cfg sample.tex "mathml,mathjax"

这是呈现的文档：

在此处输入图片描述

您还可以看到HTML 版本在线的。

相关内容