tex4ht 可以使用内部 css 代替外部 css 吗？

Question

没有内置方法，因此您需要使用后处理。使用make4ht构建文件非常容易：

local filter = require "make4ht-filter"

-- this variable will hold contents of the CSS file
local csscontent

local function load_css(filename)
  local f = io.open(filename, "r")
  if f then
    local content = f:read("*all")
    f:close()
    -- make sure that the inline CSS don't mess with make4ht DOM filters
    content = "<style type='text/css'>\n<!-- " .. content .. " -->\n</style>"
    return content
  end
end

-- this filter chain will insert CSS
local process = filter{
  function(html, par)
    local cssname = par.input .. ".css"
    -- TeX4ht can produce multiple HTML files. We will load the CSS file contents 
    -- only for the firts time, and cache it for the future use
    csscontent = csscontent or load_css(cssname)
    if csscontent then
      -- we use just string substitution to replace <link ...href="\jobname.css">
      -- the replacement function is used in order to prevent Lua errors caused by % characters in CSS
      html = html:gsub("<link[^>]+" .. cssname .. ".->", function(s) return csscontent  end)
    end
    return html
  end
}

Make:match("html$",  process)

我使用make4ht-filter库对 HTML 文件进行后处理。该filter函数采用包含后处理函数的表格。每个函数都对过滤器链中前一个函数的输出进行操作。在本例中只有一个函数，但可以使用更多函数。

HTML使用以下方法对每个输出文件执行过滤器Make:match("html$", process)

make4ht您可以使用以下选项传递构建文件-e：

make4ht -e build.lua sample.tex

此示例：

% https://tex.stackexchange.com/q/605478/2891
\documentclass{article}
\begin{document}
Hello \textit{world}

{\huge\bfseries hello huge}
\end{document}

生成：

<!DOCTYPE html> 
<html lang='en-US' xml:lang='en-US'> 
<head><title></title> 
<meta charset='utf-8' /> 
<meta content='TeX4ht (https://tug.org/tex4ht/)' name='generator' /> 
<meta content='width=device-width,initial-scale=1' name='viewport' /> 
<style type='text/css'>
<!--   
/* start css.sty */
.cmti-10{ font-style: italic;}
.cmbx-12x-x-172{font-size:206%; font-weight: bold;}
p{margin-top:0;margin-bottom:0}
p.indent{text-indent:0;}
p + p{margin-top:1em;}
p + div, p + pre {margin-top:1em;}
div + p, pre + p {margin-top:1em;}
a { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto; }
@media print {div.crosslinks {visibility:hidden;}}
a img { border-top: 0; border-left: 0; border-right: 0; }
center { margin-top:1em; margin-bottom:1em; }
td center { margin-top:0em; margin-bottom:0em; }
.Canvas { position:relative; }
img.math{vertical-align:middle;}
div.par-math-display, div.math-display{text-align:center;}
li p.indent { text-indent: 0em }
li p:first-child{ margin-top:0em; }
li p:first-child{ margin-bottom; }
li p:last-child, li div:last-child { margin-bottom:0.5em; }
li p:first-child{ margin-bottom:0; }
li p~ul:last-child, li p~ol:last-child{ margin-bottom:0.5em; }
.enumerate1 {list-style-type:decimal;}
.enumerate2 {list-style-type:lower-alpha;}
.enumerate3 {list-style-type:lower-roman;}
.enumerate4 {list-style-type:upper-alpha;}
div.newtheorem { margin-bottom: 2em; margin-top: 2em;}
.obeylines-h,.obeylines-v {white-space: nowrap; }
div.obeylines-v p { margin-top:0; margin-bottom:0; }
.overline{ text-decoration:overline; }
.overline img{ border-top: 1px solid black; }
td.displaylines {text-align:center; white-space:nowrap;}
.centerline {text-align:center;}
.rightline {text-align:right;}
pre.verbatim {font-family: monospace,monospace; text-align:left; clear:both; }
.fbox {padding-left:3.0pt; padding-right:3.0pt; text-indent:0pt; border:solid black 0.4pt; }
div.fbox {display:table}
div.center div.fbox {text-align:center; clear:both; padding-left:3.0pt; padding-right:3.0pt; text-indent:0pt; border:solid black 0.4pt; }
div.minipage{width:100%;}
div.center, div.center div.center {text-align: center; margin-left:1em; margin-right:1em;}
div.center div {text-align: left;}
div.flushright, div.flushright div.flushright {text-align: right;}
div.flushright div {text-align: left;}
div.flushleft {text-align: left;}
.underline{ text-decoration:underline; }
.underline img{ border-bottom: 1px solid black; margin-bottom:1pt; }
.framebox-c, .framebox-l, .framebox-r { padding-left:3.0pt; padding-right:3.0pt; text-indent:0pt; border:solid black 0.4pt; }
.framebox-c {text-align:center;}
.framebox-l {text-align:left;}
.framebox-r {text-align:right;}
span.thank-mark{ vertical-align: super }
span.footnote-mark sup.textsuperscript, span.footnote-mark a sup.textsuperscript{ font-size:80%; }
div.tabular, div.center div.tabular {text-align: center; margin-top:0.5em; margin-bottom:0.5em; }
table.tabular td p{margin-top:0em;}
table.tabular {margin-left: auto; margin-right: auto;}
td p:first-child{ margin-top:0em; }
td p:last-child{ margin-bottom:0em; }
div.td00{ margin-left:0pt; margin-right:0pt; }
div.td01{ margin-left:0pt; margin-right:5pt; }
div.td10{ margin-left:5pt; margin-right:0pt; }
div.td11{ margin-left:5pt; margin-right:5pt; }
table[rules] {border-left:solid black 0.4pt; border-right:solid black 0.4pt; }
td.td00{ padding-left:0pt; padding-right:0pt; }
td.td01{ padding-left:0pt; padding-right:5pt; }
td.td10{ padding-left:5pt; padding-right:0pt; }
td.td11{ padding-left:5pt; padding-right:5pt; }
table[rules] {border-left:solid black 0.4pt; border-right:solid black 0.4pt; }
.hline hr, .cline hr{ height : 0px; margin:0px; }
.hline td, .cline td{ padding: 0; }
.hline hr, .cline hr{border:none;border-top:1px solid black;}
.tabbing-right {text-align:right;}
div.float, div.figure {margin-left: auto; margin-right: auto;}
div.float img {text-align:center;}
div.figure img {text-align:center;}
.marginpar,.reversemarginpar {width:20%; float:right; text-align:left; margin-left:auto; margin-top:0.5em; font-size:85%; text-decoration:underline;}
.marginpar p,.reversemarginpar p{margin-top:0.4em; margin-bottom:0.4em;}
.reversemarginpar{float:left;}
table.equation {width:100%;}
.equation td{text-align:center; }
td.equation { margin-top:1em; margin-bottom:1em; } 
td.equation-label { width:5%; text-align:center; }
td.eqnarray4 { width:5%; white-space: normal; }
td.eqnarray2 { width:5%; }
table.eqnarray-star, table.eqnarray {width:100%;}
div.eqnarray{text-align:center;}
div.array {text-align:center;}
div.pmatrix {text-align:center;}
table.pmatrix {width:100%;}
span.pmatrix img{vertical-align:middle;}
div.pmatrix {text-align:center;}
table.pmatrix {width:100%;}
span.bar-css {text-decoration:overline;}
table.tabular{border-collapse: collapse; border-spacing: 0;}
img.cdots{vertical-align:middle;}
.partToc a, .partToc, .likepartToc a, .likepartToc {line-height: 200%; font-weight:bold; font-size:110%;}
.index-item, .index-subitem, .index-subsubitem {display:block}
div.caption {text-indent:-2em; margin-left:3em; margin-right:1em; text-align:left;}
div.caption span.id{font-weight: bold; white-space: nowrap; }
h1.partHead{text-align: center}
p.bibitem { text-indent: -2em; margin-left: 2em; margin-top:0.6em; margin-bottom:0.6em; }
p.bibitem-p { text-indent: 0em; margin-left: 2em; margin-top:0.6em; margin-bottom:0.6em; }
.paragraphHead, .likeparagraphHead { margin-top:2em; font-weight: bold;}
.subparagraphHead, .likesubparagraphHead { font-weight: bold;}
.verse{white-space:nowrap; margin-left:2em}
div.maketitle {text-align:center;}
h2.titleHead{text-align:center;}
div.maketitle{ margin-bottom: 2em; }
div.author, div.date {text-align:center;}
div.thanks{text-align:left; margin-left:10%; font-size:85%; font-style:italic; }
div.author{white-space: nowrap;}
div.abstract p {margin-left:5%; margin-right:5%;}
div.abstract {width:100%;}
.abstracttitle{text-align:center;margin-bottom:1em;}
figure.float, div.figure {margin-left: auto; margin-right: auto;}
figure.float img, figure.figure img {display: block; margin-left: auto; margin-right: auto;}
figure.figure {text-align:center;}
figcaption.caption {text-indent:-2em; margin-left:3em; margin-right:1em; text-align:center;}
figcaption.caption span.id{font-weight: bold; white-space: nowrap; }
p + figcaption, img + figcaption{margin-top: 1em;}
.abstract{margin:1em;}
/* end css.sty */

  -->
</style> 
<meta content='sample.tex' name='src' /> 
</head><body>
<!-- l. 4 --><p class='noindent'>Hello <span class='cmti-10'>world</span>
</p><!-- l. 6 --><p class='indent'>   <span class='cmbx-12x-x-172'>hello huge</span>
</p>
    
</body> 
</html>

Answer 1