4

I have a web publishing setup where I compile my LaTeX down to static HTML templates using tex4ht. I end up creating my own styling for these pages. I also use the minted package to style code in my documents, which produces really nice output when using pdflatex, but when using tex4ht, content in the minted environment is converted into severely ugly HTML, so that code like this:

\begin{minted}{nginx}
  location / {
    auth_request /auth/;
    auth_request_set $auth_status $upstream_status;
    index index.html;
    error_page 403 =301 @loginRedirect;
  }
\end{minted}

Produces HTML like this:

<a
 id="x1-5018r9"></a><br class="fancyvrb" />
<a
 id="x1-5020r10"></a><span
class="ectt-1200">&#x00A0; </span><span
class="ectt-1200">&#x00A0; </span><span
class="ectt-1200">&#x00A0; </span><span
class="ectt-1200">&#x00A0; </span><span id="textcolor56"><span
class="ectt-1200">location</span></span><span
class="ectt-1200">&#x00A0; </span><span id="textcolor57"><span
class="ectt-1200">=</span></span><span
class="ectt-1200">&#x00A0; </span><span id="textcolor58"><span
class="ectt-1200">/auth/</span></span><span
class="ectt-1200">&#x00A0; </span><span id="textcolor59"><span
class="ectt-1200">{</span></span>
... (truncated for brevity) ...

How can I make this output prettier? Something that I can more easily style using my own custom stylesheets?

Right now, I'm invoking htlatex directly, but I've recently found some good documentation on using make4ht (which seems to be hard to come by), so if this can be done using a custom make4ht configuration script written in Lua, that's definitely something I'd be willing to look into.

amateurece
  • 43

2 Answers2

5

You should definitely use make4ht, as it provides some necessary features out of the box, like HTML5 and UTF-8 output by default, it also joins consecutive <span> elements, it has support for -shell-escape, etc.

Also, it can replace all these <span id="textcolor58"> with span that is tied to the actual color, like <span class='textcolor-656565'>. It greatly reduces size of CSS file and it enables to style all elements with the same color.

The last thing to fix is that you can remove all those <span class="ectt-1200"> elements. They contain font info and are not necessary, as the whole minted environment shares just one monospaced font. This can be fixed using a configuration file.

The configuration file can look like this, myconfig.cfg:

\Preamble{xhtml}
\ConfigureEnv{minted}{\NoFonts}{\EndNoFonts}{}{}
\begin{document}
\EndPreamble

The \ConfigureEnv{minted} command configures minted environment. \NoFonts command is executed when minted starts, \EndNoFonts when it ends. These command turn off and on handling of font styling.

You can now compile your document using:

make4ht -sm draft -c myconfig.cfg -f html5+join_colors filename.tex

The -s option enables --shell-escape that is required by minted. -m draft requires just one LaTeX compilation run, this speeds up the compilation. -c myconfig.cfg requires the config file. -f html5+join_colors requires HTML5 output and handles colors.

This is the resulting 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>

And this is rendered by the browser:

enter image description here

michal.h21
  • 50,697
2

The output from syntax highlighting is by definition a bit verbose because of all the color changes. An alternative might be to do the syntax highlighting on the webpage itself with a Javascript highlighting library, and use the configuration options of the library to style the output, instead of configuring all the details of the low level html and css yourself.

One such library that supports many languages and styles is highlight.js. To use it you just need to download the library code (in a single .js file) and the CSS style that you want to use, and call them from your html page.

MWE (adapted from htlatex inserting environment in 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}

Resulting 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>

Output:

enter image description here

Marijn
  • 37,699