Documentation
Fuse Components
Components

## Highlight

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

Name | Description | Default
--- | --- | ---
@Input() code: string | Piece of code to highlight. If code input is not provided, the actual content of the textarea will be used. | -
@Input() lang: string | Which language to highlight the code. See: https://highlightjs.org/usage/ for full list of supported languages. | -

## 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'); }