所以我的 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```
所以,我可以方便地回答我自己的问题。
显然,将 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>
我希望这对互联网上遇到此问题的其他人有所帮助,学习框架是一个学习曲线:)