Bullet points and Check boxes not working for markdown

Question

Scenario: I'm having an Angular 4 application where I use contentful as the content management system. So in contentful they have a feature to use as a markdown. In markdown as mentioned for single page applications, it is integrated and using the pipe mdToHtml to get the results for the content in the markdown field in contentful.

Question: Contentful markdown options works fine with the angular application, except Bullet points and Checkboxes. I am using https://www.npmjs.com/package/marked module as suggested.

In contentful for unordered list: I have used

Example:

* List
* List 2 

Also tried

- List
- List2

So on, but it doesn't show the bullet points, and the content is well separated.

Example 2: Checkboxes

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

Yet the same result as it splits the sentences but not showing the checkbox. Any idea? Because other parts such as headings, anchor tags working fine.

This is how my pipe looks like

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

Using the marked library, you should get the lists in the correct HTML output. See the StackBlitz I've created here: https://stackblitz.com/edit/angular-oahnaa

The output for,

* astrix 1
* astrix 2

Is:

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

If the markup is generated correctly, you should be able to get bullet points by adding the correct style to the ul element.

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

As for the checkboxes, they are not a part of the main the GFM spec. Therefor, it's not supported out of the box. Please see this issue: https://github.com/markedjs/marked/issues/689

You should be able to extend the renderer with the code given in that issue:

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