Angular - Render Markdown with \n

问题

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 &#x0a; ## Subtitle"

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

And that is sadly what I need

回答1:

\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

来源：https://stackoverflow.com/questions/57285768/angular-render-markdown-with-n

标签

html

angular

Markdown