@acpaas-ui/ngx-code-snippet

This module contains a component for displaying a code snippet formatted by highlight.js

Dependencies

This package is build depending on:

• hightlight.js
• and the corresponding angular2 npm package.
• the Marker npm package

Be aware that you need to install the highlight.js package yourself. We have tested and used version 9.10.0 in our example.

Check out the highlight.js documentation for more information on how to use it.

Usage

import { CodeSnippetModule } from '@acpaas-ui/ngx-code-snippet';

Documentation

Visit our documentation site for full how-to docs and guidelines

Code snippet list modules

API

| Name | Description | Documentations | | ----------- | ------ | -------------------------- | | @Input() codeSnippet: string; | - | Add your code snippet here. | | @Input() processMarkdown: boolean; | false | When having some markdown that contains code snippets. | | @Input() scrollable: boolean; | true | Boolean for when code snippet should not have a horizontal scrollbar when the code snippet is not wide enough. |

Example

A single code snippet

import { CodeSnippetModule } from '@acpaas-ui/ngx-code-snippet';

@NgModule({
    imports: [
        CodeSnippetModule
    ]
})

export class AppModule {}

public codeExampleJSON = `
    [
        {
            "title": "apples",
            "count": [12000, 20000],
            "description": {"text": "...", "sensitive": false}
        },
        {
            "title": "oranges",
            "count": [17500, null],
            "description": {"text": "...", "sensitive": false}
        }
    ]`;

public codeExampleJS = `
    function greetMe(yourName) {
        alert('Hello ' + yourName);
    }
    greetMe('World');`;

<aui-code-snippet [codeSnippet]="codeExampleJSON"></aui-code-snippet>

Multiple code snippets

public codeExamples = [this.codeExampleJS, this.codeExampleJSON];

<aui-code-snippet
    *ngFor="let codeExample of codeExamples"
    [codeSnippet]="codeExample"
></aui-code-snippet>

Process markdown with code snippets

If you have some markdown that contains code snippets, the component can also deal with that.

Create a service to get the markdown (this is just an example of getting a local markdown file):

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class ContentService {
    constructor(
        private http: Http
    ) {}

    getMarkdown(): any {
        return this.http.get('/example.md')
        .map((res) => res.text());
    }
}

public mdExample: string;

constructor(
    private contentService: ContentService
) {
    contentService.getMarkdown().subscribe(data => this.mdExample = data);
}

<aui-code-snippet
    *ngIf="mdExample"
    [codeSnippet]="mdExample"
    [processMarkdown]="true"
></aui-code-snippet>

Contributing

Visit our Contribution Guidelines for more information on how to contribute.