Angular中NGX-markdown代码行号不显示问题求助

以下是针对问题的具体排查和解决步骤：

• 修正PrismJS导入拼写错误
  你当前导入的是import 'prismsjs';，这里多了一个s，正确的包名是prismjs，修改为：

  import 'prismjs';
  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';
  

• 开启NGX-Markdown的行号配置
  在导入MarkdownModule的模块（比如AppModule）中，需要显式启用Prism的行号功能：

  import { MarkdownModule } from 'ngx-markdown';
  
  @NgModule({
    imports: [
      // ...其他模块
      MarkdownModule.forRoot({
        prism: {
          lineNumbers: true
        }
      })
    ]
  })
  export class AppModule { }
  

• 检查Markdown代码块格式
  确保你的Markdown代码块添加了行号标识，在语言后缀后加上{.line-numbers}：

  ```typescript{.line-numbers}
  // 你的TypeScript代码
  const foo = 'bar';
  function test() {
    return foo;
  }
  

• 调整样式加载顺序
  在angular.json的styles数组中，将Prism相关的样式移到最后，避免被其他样式覆盖：

  "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/themes/prism-okaidia.css",
    "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"
  ],
  

• 异步加载数据时手动触发高亮
  如果你的markdown数据是异步获取的（比如从API请求），需要在数据加载完成后手动调用高亮方法。注入MarkdownService并执行：

  import { MarkdownService } from 'ngx-markdown';
  
  constructor(private markdownService: MarkdownService) {}
  
  loadMarkdownData() {
    // 假设这里是异步获取数据的逻辑
    this.http.get('your-markdown-url').subscribe(data => {
      this.markdown = data;
      // 数据赋值后手动触发高亮
      setTimeout(() => {
        this.markdownService.highlight();
      }, 0);
    });
  }
  

内容的提问来源于stack exchange，提问作者Alvaro