TdMarkdown 组件: td- 标记下

<td-markdown> 是一个能解析和使Github的口味降低的组件。 它基于 显示 图书馆.

说明: 此模块使用 多明我会 将 解析出 html 从 showdown lib 中进行消毒服务以避免 预算外 问题.

默认, --dev 构建将会在控制台上登录以下信息, 以便让您知道 :

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

API 总结

投入

• 内容 ?: 字符串

  • 将下调格式内容解析为 html 标记 .
  • 用来动态地加载数据. 譬如说. README.md 内容.

• 简单线断层 ?: 字符串

  • 设定段落和跨度内的新行字符解析为
    。 。 。 .
  • 默认为假.

• 主机Url : 字符串

  • 如果标记下包含相对路径,则需要这样做以生成正确的urls.

• 锁定 ?: 字符串

  • 跳来跳去.

• 文件链接扩展?: 字符串 []

  • 要监视锚标记内的文件扩展名 .
  • 点击以这些扩展结尾的链接会防止默认动作并发出"fileClicked"事件 .

活动

• 内容已读取: 未定义

  • 标定内容渲染完成后释放的事件 .

• 文件已点击: URL

  • 当锁定标签被点击, 而其“ href” 匹配“ fileLinkExtensions” 中的扩展名时, 发送 .

安装

此组件可以作为npm包安装.

npm i -save @covalent/markdown

设置

然后导入 共价马克下架模块 在您的 NGMudule 中:

import { CovalentMarkdownModule } from '@covalent/markdown';
@NgModule({
  imports: [
    CovalentMarkdownModule,
    ...
  ],
  ...
})
export class MyModule {}

他们

这个模块带有它自己的共价主题,它使用的材料主题用于导入我们的主题 scs 文件.

@use '@angular/material/theming' as mat;
@use '@covalent/markdown/markdown-theme' as markdown;

@include mat.core();

$primary: mat.define-palette($mat-orange, 800);
$accent: mat.define-palette($mat-light-blue, 600, A100, A400);
$warn: mat.define-palette($mat-red, 600);

$theme: mat.define-light-theme($primary, $accent, $warn);

@include markdown.covalent-markdown-theme($theme);

示例

Html : (英语)

<td-markdown> # Heading ## Sub Heading (H2) ### Steps (H2) </td-markdown>

输出 :

标题

分标题(H2)

步骤(H2)