LaTeX 在 HTML 中意外填充和呈现答案

【问题标题】：LaTeX unintended padding and rendering in HTMLLaTeX 在 HTML 中意外填充和呈现
【发布时间】：2018-08-14 07:19:49
【问题描述】：

以下乳胶

\(
\newcommand{bvec}[1]{\overrightarrow{\boldsymbol{#1}}}
\newcommand{uvec}[1] {\widehat{\boldsymbol{#1}}} 
\newcommand{vec}[1]{\overrightarrow{#1}} 
\)

在我的 HTML 页面上插入一个填充。

当写在“head”标签空间或“body”下方时：

没有填充的标题：

插入段落中时相同的故事，无论放置在哪里都有填充。此外，在最初加载页面时，我可以简短地看到代码（~.3 秒）：

如何摆脱填充和启动渲染？

感谢您的帮助。

【问题讨论】：

标签： html latex padding

【解决方案1】：

我认为问题不在于 Latex 代码，大多数 HTML 标签往往会附加填充和/或边距。解决方案是使用 CSS 简单地摆脱它们。您可以使用inline CSS style 自定义段落标签。这是一个 MVCE：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Testing</title>
</head>
<body>
<div>

    <p style="margin: 0; padding: 0;">Paragraph WITHOUT padding and margin</p>
    <p style="margin: 0; padding: 0;">Paragraph WITHOUT padding and margin</p>
    <p>Normal paragraph tag with padding and margin</p>
    <p style="margin: 0; padding: 0;">Paragraph WITHOUT padding and margin</p>
    <p style="margin: 0; padding: 0;">Paragraph WITHOUT padding and margin</p>
    <p style="margin: 0; padding: 0;">--------</p>
    <p style="margin: 0; padding: 0;">\(
        \newcommand{bvec}[1]{\overrightarrow{\boldsymbol{#1}}}
        \newcommand{uvec}[1] {\widehat{\boldsymbol{#1}}}
        \newcommand{vec}[1]{\overrightarrow{#1}}
        \)</p>
    <p style="margin: 0; padding: 0;">\(
        \newcommand{bvec}[1]{\overrightarrow{\boldsymbol{#1}}}
        \newcommand{uvec}[1] {\widehat{\boldsymbol{#1}}}
        \newcommand{vec}[1]{\overrightarrow{#1}}
        \)</p>
</div>
</body>
</html>

编辑！

由于您使用乳胶命令输出实际乳胶结果（复杂的数学符号）...您应该使用MathJax。我建议您创建自己的 HTML 文件并自己运行它，因为 w3schools 往往不支持外部文件...要创建 html 文件，请查看以下 video。现在，我已经完成了 MathJax 的初始化，这样您就可以立即开始 Latex 编码（您可以使用 TexMaker 或 TexStudio 并将 Latex 代码粘贴到您的 html 文件中。请注意，当涉及到复杂的绘图时，它往往会受到限制，例如使用 Tikz 或 pgfplots（如果你想要如此复杂的图表，你需要将它们渲染为图像，然后将它们作为图像放入你的 HTML 文件中。这是更新的代码；）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Latex Example</title>
	<script type="text/x-mathjax-config">
	MathJax.Hub.Config({
		tex2jax: {
		inlineMath: [ ['$','$'], ["\\(","\\)"] ],
		processEscapes: true
		}
	});
	</script>
	<script type="text/javascript"
		src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
	</script>
	</head>

	<body>
		<p style="margin: 0; padding: 0;">Paragraph WITHOUT padding and margin</p>
		<p style="margin: 0; padding: 0;">\(
			\newcommand{bvec}[1]{\overrightarrow{\boldsymbol{#1}}}
			\newcommand{uvec}[1] {\widehat{\boldsymbol{#1}}}
			\newcommand{vec}[1]{\overrightarrow{#1}}
			\)
			$\bvec{Worked!}$ This one NO margins nor padding</p>
		<p style="margin: 0; padding: 0;">Paragraph WITHOUT padding and margin</p>
		<p style="margin: 0; padding: 0;">Paragraph WITHOUT padding and margin</p>
		<p>\(
			\newcommand{bvec}[1]{\overrightarrow{\boldsymbol{#1}}}
			\newcommand{uvec}[1] {\widehat{\boldsymbol{#1}}}
			\newcommand{vec}[1]{\overrightarrow{#1}}
			\)
			$\bvec{Worked!}$ This one HAS margins and padding</p>
		<p style="margin: 0; padding: 0;">Paragraph WITHOUT padding and margin</p>
	</body>
</html>

输出！

编辑 2！

您基本上希望在用户不可见的... 标记中包含文本。您可以做的是将您的 标签自定义为以下内容：...<\p>。在 标记内，文本将不可见，因为显示设置为none。这是最终结果：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Latex Example</title>
	<script type="text/x-mathjax-config">
	MathJax.Hub.Config({
		tex2jax: {
		inlineMath: [ ['$','$'], ["\\(","\\)"] ],
		processEscapes: true
		}
	});
	</script>
	<script type="text/javascript"
		src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
	</script>
	</head>

	<body>
		<p style="margin: 0; padding: 0;">Paragraph without padding nor margins</p>
		<p style="margin: 0; padding: 0;">Paragraph without padding nor margins</p>
		<p>Paragraph tag that is not customize and has marigns, padding and display value is display : block (i.e. visible to user).</p>
		<p style="margin: 0; padding: 0;">Paragraph without padding nor margins</p>
		<p style="margin: 0; padding: 0;">Paragraph without padding nor margins.</p>
		<!--
		Here is the text that is not visible to the user. This is because of "display: none;"
		-->
		<p style="display: none;">\(
			\newcommand{bvec}[1]{\overrightarrow{\boldsymbol{#1}}}
			\newcommand{uvec}[1] {\widehat{\boldsymbol{#1}}}
			\newcommand{vec}[1]{\overrightarrow{#1}}
			\)
			$\bvec{Worked!}$ This one NO margins nor padding
			Here is a tag that us useful but not visible to user
		</p>
		<!--
		Now, everything is visible from now on.
		-->
		<p style="margin: 0; padding: 0;">Paragraph without padding nor margins</p>
		<p style="margin: 0; padding: 0;">Paragraph without padding nor margins</p>
		<p>Paragraph tag that is not customize and has marigns, padding and display: block (i.e. visible to user).</p>
		<p style="margin: 0; padding: 0;">Paragraph without padding nor margins</p>
		<p style="margin: 0; padding: 0;">Paragraph without padding nor margins</p>
		<p>$\bvec{Worked!}$ This one HAS is an uncustomized tag (regular)</p>
		<p style="margin: 0; padding: 0;">Paragraph without padding nor margins</p>
		<p style="margin: 0; padding: 0;">Paragraph without padding nor margins</p>
		<p style="margin: 0; padding: 0;">$\bvec{Worked!!!!}$ This one is visible with no padding nor margins</p>
		<p style="margin: 0; padding: 0;">Paragraph without padding nor margins</p>
		<p style="margin: 0; padding: 0;">Paragraph without padding nor margins</p>
	</body>
</html>

【讨论】：

不行，恐怕 - 插入的空间仍然存在：w3schools.com/code/tryit.asp?filename=FU8XHDQU0CO5
我明白了，您是在尝试生成乳胶命令还是编写实际/文字乳胶代码？以及您使用的是什么操作系统？
两者；我定义了新的命令以方便矢量编写：puu.sh/BdjOw/341cc21901.png 我使用的是 Windows 7 Pro
删除 '$\bvec{Worked!}$ 这个没有边距也没有内边距'，然后渲染其余部分。看来
有一个先天的空间，它会在没有预期文本的情况下插入。问题依然存在。
我从您的代码中找到了一个“解决方法” - 可以在任何方程式之前简单地插入代码，并且不会插入空格。如果您找到一种直接消除空间的方法（即
本身不再插入空间），请分享。问题已解决 - 感谢您的协助。