Angular 代碼高亮組件

最近公司在考慮開源Angular項目涉及到的相關組件，打算作一個相似 material.angular.io 的組件demo，不少東西暫時尚未完善，目前只有一個簡陋的框架，整個開源流程和機制還在分析當中，不過其中一些功能仍是比較明確的，目前將其分類出來逐個實現。後續會持續更新。

Github源碼 歡迎你們Star😀

具體實現是基於 highlight.js的，在外層作了一個簡單的封裝，源代碼以下:

import {
  Component,
  OnInit,
  Input,
  OnChanges,
  ViewChild,
  ElementRef,
} from '@angular/core';
import hljs from 'highlight.js';

@Component({
  selector: 'ngx-highlight',
  templateUrl: './ngx-highlight.component.html',
  styleUrls: ['./ngx-highlight.component.scss']
})
export class NgxHighlightComponent implements OnInit, OnChanges {
  @Input()
  lang: string;
  @Input()
  code: any;

  @ViewChild('tpl')
  tpl: ElementRef;

  constructor() { }

  ngOnInit() {
    this._highlight();
  }

  ngOnChanges(changes) {
    const {
      code: {
        currentValue: code,
      },
    } = changes;

    this.code = code;
    this._highlight();
  }

  private _highlight() {
    const el = this.tpl.nativeElement as HTMLElement;

    const code = this._initCode(this.code);
    el.textContent = code;
    hljs.highlightBlock(el);
  }

  private _initCode(code) {
    let _code = '';

    switch (this.lang) {
      case 'json': {
        if (Object.prototype.toString.call(this.code) !== '[object String]') {
          _code = this._formatJson(code);
        }
        break;
      }
      default:
        _code = this.code;
        break;
    }

    return _code;
  }

  private _formatJson(json: object): string {
    return JSON.stringify(json, null, ' ');
  }
}複製代碼

針對json數據結構作了一個簡單的處理，後續根據具體需求會作一些擴展，歡迎你們回覆。

stackblitz

功能比較簡單，不足之處歡迎你們批評指正😆