☰

latex 转为 html 并折叠

tag-icon • tag-icon html
latex 转为 html 并折叠

有针对这个的解决方法吗

折叠/展开部分以在 PDF 中展开

就 HTML 而言？换句话说，我可以编译为 HTML 并折叠我作品的某些部分吗？

比如说，我想要这样的东西

\documentclass{article}

\begin{document}

\begin{thm}
blah blah blah
\end{thm}
\begin{collapse}
\begin{proof}
  First step is true.
  \begin{collapse}
  First step is true because blah blah blah. 
  \end{collapse}
  Second step is true.
  Final step is true. 
\end{proof}
\end{collapse}

\end{document}

生成 HTML，我可以单击某个内容来展开证明，也可以单击其他内容来展开详细信息。如果“证明”一词只是作为链接出现就好了。我正在尝试找到可以做到这一点的简单 CSS。并且折叠环境应该接受关于将哪些文本变成链接的参数。

以下是 HTML/CSS/JS：

http://cssdeck.com/labs/vx3fpxc0

（我不知道该链接中的代码是否正确。我只是修改了其他人的代码以使其可以工作。）

答案1

以下是使用 的解决方案tex4ht。我稍微修改了您的示例，以提供thm和 折叠环境的定义：

% https://tex.stackexchange.com/q/467746/2891
\documentclass{article}
\usepackage{amsthm}
\newtheorem{thm}{Theorem}


\newenvironment{collapse}{}{}

\begin{document}

\begin{thm}
blah blah blah
\end{thm}
\begin{collapse}
\begin{proof}
  First step is true.
  \begin{collapse}
  First step is true because blah blah blah. 
  \end{collapse}
  Second step is true.
  Final step is true. 
\end{proof}
\end{collapse}

\end{document}

JavaScript 代码应该放在文件中collapse.js：

$('[data-toggle]').on('click', function(){
  var id = $(this).data("toggle"),
      $object = $("#" +  id),
      className = "collapse";

  if ($object) {
    if ($object.hasClass(className)) {
      $object.removeClass(className)
      $(this).text("Collapse");
    } else {
      $object.addClass(className)
      $(this).text("Expand");
    }
  }
});

最后，我们必须配置tex4ht以包含所有 JavaScript 并为collapse环境生成可用的代码。将以下代码放入myconfig.cfg文件中：

\Preamble{xhtml}
\newcounter{collapseid}
\ConfigureEnv{collapse}{%
\stepcounter{collapseid}
\edef\currentid{collapse-\arabic{collapseid}}
\ifvmode\IgnorePar\fi\EndP\HCode{<div  class="collapse-label"><a data-toggle="\currentid" href="\#">Expand</a></div>\Hnewline<div id="\currentid" class="collapse">}%
\par
}
{\ifvmode\IgnorePar\fi\EndP\HCode{</div>}\par}{}{}
\Css{.collapse{display:none;}}
\Css{.open{display:block;}}
\Configure{@/BODY}{\HCode{<script class="cssdeck" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>}}
\Configure{@/BODY}{\HCode{<script type="text/javascript" src="collapse.js"></script>}}

\begin{document}

\EndPreamble

该\ConfigureEnv{collapse}命令配置插入到文档的 HTML 代码。它还id为每个折叠环境生成唯一属性并处理段落结尾。该\Css命令用于必要的 CSS 配置，\Configure{@/BODY}命令用于在页面末尾插入对 Java Script 文件的请求。

可以使用以下命令编译该文档：

make4ht -c myconfig.cfg filename.tex

结果如下（没有 HTML 标头）：

   <div class="newtheorem">
<!--l. 12--><p class="noindent" ><span class="head">
<a 
 id="x1-2r1"></a>
<span 
class="cmbx-10">Theorem 1.</span>  </span><span 
class="cmti-10">blah blah blah</span>
</p>
   </div>
   <div class="collapse-label"><a data-toggle="collapse-1" href="#">Expand</a></div> 
<div id="collapse-1" class="collapse">
<!--l. 16--><p class="indent" >
</p>
   <div class="proof">
<!--l. 17--><p class="indent" >   <span class="head">
<span 
class="cmti-10">Proof.</span> </span>First step is true.   </p><div class="collapse-label"><a data-toggle="collapse-2" href="#">Expand</a></div> 
<div id="collapse-2" class="collapse">
<!--l. 19--><p class="indent" >   First step is true because blah blah blah.
</p></div>
<!--l. 21--><p class="indent" >   Second step is true. Final step is true.                                               □
</p>
   </div>
   </div>
   <script class="cssdeck" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><script type="text/javascript" src="collapse.js"></script> 
</body> 
</html>

这是一个交互式示例

相关内容