@acpaas-ui/ngx-code-snippet 中文文档教程

Question

@acpaas-ui/ngx-code-snippet

此模块包含一个组件，用于显示由 highlight.js 格式化的代码片段。

Dependencies

此包的构建取决于：

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

请注意，您需要自己安装 highlight.js 包。 我们在示例中测试并使用了 9.10.0 版本。

查看 highlight.js 文档，了解有关如何使用它的更多信息。

Usage

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

Documentation

访问我们的文档网站获取完整的操作文档和指南

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

如果您有一些包含代码片段的降价，该组件还可以处理接着就，随即。

创建获取降价的服务（这只是获取本地降价文件的示例）：

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

访问我们的贡献指南< /em> a> 有关如何贡献的更多信息。