具有格式的HTML <div>标签

Question

嗨，我正在处理一个有角度的项目，并且我有一个字符串（实际上是一段代码）

package testData;\r\n\r\npublic class testOverride extends mainClass {\r\n\r\n\tpublic void add(int a) {\r\n\t\tint c = a + b + 2;\r\n\t\tSystem.out.println(c);\r\n\t}\r\n}\r\n\

我需要突出显示该字符串中的某些行，因为我将其从\n拆分并添加到数组中，以便我可以循环突出显示我想要的行

关于打字稿

lineList:{};//line array
this.lineList = this.file.split("\n");//splitting and adding to array 

在HTML上

<div *ngFor="let lines of lineList">
      <div>{{lines}}</div>
</div>

然后格式\r消失了

是否可以使用格式添加这些行？

Answer 1

\r并没有按照您的想法做。这被称为“回车”，在某些操作系统（主要是Windows，不知道是否还有其他操作系统）中，必须在\n之前引起换行。造成缩进的实际上是\t。

常规内联或块元素不保留标记中存在的空格。但是有一个特殊的标记<pre>，它确实保留空白。还将字体系列默认设置为等宽字体。

如果由于某种原因必须使用<pre>来模仿<div>标签，则可以通过使用CSS'white-space: pre;和font-family: monospace获得相同的输出

.code {
  white-space: pre;
  font-family: monospace;
}

<h3>Regular div tag</h3>
<div>
package testData;
public class testOverride extends mainClass {
	public void add(int a) {
		int c = a + b + 2;
		System.out.println(c);
	}
}
</div>

<h3>pre tag</h3>
<pre>
package testData;
public class testOverride extends mainClass {
	public void add(int a) {
		int c = a + b + 2;
		System.out.println(c);
	}
}
</pre>

<h3>div with CSS <code>white-space: pre;</code></h3>
<div class="code">
package testData;
public class testOverride extends mainClass {
	public void add(int a) {
		int c = a + b + 2;
		System.out.println(c);
	}
}
</div>