Question

以下LaTeX

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

在HTML页面上插入填充。

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

没有填充的标题：

插入段落中时，填充相同的内容。此外，在最初加载页面时，我可以短暂地（约0.3秒）看到代码：

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

感谢您的帮助。

Answer 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>

LaTeX意外填充和HTML渲染

1 个答案: