Angular如何实现带语法高亮与复制按钮的多语言代码片段组件

• 优先用 ngx-highlightjs，Angular生态里主流的代码高亮组件，默认高亮配色和Angular Material官网示例风格一致，开箱支持Java、TypeScript、C#、HTML等绝大多数常用编程语言，自带复制按钮、复制成功提示、行号显示等配置项，和Angular Material的主题体系完全兼容，导入模块后直接在模板里写标签就能用，不需要额外改太多样式。
• 如果不想引入额外的组件依赖，用Angular Material CDK + highlight.js 自己封装一套的成本极低，核心代码不到50行，完全可以贴合自己项目的设计规范做定制。

1. 安装基础依赖：执行 npm i highlight.js 即可，不需要额外装其他插件。
2. 新建独立的代码块共享组件：
   • 模板层外层用mat-card做代码块容器，右上角放置一个mat-icon-button作为复制按钮，内部预留代码渲染的容器节点
   • 组件定义两个输入属性：code接收待展示的代码字符串，language接收对应语言标识（比如typescript/java/csharp/xml对应HTML场景）
   • 组件初始化的生命周期里，调用highlight.js的highlight方法，传入代码内容和语言参数，把返回的渲染后HTML插入到代码容器节点中
   • 复制按钮逻辑直接用原生navigator.clipboard.writeText实现，点击后将代码写入剪贴板，按钮图标临时切换为对勾状态，停留1.5秒后切回复制图标即可，和Material官网的交互完全一致
3. 样式层直接对齐Material设计规范：代码块背景用主题的surface容器色，文字用on-surface文本色，语法高亮配色直接用highlight.js自带的github主题，和Material风格匹配度很高，给代码块加4px圆角，右上角按钮留8px边距，hover状态加浅灰背景即可。

要是需要1:1还原Angular Material官网的代码块效果，直接抽离他们源码里的代码示例组件就行，那个组件没有耦合其他业务逻辑，改下模块导入路径就能直接在自己项目里用，省掉调样式的时间。

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