separate from main project

Author: Zhicheng WANG

karma.conf.js

@@ -0,0 +1,31 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+    ],
+    client: {
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true,
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+  });
+};

ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/ui-model/angular-markdown",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  }
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@ui-model/angular-markdown",
+  "version": "0.2.1",
+  "main": "src/public_api.ts",
+  "devDependencies": {
+    "@types/highlight.js": "^9.1.9",
+    "@types/markdown-it": "0.0.2"
+  },
+  "peerDependencies": {
+    "@angular/common": "^6.0.0 || ^7.0.0 || ^8.0.0",
+    "@angular/core": "^6.0.0 || ^7.0.0 || ^8.0.0",
+    "@ui-model/angular": "0.2.1",
+    "highlight.js": "^9.10.0",
+    "markdown-it": "^8.3.1",
+    "markdown-it-abbr": "^1.0.4",
+    "markdown-it-deflist": "^2.0.1",
+    "markdown-it-emoji": "^1.3.0",
+    "markdown-it-footnote": "^3.0.1",
+    "markdown-it-ins": "^2.0.0",
+    "markdown-it-mark": "^2.0.0",
+    "markdown-it-sub": "^1.0.0",
+    "markdown-it-sup": "^1.0.0",
+    "markdown-it-table-of-contents": "^0.3.2"
+  }
+}

src/lib/pipes/highlight.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { HighlightPipe } from './highlight.pipe';
+
+describe('HighlightPipe', () => {
+  it('create an instance', () => {
+    const pipe = new HighlightPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/lib/pipes/highlight.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { highlightAuto } from 'highlight.js';
+
+const defaultLanguages = ['ts', 'js', 'html', 'scss', 'css'];
+
+@Pipe({
+  name: 'highlight',
+})
+export class HighlightPipe implements PipeTransform {
+  transform(value: string, language: string = 'ts'): string {
+    if (!value) {
+      return;
+    }
+    return highlightAuto(value, [language].concat(defaultLanguages)).value;
+  }
+}

src/lib/pipes/markdown.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { MarkdownPipe } from './markdown.pipe';
+
+describe('MarkdownPipe', () => {
+  it('create an instance', () => {
+    const pipe = new MarkdownPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/lib/pipes/markdown.pipe.ts

@@ -0,0 +1,37 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as hljs from 'highlight.js';
+import * as MarkdownIt from 'markdown-it';
+
+declare function require(id: string): any;
+
+const markdown = new MarkdownIt();
+markdown.use(require('markdown-it-abbr'));
+markdown.use(require('markdown-it-deflist'));
+markdown.use(require('markdown-it-emoji'));
+markdown.use(require('markdown-it-footnote'));
+markdown.use(require('markdown-it-ins'));
+markdown.use(require('markdown-it-mark'));
+markdown.use(require('markdown-it-sub'));
+markdown.use(require('markdown-it-sup'));
+markdown.use(require('markdown-it-table-of-contents'));
+markdown.use(highlighter);
+
+@Pipe({
+  name: 'markdown',
+})
+export class MarkdownPipe implements PipeTransform {
+  transform(value: string): string {
+    if (!value) {
+      return '';
+    }
+    return markdown.render(value);
+  }
+}
+
+function highlighter(md: MarkdownIt): void {
+  md.set({
+    highlight: (code, lang) => {
+      return hljs.highlightAuto(code, lang ? [lang] : ['ts', 'js', 'html', 'scss', 'css']).value;
+    },
+  });
+}

src/lib/ui-model-markdown.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { HighlightPipe } from './pipes/highlight.pipe';
+import { MarkdownPipe } from './pipes/markdown.pipe';
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [
+    HighlightPipe,
+    MarkdownPipe,
+  ],
+  exports: [
+    HighlightPipe,
+    MarkdownPipe,
+  ],
+})
+export class UiModelMarkdownModule {
+}
+
+export * from './pipes/highlight.pipe';
+export * from './pipes/markdown.pipe';

src/public_api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of angular-markdown
+ */
+
+export * from './lib/ui-model-markdown.module';

src/test.ts

@@ -0,0 +1,19 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);