ngx-highlightjs

Angularでシンタックスハイライト。

インストール

npm install -S ngx-highlightjs highlight.js

@typesインストール

npm install --save-dev @types/highlight.js

scssをインポート

// style.scss
@import '~highlight.js/scss/atom-one-dark.scss';

directiveの使い方

<pre><code [highlight]="someCode"></code></pre>

全ての言語をインポート

export function hljsLangs() {
  const langs = hljs.listLanguages()

  return langs.map((n: string) => {
    return {name: n, func: function () { return hljs.getLanguage(n) }}
  });
}

@NgModuleのインポート

@NgModule({
  imports: [
    // ...
    HighlightModule.forRoot({
      languages: hljsLangs
    })
  ]
})
export class AppModule { }