Angular 有没有办法在 HTML 页面中显示代码片段？

Question

我正在尝试在网页中显示静态代码。Angular 有没有办法在 HTML 页面中显示代码片段？

Answer 1

我认为您正在寻找的是ngx-highlightjs。

它可以自动检测语言，易于通过 css 安装和自定义，具有多个主题等。

查看他们的演示站点。

Answer 2

在你的html代码中

<pre>
  <code [innerHTML]="code"></code>
</pre>
 Java Code 
<pre>
  <code [innerHTML]="java_code"></code>
</pre>

在打字稿文件中

code = `
export model = new Model({
  a:1,
  b:function(){}
})
`;

  java_code = `
  public class Example {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
  }
 `;

尝试stackblitz 示例

Answer 3

无需任何外部库即可在网页中显示代码片段。您可以简单地利用code或pre标签。将片段存储为字符串并使用变量进行显示。

应用程序组件.ts：

snippet = 
`function test(){
  console.log('Test');
}`

应用程序组件.html：

<pre>{{snippet}}</pre>

<code>{{snippet}}</code>

和code都pre以相同的格式显示片段，但仅pre提供带换行符的格式。

演示： https: //stackblitz.com/edit/angular-qvfk4u