Creating better HTML code with minted and tex4ht

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


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

Tags:

Minted

Tex4Ht

Recent Posts