如何在移动设备上对 HTML 代码进行行格式化

很多程序员在编写 HTML 代码时，常常会遇到一些格式不整齐的问题。在桌面端，我们可以通过调整编辑器的字体大小或者直接使用插件来解决这个问题。但是，在移动设备上，我们该怎么办呢？

本文将介绍如何使用两个常见的方法，在移动设备上对 HTML 代码进行行格式化。

1. 使用 CSS white-space 属性

CSS 中的 white-space 属性用于控制元素内部的空白符如何处理。我们可以将其设置为 pre 或 pre-wrap，使得 HTML 代码中的换行符和空格都得以保留。同时，我们还可以通过设置 font-size 属性来调整字体大小，从而让代码看起来更整洁。

代码示例：

<style>
  pre {
    white-space: pre-wrap;
    font-size: 16px;
  }
</style>

<pre>
  &lt;div&gt;
    &lt;p&gt;这是一段<p>HTML 代码</p>，它可能会很长，如果没有格式化，会让人感到很不舒服。&lt;/p&gt;
  &lt;/div&gt;
</pre>

2. 使用 JS 库 highlight.js

highlight.js 是一个流行的开源 JS 库，它可以对 HTML 代码进行语法高亮，并且可以将格式化后的代码复制到剪贴板中。通过引入 highlight.js 库文件，并在代码块中添加相应的 class，我们即可快速实现 HTML 代码的行格式化。

代码示例：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/languages/xml.min.js"></script>

<pre><code class="hljs xml">
  &lt;div&gt;
    &lt;p&gt;这是一段<p>HTML 代码</p>，它可能会很长，如果没有格式化，会让人感到很不舒服。&lt;/p&gt;
  &lt;/div&gt;
</code></pre>

<script>hljs.highlightAll();</script>

以上是在移动设备上对 HTML 代码进行行格式化的两种方法。通过 CSS white-space 属性和 highlight.js 库，我们可以将 HTML 代码变得更加整洁易读。