Angular2-Markdown 是一个在 Angular2 中使用 markdown 的 npm 包。它方便了在 Angular2 中显示 markdown 文本，同时还提供了基于 showdown 的各种 markdown 配置和扩展。本文将详细介绍如何使用 @dsoko2/angular2-markdown，并提供一些需要注意的常见问题。
安装
首先，需要安装 @dsoko2/angular2-markdown：
npm install @dsoko2/angular2-markdown --save
导入
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - -------------- - ---- ---------------------------- ----------- ------------- --------------- -------- --------------- ---------------- ---------- -------------- -- ------ ----- --------- --
使用
使用 @dsoko2/angular2-markdown 很简单。在模板中使用 markdown 元素，例如：
<markdown> # This is a heading ## And this is a subheading </markdown>
你还可以把 markdown 内容作为输入参数传递到 markdown 组件中：
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: `<markdown [src]="'http://example.com/markdown.md'"></markdown>`
})
export class MyComponent {}这里的 [src] 输入属性可以是文件路径，也可以是 markdown 内容字符串。
扩展
@dsoko2/angular2-markdown 可以通过配置对象来扩展 Markdown 渲染。在 MarkdownModule 的 forRoot 方法中，你可以传入四个可选的参数： flavor、smartyPants、emoji 和 extensions。
flavor
flavor 可以让你更改默认的 Markdown 渲染器。例如，如果你想使用 Github 风格的 Markdown 渲染器，可以像这样传入配置：
MarkdownModule.forRoot({
flavor: 'github'
});smartyPants
smartyPants 可以将普通文本中的引号和破折号转换成正确的字符。
MarkdownModule.forRoot({
smartyPants: true
});emoji
如果你的 markdown 中使用了 emoji 表情，需要启用 emoji 选项。
MarkdownModule.forRoot({
emoji: true
});extensions
extensions 可以用来添加更多的 markdown 扩展。以下是一个示例：
-- -------------------- ---- -------
------ - -------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
-----------
-------- -
------------------------
----------- ---- --------------
--
-
--
------ ----- -------- --常见问题
- 如何引入 CSS 样式？
在默认情况下， @dsoko2/angular2-markdown 不会提供任何样式。因此，如果需要样式，需要自行将 CSS 引入到项目中。例如：
<link rel="stylesheet" href="highlight.js/styles/github.css">
- 如何使用自定义黑名单？
默认情况下， @dsoko2/angular2-markdown 会在渲染过程中过滤掉一些 HTML 元素，以防止 XSS 攻击。如果需要添加/修改黑名单，可以像下面这样在模块中配置：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------------- ------------- - ---- ----------------------------
-----------
------------- ---------------
-------- -
--------------
------------------------
-------------- -
--------- -----
---------- --- --------------------
---------- -------
-
--
--
---------- --------------
--
------ ----- --------- --这里创建了一个名为 MyCustomSanitizer 的类，并将 sanitize 和 blacklist 选项传递给 MarkdownModule。
- 如何处理自定义 HTML 元素？
如果你想让渲染后的 markdown 中包含自定义的 HTML 标签，可以指定 sanitize 和 allowedTags 参数。
MarkdownModule.forRoot({
markedOptions: {
sanitize: false,
allowedTags: ['span', 'pre']
}
});渲染后，所有的 span 和 pre 元素都将保留在 HTML 中。
- 如何自定义 showdonw.js 中的 renderer？
你可以使用 MarkdownComponent 来自定义 showdown.js 中的渲染器。例如：
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------------------
------------
--------- ---------------
--------- -
----------
-- ------ -------
-- -------------- --
-----------
--
--
------ ----- ----------- ------- ----------------- -
-------------- - -
---- -- - -------- ----
- ---- - --- -
--------------
- --- - -- -
- --- - -- -
--
------------- -
--------------------------------- ------
---------------------------
-------- ------ ------- ------ ------- -- -
----- -- - ----------------------------
------ -
---------- -----------
-------
-- ------------- ------------------ --------------------
------------
--
--
---
-
-在这个例子中，我们继承了 MarkdownComponent，并在 ngOnChanges 生命周期钩子中更改了 Showdown.js 的渲染器。
结论
Angular2-Markdown 是一个非常有用的工具，可以轻松地在 Angular2 中使用 markdown。它还提供了各种配置选项和扩展，以满足不同的需求。希望通过本文，你已经了解了如何使用这个 npm 包，同时也能够解决一些常见问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc681e8991b448dd35f