我有一个 Web 发布设置，我使用 tex4ht 将我的 LaTeX 编译为静态 HTML 模板。我最终为这些页面创建了自己的样式。我还使用该minted包来设置文档中的代码样式，使用时会产生非常好的输出pdflatex，但使用 tex4ht 时，minted 环境中的内容会转换为非常丑陋HTML，因此代码如下：
\begin{minted}{nginx}
location / {
auth_request /auth/;
auth_request_set $auth_status $upstream_status;
index index.html;
error_page 403 =301 @loginRedirect;
}
\end{minted}
生成如下 HTML：
<a
id="x1-5018r9"></a><br class="fancyvrb" />
<a
id="x1-5020r10"></a><span
class="ectt-1200">  </span><span
class="ectt-1200">  </span><span
class="ectt-1200">  </span><span
class="ectt-1200">  </span><span id="textcolor56"><span
class="ectt-1200">location</span></span><span
class="ectt-1200">  </span><span id="textcolor57"><span
class="ectt-1200">=</span></span><span
class="ectt-1200">  </span><span id="textcolor58"><span
class="ectt-1200">/auth/</span></span><span
class="ectt-1200">  </span><span id="textcolor59"><span
class="ectt-1200">{</span></span>
... (truncated for brevity) ...
我怎样才能让输出更漂亮？我可以使用自己的自定义样式表更轻松地设置样式吗？
现在，我正在htlatex直接调用，但我最近发现了一些关于使用的很好的文档make4ht（似乎很难找到），所以如果可以使用用make4htLua 编写的自定义配置脚本来完成此操作，那么我绝对是愿意研究的。
答案1
您绝对应该使用make4ht，因为它提供了一些开箱即用的必要功能，例如默认的 HTML5 和 UTF-8 输出，它还可以连接连续<span>元素，支持-shell-escape等等。
此外，它可以用<span id="textcolor58">与实际颜色绑定的 span 替换所有这些，例如<span class='textcolor-656565'>。它大大减少了 CSS 文件的大小，并能够使用相同的颜色设置所有元素的样式。
最后要修复的是，您可以删除所有这些<span class="ectt-1200">元素。它们包含字体信息，但不是必需的，因为整个minted环境只共享一种等宽字体。可以使用配置文件修复此问题。
配置文件如下所示myconfig.cfg：
\Preamble{xhtml}
\ConfigureEnv{minted}{\NoFonts}{\EndNoFonts}{}{}
\begin{document}
\EndPreamble
该\ConfigureEnv{minted}命令配置minted环境。命令在启动\NoFonts时、结束时执行。这些命令关闭和打开字体样式处理。minted\EndNoFonts
您现在可以使用以下方法编译您的文档：
make4ht -sm draft -c myconfig.cfg -f html5+join_colors filename.tex
该-s选项启用--shell-escape所需的功能minted。-m draft只需要一次 LaTeX 编译运行，这会加快编译速度。-c myconfig.cfg需要配置文件。-f html5+join_colors需要 HTML5 输出并处理颜色。
这是最终的 HTML：
<div id='fancyvrb1' class='fancyvrb'><a id='x1-9r1'></a> <span class='textcolor-007f00'>location</span> <span class='textcolor-ba2121'>/</span> {<br class='fancyvrb' />
<a id='x1-11r2'></a> <span class='textcolor-007f00'>auth_request</span> <span class='textcolor-ba2121'>/auth/</span>;<br class='fancyvrb' />
<a id='x1-13r3'></a> <span class='textcolor-007f00'>auth_request_set</span> <span class='textcolor-19167c'>$auth_status</span> <span class='textcolor-19167c'>$upstream_status</span>;
<br class='fancyvrb' />
<a id='x1-15r4'></a> <span class='textcolor-007f00'>index</span> <span class='textcolor-ba2121'>index.html</span>;<br class='fancyvrb' />
<a id='x1-17r5'></a> <span class='textcolor-007f00'>error_page</span> <span class='textcolor-656565'>403</span> =<span class='textcolor-656565'>301</span> <span class='textcolor-ba2121'>@loginRedirect</span>;<br class='fancyvrb' />
<a id='x1-19r6'></a> }</div>
浏览器渲染结果如下：
答案2
由于所有颜色都发生了变化，语法高亮的输出从定义上来说有点冗长。另一种选择可能是使用 Javascript 高亮库在网页本身上进行语法高亮，并使用该库的配置选项来设置输出样式，而不是自己配置低级 html 和 css 的所有细节。
其中一个支持多种语言和风格的库是突出显示.js。要使用它，您只需下载库代码（在单个.js文件中）和您想要使用的 CSS 样式，然后从您的 html 页面调用它们。
MWE（改编自htlatex 在 verbatim 中插入环境)：
\documentclass{article}
\AtBeginDocument{
\Configure{@HEAD}{
\HCode{<link rel="stylesheet" href="magula.css">\Hnewline}
\HCode{<script src="highlight.pack.js"></script>\Hnewline}
\HCode{<script>hljs.initHighlightingOnLoad();</script>\Hnewline}
}
}
\begin{document}
\ScriptEnv{nginx}
{\IgnorePar\EndP\HCode{<pre><code class="nginx">}\EndNoFonts}
{\NoFonts \HCode{</code></pre>}}
\begin{nginx}
location / {
auth_request /auth/;
auth_request_set $auth_status $upstream_status;
index index.html;
error_page 403 =301 @loginRedirect;
}
\end{nginx}
\end{document}
生成的 html：
<html >
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="TeX4ht (http://www.tug.org/tex4ht/)">
<meta name="originator" content="TeX4ht (http://www.tug.org/tex4ht/)">
<!-- html -->
<meta name="src" content="hl4ht.tex">
<link rel="stylesheet" type="text/css" href="hl4ht.css">
<link rel="stylesheet" href="magula.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head><body
>
<pre><code class="nginx">location / {
auth_request /auth/;
auth_request_set $auth_status $upstream_status;
index index.html;
error_page 403 =301 @loginRedirect;
}
</code></pre>
</body></html>
输出：
