Angular-使用\ n渲染Markdown

时间:2019-07-31 07:50:08

标签: html angular markdown

我正在尝试在Angular应用程序中渲染Markdown。

我在Angular 5中使用ngx-markdown,并且运行良好。

但是,我必须升级到Angular 8,此后,\n不再呈现。我读到Angular 6,不再保留空格,这可能是问题所在。

ngx-markdown通过添加伪指令ngPreserveWhitespaces提出了解决方案,但仍然无法正常工作。

我尝试了另一个库ngx-md,但它也无法呈现\n

使用ngx-markdown

<markdown ngPreserveWhitespaces >
    # Title \n ## Subtitle
</markdown>

使用ngx-md

<ngx-md>
  # Title \n ## Subtitle
</ngx-md>

他们都渲染了这个:

enter image description here

我也尝试过执行.split('\ n')并使用* ngFor渲染结果,但是结果并不完美。需要立即渲染某些文本块,例如代码块。

编辑

感谢安德烈·塔塔尔(AndreiTătar),我的进步很小。

像这样渲染降价:

<markdown ngPreserveWhitespaces >
    # Title &#x0a; ## Subtitle
</markdown>

但不是这样:

const content = "# Title &#x0a; ## Subtitle"

<markdown ngPreserveWhitespaces [data]="content" >        
</markdown>

可悲的是我需要的

1 个答案:

答案 0 :(得分:1)

\n表示javascript中的新行。 HTML具有不同的语法。您可以使用&#x0A;在html中添加此字符。

注意:您仍然需要使用: ngPreserveWhitespaces

<markdown ngPreserveWhitespaces >
# Title  &#x0a; ## Subtitle
</markdown>

https://stackblitz.com/edit/ngx-markdown-ps7x5j?file=src/app/app.component.html