CodeHighlighter

CodeHighlighter is a custom directive to highlight code blocks using PrismJS


#titanic {{'{'}}
    float: none;
{{'}'}}

Import


import {{'{'}}FuiCodeHighlighterModule{{'}'}} from 'fuel-ui'; //module
import {{'{'}}CodeHighlighter{{'}'}} from 'fuel-ui'; //class

Getting Started

CodeHighlighter is applied to a code element with [code-highlight] directive. The <code> should have a style class having "language-" prefix to specify the language to highlight. See Prismjs docs for the list of available languages. An example block with css code would be as follows.

Usage


<code class="language-css" code-highlight>
    #titanic {{'{'}}
        float: none;
    {{'}'}}
</code>