项目符号点和复选框不适用于降价答案

【问题标题】：Bullet points and Check boxes not working for markdown项目符号点和复选框不适用于降价
【发布时间】：2018-11-23 23:28:07
【问题描述】：

场景：我有一个 Angular 4 应用程序，我在其中使用 contentful 作为内容管理系统。因此，在内容方面，它们具有可用作降价的功能。在单页应用程序中提到的markdown中，它被集成并使用管道mdToHtml来获取内容中markdown字段中内容的结果。

问题： 内容丰富的降价选项适用于 Angular 应用程序，但项目符号点和复选框除外。我按照建议使用https://www.npmjs.com/package/marked 模块。

在内容丰富的无序列表中：我用过

例子：

* List
* List 2

也试过了

- List
- List2

依此类推，但它不显示要点，并且内容很好地分开。

示例 2：复选框

- [ ] Mercury
- [x] Venus
- [x] Earth (Orbit/Moon)

但结果与拆分句子但未显示复选框相同。任何想法？因为标题、锚标记等其他部分工作正常。

这就是我的管道的样子

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

@Pipe({
  name: 'mdToHtml'
})
export class MdToHtmlPipe implements PipeTransform {

  constructor() {
  }

  transform(value: string): any {
    return marked(value || '');
  }

}

HTML

<p [innerHtml]="example.welcomeParagraph | mdToHtml">

【问题讨论】：

这更多是您使用的库的问题。标记为 npm 模块。如果您需要自定义 HTML 输出，您可能必须将该标记写入 HTML 函数。

标签： html angular markdown contentful

【解决方案1】：

使用标记的库，您应该在正确的 HTML 输出中获得列表。查看我在这里创建的 StackBlitz：https://stackblitz.com/edit/angular-oahnaa

输出，

* astrix 1
* astrix 2

是：

<ul> <li>astrix 1</li> <li>astrix 2</li>

如果标记生成正确，您应该能够通过向ul 元素添加正确的样式来获得要点。

ul {
  list-style-type: circle; /* this should be the default style */
}

至于复选框，它们不是主要 GFM 规范的一部分。因此，它不支持开箱即用。请看本期：https://github.com/markedjs/marked/issues/689

您应该能够使用该问题中给出的代码来扩展渲染器：

var renderer = new marked.Renderer();
renderer.listitem = function(text) {
if (/^\s*\[[x ]\]\s*/.test(text)) {
text = text
  .replace(/^\s*\[ \]\s*/, '<i class="empty checkbox icon"></i> ')
  .replace(/^\s*\[x\]\s*/, '<i class="checked checkbox icon"></i> ');
    return '<li style="list-style: none">' + text + '</li>';
  } else {
    return '<li>' + text + '</li>';
  }
};

【讨论】：