如何在angular中使用marked

引言：

问题背景：

项目中需要使用markdown的格式显示文本。

什么是marked？

marked是一个流行的 JavaScript Markdown 解析器和编译器。它的主要作用是将 Markdown 格式的文本转换为 HTML 格式，使得在网页开发和各种应用程序中可以方便地展示和处理 Markdown 内容。

Markdown 是一种轻量级标记语言，以简洁易读易写的语法被广泛应用于文档撰写、博客创作、技术文档等领域。marked库通过解析 Markdown 文本中的各种语法元素，如标题、段落、列表、链接、代码块等，将其转换为对应的 HTML 标签和结构。

---

在 Angular 项目中安装 marked：

1.网上搜了一篇使用教程，根据步骤安装相关依赖

npm install marked
npm install @types/marked

2.快速创建Pipe

ng generate pipe marked

3.创建完成后，引入marked，更改pipe中的transform，解析 Markdown 并返回 HTML 字符串

import { Pipe, PipeTransform } from '@angular/core';
import * as marked from 'marked';

@Pipe({
  name: 'marked'
})
export class MarkedPipe implements PipeTransform {
  transform(value: any): any {
    if (value && value.length > 0) {
      return marked(value);
    }
    return value;
  }
}

4.使用pipe将字符串转换为html格式

 markdownContent = '# 标题\n这是一段Markdown内容。';    

    <div [innerHTML]="markdownContent|marked"></div>

出现问题及解决方法：

 因为前面第一步默认安装最新版的marked，可能是兼容性问题会报错

  类型 "typeof import("d:/pjt/camm/Codes/***/node_modules/marked/lib/marked")" 没有调用签名。

尝试降低marked的版本，用4.3.0版本，再重新安装依赖，解决transform中marked的报错

 

目前为止，pipe文件引用marked的地方还有报错，根据编辑器报错提示尝试下面的两种方法：

import * as marked from 'marked';

无法找到模块“marked”的声明文件。“d:/pjt/camm/Codes/***/node_modules/marked/lib/marked.cjs”隐式拥有 "any" 类型。
  尝试使用 `npm i --save-dev @types/marked` (如果存在)，或者添加一个包含 `declare module 'marked';` 的新声明(.d.ts)文件

1. 运行命令 npm i --save-dev @types/marked：

   这个命令会安装 marked 模块的类型声明文件，让 TypeScript 能够正确识别 marked 的类型。如果安装成功，TypeScript 编译器将不再报找不到模块声明文件的错误。

2. 添加自定义声明文件：如果安装 @types/marked 不起作用，可以尝试手动添加一个声明文件。在项目中创建一个 marked.d.ts 文件，并在其中添加以下内容：

   declare module 'marked';

这个声明文件告诉 TypeScript，marked 模块是存在的，但没有具体的类型定义。在某些情况下，这可以解决找不到模块声明文件的错误。不过，这种方法可能会导致一些类型安全问题，因为 TypeScript 无法对 marked 的使用进行严格的类型检查。

在尝试第一种方法之后，没起作用，我又尝试了第二种方法，成功解决了报错。

但是在运行项目时又控制台出现报错：

core.js:7744 ERROR TypeError: marked__WEBPACK_IMPORTED_MODULE_0__ is not a functioncore.js:7744 ERROR TypeError: marked__WEBPACK_IMPORTED_MODULE_0__ is not a function

 原因：这个错误通常是因为 marked 模块的导入或使用方式不正确导致的。

而我在pipe文件中引入marked使用的是

import * as marked from 'marked';

解决方案：

1.先查看了一下官方文档，猜测可能是使用方式错了，修改使用的api，解决问题

import { Pipe, PipeTransform } from '@angular/core';
import * as marked from 'marked';

@Pipe({
  name: 'marked'
})
export class MarkedPipe implements PipeTransform {
  transform(value: any): any {
    if (value && value.length > 0) {
      return marked.parse(value); //改成marked.parse
    }
    return value;
  }
}

2.搜了一下类似报错，说是只需要将使用es6解析marked即可，即 import { marked } from 'marked';

以上两种方法都能解决控制台报错。

最终效果：