Showdown: Angular 2

[LeahPike]

Is it possible to use this library within angular 2?

I'm having trouble importing it into my project and wondered if anyone had done it?

I've added the following line to my vendor.ts

import 'showdown';

.. and added an import line to my component where I'd like to use it

import md from 'showdown';

Which gives the following error.

error TS2307: Cannot find module 'showdown'.

We use webpack to bundle our files. Any input welcomed, thank you.

[Awk34]

@LeahPike are you sure you installed it?

[LeahPike]

@Awk34 I can see the showdown folder within my node_modules folder and I've checked in the generated vendor.bundle.js and it has code in there for showdown. 😕

[Awk34]

Strange. Anyway, it doesn't sound like an issue with Showdown + Angular 2. I've been using Showdown on an Angular 2 app just fine.

[LeahPike]

Must be something odd my end then, will keep trying :female_detective:

[tivie]

@LeahPike I've been trying, but couldn't reproduce the issue you describe.

[tivie]

@LeahPike have you found out what the problem was?

[LeahPike]

I haven't yet, will try and find some time today to create a new environment to try it with.

[LeahPike]

I've cloned the angular 2 quick start:

git clone https://github.com/angular/quickstart my-proj

I've installed showdown:

npm install showdown

Can someone please confirm what exactly I need to change within this project to get it importing into AppComponent? That would be great help, thank you.

[Awk34]

@LeahPike I cloned it and can see why you were having issues. First step of course is to install Showdown:

$ npm install --save showdown

Then I see that the project is using SystemJS, so I think you have to add this to the map in systemjs.config.js:

showdown: 'npm:showdown/dist/showdown.js',

And then it also uses TypeScript, so you'll want the type definitions for Showdown:

$ ./node_modules/.bin/typings install dt~showdown --save --global

You should then be able to change your app.component.ts to look like this:

import { Component } from '@angular/core';
const showdown = require('showdown');

const converter = new showdown.Converter();
var text = '#hello, markdown!';

@Component({
    selector: 'my-app',
    template: '<div [innerHtml]="html"></div>'
})
export class AppComponent {
    html = converter.makeHtml(text);
}

run npm start, and you should now see this in your browser:

[LeahPike]

That is working!

Although trying to run "$ ./node_modules/.bin/typings install dt~showdown --save --global" in a terminal window caused the following "'$' is not recognized as an internal or external command".

I'll have to read up about typings and see how to add it.

Thank you :D

[Awk34]

@LeahPike the command would just be ./node_modules/.bin/typings install dt~showdown --save --global. The $ is a bash thing.

[clouless]

Just came here and if you use Angular 2/4+ with TypeScript you would do:

Your MarkdownBox Component:

import { Component, Input, OnChanges } from '@angular/core';
import * as showdown from 'showdown';
const converter = new showdown.Converter();

@Component({
  selector: 'app-markdown-box',
  template: `
  <div
    class="markdown-box"
    [innerHtml]="markdownHtml | safeHtml"
  ></div>`,
  styles: [ '.markdown-box { font-size:14px; }' ],
})
export class MarkdownBoxComponent implements OnChanges {

  @Input()
  markdown: string;

  markdownHtml: string;

  ngOnChanges() {
    converter.setFlavor('github');
    this.markdownHtml = converter.makeHtml(this.markdown);
  }

}

Your SafeHtml Pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

Then you could use it somewhere:

<app-markdown-box markdown="foo [link](https:/google.com) bar"></app-markdown-box>