Angular-使用\ n渲染Markdown [英] Angular - Render Markdown with \n

问题描述

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

我在Angular 5上使用了

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

编辑

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

像这样渲染降价标签:

 < markdown ngPreserveWhitespaces>#标题
##字幕</markdown> 

但不是这样:

  const content =#标题
 ##字幕"< markdown ngPreserveWhitespaces [data] ="content"></markdown> 

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

解决方案

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

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

 < markdown ngPreserveWhitespaces>#标题
##字幕</markdown> 

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

I'm trying to render Markdown inside an Angular application.

I was using ngx-markdown with Angular 5 and it was working fine.

However, I had to upgrade to Angular 8 and since then, the \n are not rendered anymore. I read that with Angular 6, white spaces are not preserved anymore and that could be the issue.

ngx-markdown proposes a fix by adding the directive ngPreserveWhitespaces but it still doesn't work.

I've tried another library, ngx-md, but it also fails to render \n

With ngx-markdown:

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

With ngx-md:

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

They both render this:

I've also tried to do a .split('\n') and render the result using *ngFor, but the result is not perfect. Some block of text needs to be rendered at once, like code block.

EDIT

Thanks to Andrei Tătar, I made little progress.

Rendering the markdown like this works:

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

But not like this:

const content = "# Title 
 ## Subtitle"

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

And that is sadly what I need

解决方案

\n means a new line in javascript. Html has a different syntax. You can add this character in html using 
.

Note: you still need to use: ngPreserveWhitespaces

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

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

这篇关于Angular-使用\ n渲染Markdown的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！