Angular项目引入ngx-highlight.js主题遇MIME错误及样式异常

一、解决MIME类型'text/html'错误 #

• 排查themePath配置：确保路径指向正确的CSS文件，别只写目录或错写路径。比如主题文件在node_modules/highlight.js/styles/下，要写全文件名，例：themePath: 'node_modules/highlight.js/styles/github-dark.css'。
• 移除main.ts中HighlightLoader的themePath配置：如果已经通过angular.json或组件@import引入主题，就别再用loader的themePath，避免重复加载导致路径解析错误。
• 检查angular.json的styles配置：在build.options.styles数组里添加"node_modules/highlight.js/styles/xxx.css"，让Angular CLI正确打包资源，不会返回HTML文件。

二、修复行号样式异常问题 #

• 启用行号模块：导入HighlightModule时，同时导入HighlightLineNumbersModule，组件模板里加上[lineNumbers]="true"属性。
• 补充行号缺失样式：如果默认主题没包含行号样式，手动加自定义CSS：

.hljs-ln {
  border-left: 3px solid #ccc;
  padding-left: 10px;
}
.hljs-ln-numbers {
  min-width: 30px;
  text-align: right;
  padding-right: 8px;
  color: #999;
  user-select: none;
}
.hljs-ln-code {
  padding-left: 10px;
}

• 避免样式被覆盖：检查组件的encapsulation是否设为ViewEncapsulation.None，或者给样式加更具体的选择器，确保行号样式能生效。

三、最终验证步骤 #

1. 清理项目缓存：执行ng clean，再重启ng serve，清除旧缓存带来的路径问题。
2. 检查网络请求：在浏览器开发者工具的Network标签里，看主题CSS的请求状态，确保返回200且Content-Type是text/css。
3. 确认组件使用方式：模板里正确用highlight指令，比如：

<pre><code [highlight]="codeSnippet" [lineNumbers]="true"></code></pre>

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