You can utilize the fact that Markdown also supports HTML, so to support LaTeX in static site generators you just need to convert LaTeX to HTML. It is then necessary to extract just the contents of the <body> element and add an YAML header, just like in the Markdown file. make4ht can do this automatically.
In my planned blog, I have the following directory structure:
texposts/
.make4ht
first_post/
hello.tex
second_post
world.tex
build/
www/
There are three top level directories, texposts for LaTeX documents, build where HTML files to be processed are saved and www, which is populated by the static site generator.
The .make4ht file is a special configuration file for make4ht:
local outdir = os.getenv "kodymirus_root" or "out"
local domfilter = require "make4ht-domfilter"
-- remove the \maketitle environment from the HTML file, title will be inserted in the template
local domprocess = domfilter{function(dom)
local maketitles = dom:query_selector(".maketitle")
for _, el in ipairs(maketitles) do
print "removing maketitle"
el:remove_node()
end
return dom
end}
filter_settings "staticsite" {
site_root = outdir,
map = {
[".css$"] = "css/"
},
header = {
layout="post",
date = function(parameters)
return os.date("!%Y-%m-%d %T", parameters.time)
end
}
}
Make:enable_extension "common_domfilters"
if mode=="draft" then
Make:htlatex {}
elseif mode=="publish" then
-- Make:htlatex {}
Make:match("html$", domprocess)
Make:enable_extension "tidy"
Make:enable_extension "staticsite"
Make:htlatex {}
else
Make:htlatex {}
Make:htlatex {}
Make:htlatex {}
end
It is a Lua script which drives the conversion from LaTeX to HTML. There are few interesting things:
local outdir = os.getenv "kodymirus_root" or "out"
This reads an environmental variable set in my .bashrc that contains path to the build directory.
filter_settings "staticsite" {}
This contains settings for the staticsite extension:
site_root = outdir,
set the output directory
map = {
[".css$"] = "css/"
},
move the generated files that match the regular expression to a specified directory. This example moves CSS files to the css subdirectory in the build dir.
header = {}
In the header we can set additional fields for the YAML header.
elseif mode=="publish" then
-- Make:htlatex {}
Make:match("html$", domprocess)
Make:enable_extension "tidy"
Make:enable_extension "staticsite"
Make:htlatex {}
make4ht supports so called modes. These modes can be selected on the command line using the -m option. By default, this configuration file will create a standalone HTML file. Only when the post is done, you can execute the publish mode, which enables the staticsite extension and publishes the document to the build dir.
To publish the document execute the following command in the texposts/first directory:
make4ht -um publish hello.tex
Regarding math, tex4ht supports several methods for the conversion. By default, it uses ordinary HTML text + images for more complex cases, like display math etc. The default image format is PNG. To request SVG images, it is possible to pass special option to tex4ht:
make4ht -um publish hello.tex "svg"
Math images are not really good solution, it is used by default mainly for compatibility. Better solutions is to use either MathML using the "mathml" option or raw LaTeX code and render it using MathJax. The raw LaTeX can be requested using the "mathjax" option. Note that MathJax itself must be included in the static site template.
Here is an example TeX file:
\documentclass{article}
\title{Blogging with \LaTeX}
\author{Michal}
\begin{document}
\maketitle
\tableofcontents
\section{Introduction}
\textit{příliš žluťoučký}
\printbibliography
\end{document}
And this is the generated document:
---
layout: 'post'
updated: 1524600200
styles:
- '2018-04-18-blogging-with-latex.css'
meta:
- content: 'HTML Tidy for HTML5 for Linux version 5.4.0'
name: 'generator'
- charset: 'utf-8'
- content: 'TeX4ht (http://www.tug.org/tex4ht/)'
name: 'generator'
- content: 'width=device-width,initial-scale=1'
name: 'viewport'
- content: '2018-04-18-blogging-with-latex.tex'
name: 'src'
title: 'Blogging with LaTeX'
date: '2018-04-18 20:31:14'
time: 1524083474
---
<h3 class='likesectionHead'><a id='x1-1000'></a>Contents</h3>
<div class='tableofcontents'><span class='sectionToc'>1 <a id='QQ2-1-2' href='#x1-20001'>Introduction</a></span></div>
<!-- l. 17 -->
<p class='noindent'></p>
<h3 class='sectionHead'><span class='titlemark'>1</span> <a id='x1-20001'></a>Introduction</h3>
<!-- l. 19 -->
<p class='noindent'><span class='rm-lmri-10'>příliš žluťoučký</span></p>
