![使用 make4ht 将 CV 模板从 tex 转换为 html](https://linux22.com/image/437096/%E4%BD%BF%E7%94%A8%20make4ht%20%E5%B0%86%20CV%20%E6%A8%A1%E6%9D%BF%E4%BB%8E%20tex%20%E8%BD%AC%E6%8D%A2%E4%B8%BA%20html.png)
我正在尝试html
从文件中获取我的简历的正确版本tex
。我希望尽可能完美地进行转换,以便结构html
可以正确匹配pdf
。
cv.tex
\documentclass[11pt]{article}
\newlength{\outerbordwidth}
\pagestyle{empty}
\raggedbottom
\raggedright
\usepackage[svgnames]{xcolor}
\usepackage{framed}
\usepackage{tocloft}
\usepackage{enumitem}
\usepackage{textcomp}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{hyperref}
%-----------------------------------------------------------
\setlength{\outerbordwidth}{3pt}
\definecolor{shadecolor}{gray}{0.75}
\definecolor{shadecolorB}{gray}{0.93}
%-----------------------------------------------------------
\setlength{\evensidemargin}{-0.25in}
\setlength{\headheight}{0in}
\setlength{\headsep}{0in}
\setlength{\oddsidemargin}{-0.25in}
\setlength{\tabcolsep}{0in}
\setlength{\textheight}{9.5in}
\setlength{\textwidth}{7in}
\setlength{\topmargin}{-0.3in}
\setlength{\topskip}{0in}
\setlength{\voffset}{0.1in}
%-----------------------------------------------------------
\newcommand{\resitem}[1]{\item #1 \vspace{-4pt}}
\newcommand{\resheading}[1]{
\parbox{\textwidth}{\setlength{\FrameSep}{\outerbordwidth}
\begin{shaded}
\setlength{\fboxsep}{0pt}\framebox[\textwidth][l]{\setlength{\fboxsep}{4pt}\fcolorbox{shadecolorB}{shadecolorB}{\textbf{\sffamily{\mbox{~}\makebox[6.762in][l]{\large #1} \vphantom{p\^{E}}}}}}
\end{shaded}
}\vspace{-11pt}
}
\newcommand{\school}[4]{\vspace{1.5mm}
\textbf{#1} \hfill #2 \textit{#3} \hfill \textit{#4} \vspace{1.5mm}
}
%-----------------------------------------------------------
\begin{document}
\begin{tabular*}{7in}{l@{\extracolsep{\fill}}r}
\textbf{\Large Name} & \textbf{June, 2021} \\ Address & \textit{\href{mailto:}{Email}}
\end{tabular*}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\resheading{Education}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{itemize}[leftmargin=*]
\item[]
\school
{University Name}
{City, Country\\}
{BSc - Physics}
{2010 - 2014}
\end{itemize}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\resheading{Technical Skills}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{itemize}
\item C++, Python
\item \LaTeX
\end{itemize}
\end{document}
cv.pdf
文件显示为:
我已经cv.html
使用以下命令生成了:
make4ht cv.tex
cv.html
文件显示为:
转换还不错。但在文本对齐(City, Country
,2010-2014
未右对齐)、标题颜色(灰色遮挡未完全覆盖)、\LaTeX
符号(简单地显示为LaTeX
)、item
标签(默认标签University Name
甚至出现在我放置的\item[]
显示)方面存在一些差异。
是否可以将转换做得更完美,这样就不会出现这些差异?目前,将我的上述cv.tex
文件转换为 的最有效方法是什么cv.html
?
答案1
您需要进行一些配置来更改 HTML 文件的格式。特别是,\hfill
TeX4ht 不支持类似的命令。幸运的是,您使用了自定义命令,而不是直接在文档中进行格式化,因此这很容易做到。
我要在您的文档中更改的一件事是,我将使用自定义环境而不是itemize
教育模块。这将使我们能够在这种情况下删除项目符号。这是更新后的 TeX 文件:
\documentclass[11pt]{article}
\newlength{\outerbordwidth}
\pagestyle{empty}
\raggedbottom
\raggedright
\usepackage[svgnames]{xcolor}
\usepackage{framed}
\usepackage{tocloft}
\usepackage{enumitem}
\usepackage{textcomp}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{hyperref}
%-----------------------------------------------------------
\setlength{\outerbordwidth}{3pt}
\definecolor{shadecolor}{gray}{0.75}
\definecolor{shadecolorB}{gray}{0.93}
%-----------------------------------------------------------
\setlength{\evensidemargin}{-0.25in}
\setlength{\headheight}{0in}
\setlength{\headsep}{0in}
\setlength{\oddsidemargin}{-0.25in}
\setlength{\tabcolsep}{0in}
\setlength{\textheight}{9.5in}
\setlength{\textwidth}{7in}
\setlength{\topmargin}{-0.3in}
\setlength{\topskip}{0in}
\setlength{\voffset}{0.1in}
%-----------------------------------------------------------
\newcommand{\resitem}[1]{\item #1 \vspace{-4pt}}
\newcommand{\resheading}[1]{%
\parbox{\textwidth}{\setlength{\FrameSep}{\outerbordwidth}%
\begin{shaded}%
\setlength{\fboxsep}{0pt}\framebox[\textwidth][l]{\setlength{\fboxsep}{4pt}\fcolorbox{shadecolorB}{shadecolorB}{\textbf{\sffamily{\mbox{~}\makebox[6.762in][l]{\large #1} \vphantom{p\^{E}}}}}}%
\end{shaded}%
}\vspace{-11pt}%
}
\newcommand{\school}[4]{\vspace{1.5mm}
\textbf{#1} \hfill #2 \textit{#3} \hfill \textit{#4} \vspace{1.5mm}
}
% extra environment for education, as you want to get rid of the bullet
\newenvironment{education}{\begin{itemize}[leftmargin=*]}{\end{itemize}}
%-----------------------------------------------------------
\begin{document}
\begin{tabular*}{7in}{l@{\extracolsep{\fill}}r}
\textbf{\Large Name} & \textbf{June, 2021} \\ Address & \textit{\href{mailto:}{Email}}
\end{tabular*}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\resheading{Education}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{education}
\item[]
\school
{University Name}
{City, Country\\}
{BSc - Physics}
{2010 - 2014}
\end{education}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\resheading{Technical Skills}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{itemize}
\item C++, Python
\item \LaTeX
\end{itemize}
\end{document}
然后您可以使用以下.cfg
文件来改变外观:
\Preamble{xhtml,fancylogo}
% handle bullet in education
\ConfigureEnv{education}{\ifvmode\IgnorePar\fi\EndP\HCode{<div class="education">}}{\ifvmode\IgnorePar\fi\EndP\IgnorePar\HCode{</div>}}{}{}
% set padding as you like
\Css{.education ul.itemize1{list-style:none;display:block;padding-left:0em;}}
\Css{.education ul.itemize1 li{display:block;margin:0;padding:0;}}
\Css{.education ul.itemize2 li{list-style:disc outside;display:list-item; }}
% heading boxes
\renewcommand{\resheading}[1]{%
\ifvmode\IgnorePar\fi\EndP\HCode{<div class="resheading">}%
\fcolorbox{shadecolorB}{shadecolorB}{#1}%
\HCode{</div>}%
}
\catcode`\:=11
% convert shadecolor to CSS
\get:xcolorcss{shadecolor}{\:shadecolor}
\Css{.resheading .colorbox{display:block; width:100\%;padding:3pt;font-size: 1.2em; font-weight:bold; box-sizing:border-box;}}
\Css{.resheading{border: 3px solid \:shadecolor;box-sizing:border-box;padding:1px;background:black;}}
\catcode`\:=12
% handle \school
\renewcommand{\school}[4]{%
\begin{tabular}{l r}%
\textbf{#1} & #2\\ \textit{#3} & \textit{#4} \\%
\end{tabular}%
}
% document styling
\Css{body{margin: 1em auto; max-width: 70ch}}
% table styling
\Css{table{width:100\%;}}
\begin{document}
\EndPreamble
我将描述一些重要的东西:
\Preamble{xhtml,fancylogo}
该fancylogo
选项将请求模拟正常\LaTeX
徽标格式的文本
% handle bullet in education
\ConfigureEnv{education}{\ifvmode\IgnorePar\fi\EndP\HCode{<div class="education">}}{\ifvmode\IgnorePar\fi\EndP\IgnorePar\HCode{</div>}}{}{}
% set padding as you like
\Css{.education ul.itemize1{list-style:none;display:block;padding-left:0em;}}
\Css{.education li{display:block;margin:0;padding:0;}}
此代码<div class="education">
在教育块周围添加。然后可以使用 CSS 删除项目符号。此\ifvmode\IgnorePar\fi\EndP
代码用于处理段落,必须使用它才能获得有效的 HTML 代码。
% heading boxes
\renewcommand{\resheading}[1]{%
\ifvmode\IgnorePar\fi\EndP\HCode{<div class="resheading">}%
\fcolorbox{shadecolorB}{shadecolorB}{#1}%
\HCode{</div>}%
}
\Css{.resheading .colorbox{display:block; width:100\%;padding:3pt;font-size: 1.2em; font-weight:bold; box-sizing:border-box;}}
\Css{.resheading{border: 1px solid black;box-sizing:border-box;}}
这处理了您的\resheading
命令。大多数原始代码在转换中根本没有用。我们只是使用\fcolorbox
来生成具有灰色背景的框。我们可以只使用 HTML 和 CSS 来实现这一点,但通过这种方式,您可以更改文档中的颜色,并且它也会在 HTML 中更改。
% handle \school
\renewcommand{\school}[4]{%
\begin{tabular}{l r}%
\textbf{#1} & #2\\ \textit{#3} & \textit{#4} \\%
\end{tabular}%
}
我已重新定义\school
为仅生成表格,因为这是实现所需格式的最简单方法。
最后重要的事情与您的文档的整体外观有关:
% document styling
\Css{body{margin: 1em auto; max-width: 70ch}}
这将设置页面的最大宽度并将其居中。
% table styling
\Css{table{width:100\%;}}
这将调整表格大小以使用整个页面的宽度。
使用编译
make4ht -c mycfg.cfg cv.tex
结果如下: