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

问题描述 投票:0回答:1

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

我的问题是每当我使用

<markdown src="'assets/md/data.md'"></markdown>
时,md文件肯定会显示在页面上,但就像所有markdown都被删除了,留下了未格式化的文本。 Output of md file。所以这就像所有的要点、标题大小、代码格式等......被神秘地删除,但bold markdown似乎有效。

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

<markdown>
选择器,而在单个页面上没有任何格式,我尝试过使用
[data]=""
,我已经搜索过文档和互联网示例,我很确定我的
packages.json
文件中的依赖项足够了。

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

这是我的相关

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```
angular angularjs markdown
1个回答
0
投票

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

显然,将 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>

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

© www.soinside.com 2019 - 2024. All rights reserved.