- This is example html code. -
\`, - interpolation: { - language: 'html', - title: this.examples[1].title - }, - language: 'html' - } - ]`, - css: `` +export class AppComponent { + attribute: ApPrismTemplate` tag.
+ pre: {
+ 'data-start': '-5'
}
- ];
-
- form: FormGroup;
- languages = [
- 'css', 'javascript', 'html', `markup`
- ];
- payload: string;
-
- constructor(public fb: FormBuilder) {}
-
- ngOnInit() {
- this.prism = [
- {
- __properties: {
- async: true,
- callback: true,
- code: true,
- hooks: true,
- language: true,
- interpolation: true
- },
- async: true,
- hooks: {
- 'before-sanity-check': (env) => { console.log('before-sanity-check', env); },
- 'before-highlight': (env) => { console.log('before', env); },
- 'after-highlight': (env) => { console.log('after', env); },
- 'complete': (env) => { console.log('complete', env); },
- 'before-insert': (env) => { console.log('before-insert', env); }
- },
- callback: () => {
- console.log('callback() zero');
- },
- code:
-` /*
- ng-content does not change.
- interpolation title: '{{title}}'
- */
- .item {
- text-align: center;
- language: {{language}};
- }`,
- interpolation: {
- language: 'css',
- title: this.examples[0].title
- },
- language: 'css'
- },
- {
- __properties: {
- async: true,
- callback: true,
- code: false,
- hooks: true,
- language: true,
- interpolation: true
- },
- async: false,
- hooks: {
- 'before-sanity-check': (env) => { console.log('before-sanity-check', env); },
- 'before-highlight': (env) => { console.log('before', env); },
- 'after-highlight': (env) => { console.log('after', env); },
- 'complete': (env) => { console.log('complete', env); },
- 'before-insert': (env) => { console.log('before-insert', env); }
- },
- code: ``,
- callback: () => {
- console.log('callback() one');
- },
- ngContent:
-`
- This is example html code.
-
`,
- interpolation: {
- language: 'html',
- title: this.examples[1].title
- },
- language: 'html'
- }
- ];
-
- // FORM
- this.form = this.fb.group({
- prism: this.createForm()
- });
- }
-
-
- update(property) {
- this[property] = Object.assign({}, this[property]);
- }
-
- keyup($event) {
- console.log(`keyup: update `, $event.srcElement.name);
-
- // this is the best way to update json data
- this[$event.srcElement.name] = this.form.value[$event.srcElement.name];
-
- // This won't work with set
- // this.address[$event.srcElement.name] = $event.srcElement.value;
-
- // This will update address city value
- // this.address = Object.assign({}, { city: $event.srcElement.value });
- }
-
- /**
- * @returns
- * @memberof AppComponent
- */
- createForm() {
- const arr = [];
- this.prism.forEach((prism, key) => {
- const g = {};
- Object.keys(prism).forEach((v) => {
- if (v === '__properties') {
- g[v] = this.fb.group(this.prism[key][v]);
- } else {
- g[v] = this.prism[key][v];
- }
- });
- arr.push(this.fb.group(g));
- });
- return this.fb.array(arr);
- }
-
- /**
- * @param {any} form
- * @returns
- * @memberof AppComponent
- */
- submit(form) {
- this.payload = JSON.stringify(form.value);
- console.log(this.payload);
- return false;
- }
+ };
+ class: ApPrismTemplate = { // <----- `class` property to add class to ` tag.
+ pre: ['line-numbers']
+ };
+ title = 'app';
+ language = 'html'; // <----- Add property with language.
+ content = 'test {{language}}
'; // <----- HTML content to be highlighted by prism.
+ interpolate = {
+ language: this.language // <----- Interpolate property `language` in `content`.
+ };
}
diff --git a/packages/prism/demo/src/app/app.module.ts b/packages/prism/demo/src/app/app.module.ts
index b3948f33..6e36a93e 100644
--- a/packages/prism/demo/src/app/app.module.ts
+++ b/packages/prism/demo/src/app/app.module.ts
@@ -1,40 +1,21 @@
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // added
+// @angular
import { BrowserModule } from '@angular/platform-browser';
-import { FlexLayoutModule } from '@angular/flex-layout';
import { NgModule } from '@angular/core';
-import { MatButtonModule, MatCheckboxModule, MatInputModule, MatRadioModule, MatSidenavModule } from '@angular/material';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-// @ngx
-/*
- package.json: --aot added to ng serve
-*/
-import { ApPrismModule } from '@angular-package/prism/core';
-import { ApDocsExampleModule } from '@angular-package/docs'; // added
+// @angular-package/prism
+import { ApPrismModule } from '@angular-package/prism/core'; // <----- Import module.
// internal
import { AppComponent } from './app.component';
+
@NgModule({
declarations: [
AppComponent
],
imports: [
- BrowserAnimationsModule,
BrowserModule,
- FlexLayoutModule,
- ReactiveFormsModule,
-
- // @angular/material
- MatButtonModule, // added
- MatCheckboxModule, // added
- MatInputModule, // added
- MatRadioModule, // added
- MatSidenavModule, // added
-
- // @angular-package
- ApDocsExampleModule, // added
- ApPrismModule // added
+ ApPrismModule // <----- Add to NgModule imports.
],
providers: [],
bootstrap: [AppComponent]
diff --git a/packages/prism/demo/src/index.html b/packages/prism/demo/src/index.html
index 7bb531f9..77e5ff2c 100644
--- a/packages/prism/demo/src/index.html
+++ b/packages/prism/demo/src/index.html
@@ -7,15 +7,8 @@
-
-
-
-
-
-
- 
-
+