Angular ngx-markdown 破坏 markdown 并转换为纯文本

Question

所以我的 Angular 项目遇到了问题，我的目标是使用 markdown 在网页上呈现内容，所以我决定尝试一下 ngx-markdown。现在我相信我已经正确导入了所有内容，正确使用了指令，等等......

我的问题是每当我使用

<markdown src="'assets/md/data.md'"></markdown>

时，md文件肯定会显示在页面上，但就像所有markdown都被删除了，留下了未格式化的文本。 。所以这就像所有的要点、标题大小、代码格式等......被神秘地删除，但bold markdown似乎有效。

我正在使用 TailwindCSS 进行样式，但是我尝试使用

<markdown>

选择器，而在单个页面上没有任何格式，我尝试过使用

[data]=""

，我已经搜索过文档和互联网示例，我很确定我的

packages.json

文件中的依赖项足够了。

现在自从我安装了 ngx-markdown、marked、prismjs、mermaid、clipboard、katex 和 emoji-toolkit 以来，我一直收到此错误，但我怀疑它会导致我的问题

这是我的相关

package.json

信息

"clipboard": "^2.0.11",
"emoji-toolkit": "^8.0.0",
"katex": "^0.16.0",
"marked": "^9.1.6",
"mermaid": "^10.8.0",
"ngx-markdown": "^17.1.1",
"prismjs": "^1.29.0",

我的 app.module.ts 文件

import { NgModule, SecurityContext } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { Scroll2TopComponent } from './shared/scroll2-top/scroll2-top.component';
import { FormsModule } from '@angular/forms';
import { HttpClient, HttpClientModule, provideHttpClient } from '@angular/common/http';

//External Modules
import { MarkdownModule, provideMarkdown } from 'ngx-markdown';

@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    HomeComponent,
    AboutComponent,
    NotFoundComponent,
    Scroll2TopComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    MarkdownModule.forRoot({
      loader: HttpClient,
      sanitize: SecurityContext.NONE,
      
    }),
    MarkdownModule.forChild()
  ],
  providers: [
    provideHttpClient(),
    provideMarkdown({ loader: HttpClient })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

最后只有我的“主页”页面上的 html

<section>
    <div>
        <div>
            <markdown [src]="'assets/md/2024-02-27.md'"></markdown>
        </div>
    </div>
</section>

编辑：我想我实际上应该包含 md 文件以实现可重复性：

---

### Syntax highlight
\`\`\`typescript
const language = 'typescript';
\`\`\`

### Lists
1. Ordered list
2. Another bullet point
   - Unordered list
   - Another unordered bullet

### Blockquote
> Blockquote to the max```

Answer 1

所以，我可以方便地回答我自己的问题。

显然，将 ngx-markdown 与 Tailwind CSS 结合使用也会给 React 用户带来这个问题。解决方案非常简单，只需安装 Tailwind Typography 插件，然后在类中使用“散文”类型即可。

安装顺风排版：

npm install -D @tailwindcss/typography

将

@tailwindcss/typography

包含在插件数组中的

tailwind.config.js

中：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography')
  ],
}

也可以在这里找到相关的 tailwind 文档：https://tailwindcss.com/docs/plugins#typography

完成所有这些后，就这么简单（我建议使用 max-w-full）：

<div class="prose max-w-full">
    <markdown [src]="'assets/md/data.md'"></markdown>
</div>

我希望这对互联网上遇到此问题的其他人有所帮助，学习框架是一个学习曲线:)