Angular - 使用 \n 渲染 Markdown

2024-03-16

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

我正在使用ngx-markdown https://github.com/jfcere/ngx-markdown与 Angular 5 一起使用,效果很好。

但是,我必须升级到 Angular 8,从那时起,\n不再渲染。我读到,在 Angular 6 中,空格不再被保留,这可能是问题所在。

ngx-markdown https://github.com/jfcere/ngx-markdown提出通过添加指令进行修复ngPreserveWhitespaces但它仍然不起作用。

我尝试过另一个图书馆,ngx-md https://github.com/dimpu/ngx-md,但它也无法渲染\n

With ngx-markdown https://github.com/jfcere/ngx-markdown:

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

With ngx-md https://github.com/dimpu/ngx-md:

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

他们都渲染了这个:

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

EDIT

感谢安德烈·塔塔尔(Andrei Tătar),我几乎没有取得任何进展。

像这样渲染 markdown 是有效的:

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

但不是这样的:

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

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

可悲的是,这就是我所需要的


\n表示 JavaScript 中的新行。 Html 有不同的语法。您可以使用以下命令在 html 中添加此字符&#x0A;.

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

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular - 使用 \n 渲染 Markdown 的相关文章