fuse-highlight is a syntax highlighter component to display syntax highlighted codes within the content. Internally, it uses highlight.js.

Exported as: fuseHighlight

Module

import { FuseHighlightModule } from '@fuse/components/highlight';

Usage

Here's the basic usage of the fuse-highlight:

<textarea fuse-highlight lang="html"> <div>Some HTML code to highlight</div> </textarea>

fuse-highlight doesn't have its own selector and cannot be used like any other components. It must be used with a <textarea>.

The main reason of this is that the Angular parses the templates before binding and running components. Because of this mechanic, anything you place into templates will be taken as a literal content and parsed by Angular. Only the contents of a <textarea> can be preserved as is.

Properties

Service

The FuseHighlightService can also be used to format and highlight code:

import { FuseHighlightService } from '@fuse/components/highlight'; code = '<div> Some code to highlight </div>' /** * Constructor */ constructor(private _fuseHighlightService: FuseHighlightService) { const highlightedCode = this._fuseHighlightService.highlight(code, 'html'); }