angular使用highlight高亮显示代码

本文介绍了在Angular项目中使用highlight.js进行代码高亮显示的步骤和常见问题。首先,需参照官方文档安装angular-highlight-js和highlight.js。在实际操作中,可能遇到在分离app.module.ts时,未正确转移highlight.js相关依赖导致的问题。此外,若只有部分代码高亮,可能是未定义或注册正确的语言类型,例如在本例中,需要为less语言注册。通过hljs.registerLanguage方法添加语言支持,最终实现代码高亮。
摘要由CSDN通过智能技术生成

具体使用过程参考官方文档:https://github.com/mattlewis92/angular-highlight-js

使用过程中遇到的问题及解决方式

1.安装angular-highlight-js之后,引入了highlight.js,报错,需要再安装highlight.js;

2.在最初实践的时候,我在app.module.ts里面引入了相关依赖,当我需要将app.module.ts分离的时候,移走了使用highlt的模块,却未将highlight.js相关内容转移到相应目录下,因此,使用的模块根本找不到他,这里出现问题。

3.当可以实现相互依赖之后,字体只有部分实现了高亮,当时只有部分模块的ts代码实现了,相当多的模块及其他代码却未实现。排查是否是语言类型的问题,发现,language当时只定义了TypeScript,因此这里做了调整,调整之后却依然没有生效,排查发现,是相关语言的language没有加入进来。

<code class="lang-javascript" mwlHighlightJs [source]="" language="less"></code>

hljs.registerLanguage('less', require('highlight.js/lib/languages/less'));

最终得以实现,具体代码如下:

import { NgModule } from '@angular/
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Delicia_Lani

你的鼓励将是我写作的动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值