Содержимое тега уценки не отображается должным образом в angular
Я использую NPM NGX-markdown для отображения контента в теге уценки.
<markdown [data]='markdown' ></markdown>
Я устанавливаю необходимый NPM и импортирую, как показано ниже.
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"
],
Я получаю ссылку отсюда. стекбизз
На этой странице показано правильное содержимое, как показано ниже.
Когда я использую тот же код, он показывает этот тип.
В моем случае список номеров не показывает, как мы можем это исправить.
Я использую тот же код, что и предоставленный справочный код стека Bizz.
Ответы 2
Похоже, проблема здесь в CSS. Возможно ли, что ваши стили переопределяют стили, которые вы ожидаете увидеть? Пробовали ли вы однажды удалить весь импорт .css, кроме призмы? А что вы видите в инструментах разработки Chrome, когда проверяете элементы списка?
По сути, вам нужно посмотреть, есть ли у вас
li {
list-style: none;
}
В любом из ваших файлов .css и переопределите его в Styles.css или удалите файл, вызывающий проблему.
Да я вижу. Списки не отображаются. Можете ли вы предоставить стек вашего кода? Я не могу воспроизвести вашу проблему, поэтому мне трудно помочь. Кроме того, вы можете попробовать просмотреть CSS-код списков с помощью инструментов разработчика и посмотреть, есть ли у вас такой стиль этот в элементах списка.
Я видел пример кода, который вы использовали, но, видимо, в вашем коде что-то не так, если вы видите разные результаты. Пожалуйста, предоставьте минимальный воспроизводимый пример, чтобы я мог помочь.
Код Angular для отображения содержимого Markdown
npm install marked
import { Component, OnInit } from '@angular/core';
import * as marked from 'marked';
@Component({
selector: 'app-markdown-display',
templateUrl: './markdown-display.component.html',
styleUrls: ['./markdown-display.component.css']
})
export class MarkdownDisplayComponent implements OnInit {
markdownContent: string = '# Your Markdown Content Here';
constructor() { }
ngOnInit(): void {
this.markdownContent = marked(this.markdownContent);
}
}Чтобы отобразить содержимое уценки в вашем приложении Angular, вы можете использовать отмеченную библиотеку. Сначала вам необходимо установить отмеченную библиотеку с помощью npm. Вот процесс:
ok Чтобы отобразить содержимое уценки в вашем приложении Angular
Я пытаюсь удалить все свойства .css, кроме призмы, но возникает та же проблема. В моем случае в теге уценки не отображается только нумерация (упорядоченный список и нумерация неупорядоченного списка). Я также добавил изображение, пожалуйста, посмотрите оба изображения, чтобы понять мою проблему.