@acpaas-ui/ngx-code-snippet
TypeScript icon, indicating that this package has built-in type declarations

6.0.6 • Public • Published

@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:

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @acpaas-ui/ngx-code-snippet

Weekly Downloads

1

Version

6.0.6

License

none

Unpacked Size

43.8 kB

Total Files

14

Last publish

Collaborators

  • yapla
  • tom-odb
  • fabianmeul
  • jsebrech
  • trianglejuice
  • stefanpante
  • jsprds
  • lievenvg