我正在尝试在网站上显示我的代码，但在正确保留空格缩进方面遇到问题。
例如给出以下代码片段：
<html>
<body>
Here is my code:
<pre>
def some_funtion
return 'Hello, World!'
end
</pre>
<body>
</html>
这在浏览器中显示为：
Here is my code:
def some_funtion
return 'Hello, World!'
end
当我希望它显示为：
Here is my code:
def some_funtion
return 'Hello, World!'
end
不同之处在于 HTML pre 标记的当前缩进级别被添加到代码的缩进中。我使用 nanoc 作为静态网站生成器，并且使用 google prettify 来添加语法突出显示。
有人可以提供任何建议吗？
注释缩进
由于浏览器会忽略注释，因此您可以使用它们来缩进pre标签内容。
Solution
<html>
<body>
<main>
Here is my code with hack:
<pre>
<!-- -->def some_function
<!-- --> return 'Hello, World!'
<!-- -->end
</pre>
Here is my code without hack:
<pre>
def some_function
return 'Hello, World!'
end
</pre>
</main>
<body>
</html>
注意：添加了一个主包装以为评论提供足够的空间。
优点
- 无需 JavaScript
- 可以静态添加
- 缩小不会影响缩进并减少文件大小
缺点
- 需要最少的评论空间
- 除非使用构建工具，否则不太优雅
删除节点缩进
更好的解决方案是使用构建过程或后端渲染过程删除前导空白。如果你使用的是node.js，那么你可以使用我编写的一个名为推介会 https://github.com/daleeidd/predentation。您可以使用任何您想要的语言来构建类似的工具。
Before
<html>
<body>
Here is my code:
<pre>
def some_function
return 'Hello, World!'
end
</pre>
</body>
</html>
After
<html>
<body>
Here is my code:
<pre>
def some_function
return 'Hello, World!'
end
</pre>
</body>
</html>
优点
缺点
- 需要工作流程中的构建步骤
- 不处理非
pre元素与white-space: pre由 CSS 添加
使用 JavaScript 删除缩进
请参阅此答案以使用 JavaScript 删除缩进 https://stackoverflow.com/a/9353201/3572096
优点
缺点
- JavaScript 可以被禁用
- 空白会增加文件大小
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
