使用 make4ht 将 CV 模板从 tex 转换为 html

Question

您需要进行一些配置来更改 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

结果如下：

Answer 1