ng2-markdown-to-html/dist/lib/markdown-to-html.component.js

Angular 2+ library that uses marked to parse markdown to html combined with Prism.js for synthax highlights

import { Component, ElementRef, Input } from '@angular/core';
import { MarkdownToHtmlService } from './markdown-to-html.service';
import * as _marked from 'marked';
var marked = _marked;
import * as Prism from 'prismjs';
import 'prismjs/prism';
import 'prismjs/components/prism-c';
import 'prismjs/components/prism-cpp';
import 'prismjs/components/prism-csharp';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-diff';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-perl';
import 'prismjs/components/prism-php';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-sass';
import 'prismjs/components/prism-scss';
import 'prismjs/components/prism-typescript';
export var MarkdownToHtmlComponent = (function () {
    function MarkdownToHtmlComponent(element, mthService) {
        this.element = element;
        this.mthService = mthService;
    }
    MarkdownToHtmlComponent.prototype.ngAfterViewInit = function () {
        if (this.data) {
            this.handleData();
            return;
        }
        if (this.src) {
            this.handleSrc();
            return;
        }
        this.handleRaw(this.element.nativeElement.innerHTML);
    };
    // SimpleChanges parameter is required for AoT compilation (do not remove)
    MarkdownToHtmlComponent.prototype.ngOnChanges = function (changes) {
        if ('data' in changes) {
            this.handleData();
            return;
        }
        if ('src' in changes) {
            this.handleSrc();
            return;
        }
    };
    MarkdownToHtmlComponent.prototype.handleData = function () {
        this.handleRaw(this.data);
    };
    MarkdownToHtmlComponent.prototype.handleSrc = function () {
        var _this = this;
        var extension = this.src
            ? this.src.split('.').splice(-1).join()
            : null;
        this.mthService.getSource(this.src)
            .subscribe(function (data) {
            var raw = extension !== 'md'
                ? '```' + extension + '\n' + data + '\n```'
                : data;
            _this.handleRaw(raw);
        });
    };
    MarkdownToHtmlComponent.prototype.handleRaw = function (raw) {
        var markdown = this.prepare(raw);
        this.element.nativeElement.innerHTML = marked(markdown);
        Prism.highlightAll(false);
    };
    MarkdownToHtmlComponent.prototype.prepare = function (raw) {
        if (!raw) {
            return '';
        }
        var indentStart;
        return raw
            .replace(/\>/g, '>')
            .split('\n')
            .map(function (line) {
            // find position of 1st non-whitespace character
            // to determine the markdown indentation start
            if (line.length > 0 && isNaN(indentStart)) {
                indentStart = line.search(/\S|$/);
            }
            // remove whitespaces before indentation start
            return indentStart
                ? line.substring(indentStart)
                : line;
        }).join('\n');
    };
    MarkdownToHtmlComponent.decorators = [
        { type: Component, args: [{
                    selector: 'markdown-to-html, [markdown-to-html]',
                    template: '<ng-content></ng-content>',
                    styles: [":host /deep/ table{border-spacing:0;border-collapse:collapse;margin-bottom:16px}:host /deep/ table td,:host /deep/ table th{padding:6px 13px;border:1px solid #ddd}:host /deep/ table tr:nth-child(2n){background-color:rgba(0,0,0,.03)}:host /deep/ blockquote{padding:0 1em;color:rgba(0,0,0,.535);border-left:.25em solid rgba(0,0,0,.11)}"],
                },] },
    ];
    /** @nocollapse */
    MarkdownToHtmlComponent.ctorParameters = function () { return [
        { type: ElementRef, },
        { type: MarkdownToHtmlService, },
    ]; };
    MarkdownToHtmlComponent.propDecorators = {
        'data': [{ type: Input },],
        'src': [{ type: Input },],
    };
    return MarkdownToHtmlComponent;
}());
//# sourceMappingURL=markdown-to-html.component.js.map