markdown tag content not properly showing in angular

Question

I am using NGX-markdown NPM for show content in markdown tag.

<markdown [data]='markdown' ></markdown>

I install required NPM and import like below.

import 'prismsjs';
import 'prismjs/components/prism-typescript.min.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/plugins/line-highlight/prism-line-highlight.js';

angular.json --

"styles": [
              "src/styles.css",
              "node_modules/ngx-toastr/toastr.css",
              "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "node_modules/@costlydeveloper/ngx-awesome-popup/styles/theme.css",
              "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css",
              "node_modules/prismjs/themes/prism-okaidia.css"
            ],

I get reference from this. stackbizz

In this page showing correct content like below.

first image

When I use same code then its showing this type.

second image

In My case list of number is not showing how we can fix this.

I am using Same code like I provided stack Bizz reference code.

Answer 1

It looks like the issue here is with css. Is it possible that your styles is overriding the styles that you expect to see? Did you try to remove all of the .css imports except for the prism once? And what do you see in chrome dev tools when you check on the elements of the list?

Basically you need to see if you have a

li {
    list-style: none;
  }

In any of your .css files and override it in styles.css or remove the file that causes the issue.