Creating better HTML code with minted and tex4ht

Question

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:
location = /auth/ { ... (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.

Marijn · Answer

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{Hnewline} HCode{Hnewline} HCode{Hnewline} } } begin{document} ScriptEnv{nginx} {IgnoreParEndPHCode{

}EndNoFonts}
{NoFonts HCode{

}} 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:

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

Output:

michal.h21 · Answer

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 elements, it has support for -shell-escape, etc. Also, it can replace all these with span that is tied to the actual color, like . 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 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:

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

And this is rendered by the browser:

Creating better HTML code with minted and tex4ht

2 Answers

Add your own answers!

Ask a Question