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

Question

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

问题： Contentful markdown 选项适用于 angular 应用程序，除了项目符号点和复选框。我正在按照建议使用 https://www.npmjs.com/package/marked 模块。

In contentful for unordered list: 我用过

示例：

* 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">

Answer 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>';
  }
};

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

Bullet points and Check boxes not working for markdown

html

markdown

contentful

angular