Is it just me or does the code highlighting not work if curly braces are present in the code?

If I have a variable x = "#HelloWorld", I'd like to be able to get that rendered too... Its not possible currently.. I tried this:

<markdown-to-html>
{{ x }}
</markdown-to-html>

What is the expected behaviour?

It should be able to mark @angular/http as an optional dependency and/or maybe use @angular/common/http.

What is the actual behaviour?

Errors are outputted stating that @angular/http is required:

Hello, great plugin,

After following the Syntax highlight section of the README the code, as in your examples, is not highlighting:

Inline `code` has `back-ticks around` it.

> ```javascript
> var soop = "JavaScript syntax highlighting";
> alert(s);
> ```
> 
> ```python
> s = "Python syntax highlighting"
> print s
> ```

Any ideas what could be wrong?
Thanks

When embedding a link using markdown it opens in the same tab. Is there any way through which we can open the link in a new tab ?

If I run ng lint with the angular cli version 1.0.1 i get the following error.

Failed to load [pathToProject]/node_modules/ng2-markdown-to-html/tslint.json: 
Could not find custom rule directory: [pathToProject]/node_modules/ng2-markdown-to-html/node_modules/codelyzer

Changing the path to ../codelyzer seems to work around the problem but
maybe you have a better solution.

version 1.6 seems to completely break some applications.. sounds like I should never use ^ in front of ngx-markdown and freeze at 1.5.2 until I can bring the app up to angular 6.. but shouldn't this have been a 2.0.0 release?

I get this error, and the problem seems in the file ng2-markdown-to-html/src/app/markdown-to-html/markdown-to-html.component.ts line 65. Prism should be imported, and moreover should be optional in my opinion.

Hi,
i'm working on an application, which loads different pages from markdown files.

The pages shows some html components with descriptions. On some pages, i want to show angular components with some directives on it.
My problem is, that the directives are not working, when they are integrated in the markdown file.

My markdown file looks like:

### Form Inputs
<form>
  <div class="md-form">
    <input type="text" id="normal" class="form-control" mdbActive>
    <label for="normal" >Normales Eingabefeld</label>
  </div>
</form>

The input and label should be wrapped into a container with the class "md-form".

The input field needs the class "form-control" and has the directive mdbActive for activating the floating labels.
 
``` html
<form>
  <div class="md-form">
    <input type="text" id="normal" class="form-control" mdbActive>
    <label for="normal" >Normales Eingabefeld</label>
  </div>
</form

It would be good to remove this WARN.

npm WARN [email protected] requires a peer of @angular/core@^2.4.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.

I am trying to install ngx-markdown and getting the following error. I have to add that I have installed angular-font-awesome prior to installing ngx-markdown.

`C:\Users\Ben\node\gcp>npm
install ngx-markdown --save
npm ERR! path C:\Users\Ben\node\gcp\node_modules\angular-font-awesome
npm ERR! code EISGIT
npm ERR! git C:\Users\Ben\node\gcp\node_modules\angular-font-awesome: Appears to be a git repo or submodule.
npm ERR! git C:\Users\Ben\node\gcp\node_modules\angular-font-awesome
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Ben\AppData\Roaming\npm-cache_logs\2017-12-21T17_23_30_781Z-debug.log`

How can I make this work?

Hi, I am trying to follow this guide for implementing Server Side Rendering and I keep encountering an issue on using your module. From issues discussed elsewhere, its probably because your module is lazyLoaded... Any suggestions?

ngx-markdown

To be more accurate with Angular versions and with the upcoming v5 release, I have renamed the repository to ngx-markdown.

Breaking changes

Module, component and directive names have been adjusted to follow the new repository name.

• Module has been renamed from MarkdownToHtmlModule to MarkdownModule
• Component has been renamed from <markdown-to-html> to <markdown>
• Directive has been renamed from <div markdown-to-html> to <div markdown>

Although the changes shouldn't be too hard I am still sorry for any inconvenience that the renaming could cause. For more information please follow the readme.md or don't hesitate to open an issue.

The Angular template parser seems to try to parse the written code e.g.

<test>

and give an error message that the markdown-to-html tag has been closed already.
And with the following code angular states that "test" is not a known element and suggests to insert the NO_ERRORS_SCHEMA into the module.

<test></test>

I have a chunk of markdown I'm pulling from a api that has multiple code blocks inside it with different languages. Is there a way to get syntax highlighting inside of a big chunk of markdown?

<markdown class="markdown" [data]="body"></markdown>

My markdown contains blocks like (closing back ticks don't actually have spaces):

   ```javascript
      .... snip
   ` ` `

Build prod with aot:

Starting compilation using the angular compiler.
Angular compilation done, starting webpack bundling.
Error: Error at .../frontend/node_modules/ngx-markdown/dist/lib/markdown.service.d.ts:11:41: Generic type 'ErrorObservable<T>' requires 1 type argument(s).
    at new UserError ( ...\tools\@angular\tsc-wrapped\src\tsc.ts:33:25)
    at check ( ...\tools\@angular\tsc-wrapped\src\tsc.ts:69:11)
    at Tsc.typeCheck ( ...\tools\@angular\tsc-wrapped\src\tsc.ts:152:5)
    at  ...\tools\@angular\tsc-wrapped\src\main.ts:68:11
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
npm ERR! code ELIFECYCLE

file: node_modules /ngx-markdown/dist/lib/markdown.service.d.ts

to fix error you need to
change from:

handleError(error: Response | any): ErrorObservable;

to:

handleError(error: Response | any): ErrorObservable<any>;

when it is first rendered it is 'lang-*'

after i modify the [data] variable it becomes language-*

Angular 6 uses rxjs 6 which doesn't have deep imports supported.

Works really well but can you bind a property to src? Thanks.

eg. [src]="filepath"

What I want to do is use markdown directive with [src]="..." to load a local .md file inside the project, like I have a my.component.ts and a my.md in the same directory. How can I do that?

I tried importing HttpClient in the module with MarkdownModule.forRoot({ loader: HttpClient }) and using markdownService.getSource() to check it, turns out it always opens an XMLHttpRequest, which cannot get what I want.

Thx~

Hey, it's me again ^^

It seems I am having troubles with some languages of the syntax highlighting plugin.

The code below only renders the following result: 'test'

<div class="test">test</div>

And the code below does not render anything:

<?php echo 'test'; ?>

I don't have any issue with the other languages (Java, Python, Javascript, CSS, etc.) which are rendered and highlighted properly.

Thank you.

This might sounds a bit weird.

And I hope someone tells me I'm wrong.

I do have some interceptors in my app.
I do use ngx-markdown within a lazy loaded module, let's call it LazyModule.
From LazyModule, every http request is not caught by any of my interceptors.

I've been digging on why this lazy loaded module especially, because I have others and it works fine with them.

Then I've found that issue:
angular/angular#20575

HTTP_INTERCEPTORS are reset when a lazy loaded module imports another module importing HttpClientModule and yes it's an intended behavior. So it's not going to change and we have to deal with it.

I have no idea how to manage that, but could you somehow remove the imports: [HttpClientModule] on this line?

Otherwise it means that people cannot use ngx-markdown into a lazy loaded module if they rely on some interceptors.

source example:

public static void main(String[] args){
//do some thing
// this code can not be parsed since it has contained character "{" or "}"
}

Error code

compiler.js:485 Uncaught Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("


</div>
[ERROR ->]"): ng:///UserModule/ProfileComponent.html@97:0
Invalid ICU message. Missing '}'. ("


</div>
[ERROR ->]"): ng:///UserModule/ProfileComponent.html@97:0
    at syntaxError (compiler.js:485)
    at DirectiveNormalizer._preparseLoadedTemplate (compiler.js:3222)
    at eval (compiler.js:3202)
    at Object.then (compiler.js:474)
    at DirectiveNormalizer._preParseTemplate (compiler.js:3202)
    at DirectiveNormalizer.normalizeTemplate (compiler.js:3180)
    at CompileMetadataResolver.loadDirectiveMetadata (compiler.js:14900)
    at eval (compiler.js:34262)
    at Array.forEach (<anonymous>)
    at eval (compiler.js:34261)

How can I include a .md file? The code:

<markdown [src]="'test.md'">

leads to the following error:

GET http://localhost:4200/test.md 404 (Not Found)

The file test.md is in the same directory as app.module.ts, where MarkdownModule is imported.

Greetings, I'm not able to build my project with [email protected] and AOT being enabled.

With this CoreModule definition:

@NgModule({
  imports: [
    // ...
    MarkdownModule.forRoot()
  ]
})
export class CoreModule {}

I get this error:

ERROR in Error during template compile of 'CoreModule'
  Function calls are not supported in decorators but 'MarkdownModule' was called.

Omitting .forRoot() leads to this error:

ERROR in : Unexpected value 'MarkdownModule in /path-to-my-project/node_modules/ngx-markdown/src/markdown.module.d.ts'
imported by the module 'CoreModule in /path-to-my-project/src/app/core/core.module.ts'.
Please add a @NgModule annotation.

Can also reproduce with a new angular project:

$ ng new foo
$ cd foo
$ yarn add ngx-markdown

Modify app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MarkdownModule } from 'ngx-markdown';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MarkdownModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

$ ng build --prod
Date: 2018-05-28T13:49:57.822Z
Hash: 1ae5e85a857959e5cde1
Time: 3569ms
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.cdf87a8e5b31fe8a11f1.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.a2bc6cab25d0aa41c17a.js (main) 128 bytes [initial] [rendered]

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'MarkdownModule' was called.

Using sample MD text rendering in angular 6 is incomplete:
top is rendered, bottom is 'pre' formatted

Code

default options.

rendered html

Database text:
1. First ordered list item\n2. Another item\n * Unordered sub-list.\n1. Actual numbers don't matter, just that it's a number\n 1. Ordered sub-list\n4. And another item.\n\n You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).\n\n To have a line break without a paragraph, you will need to use two trailing spaces. \n Note that this line is separate, but within the same paragraph. \n (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)\n\n\n* Unordered list can use asterisks\n- Or minuses\n+ Or pluses

There must be some wrong in ngx.markdown. It works a bit but not at all: http://prntscr.com/jblzek

ngx-markdown only supports a subset of languages from Prismjs as it appears. Any plans to support more? I'm especially missing JSON and YAML for my use cases.

Hi,

I really like this project and it's working perfect in my project!

However, it doesn't "support" angular 5.0+. See warnings:

yarn add v1.3.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "@angular/core@^2.4.0 || ^4.0.0".
warning " > [email protected]" has incorrect peer dependency "@angular/http@^2.4.0 || ^4.0.0".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 10 new dependencies.

It will be great if you can release a new version which supports angular 5+

Thanks!

Hi, I am using you package for a tool http://ngDocumentor.github.io . I have plans to maintain this. And I also want to discuss features/open issues (like xss open issue) for consistent upgrades with ngx-markdown for the same. How can we connect offline? :-)

Using the markdownToHtml should look like this:
<div [innerHTML] ="content | markdownToHtml"></div>

So that if we want to process or manipulate converted html we can just do it like this:
[innerHTML]="content | markdownToHtml | embedYoutubeLink"

Is this the new repo? https://github.com/ngx-markdown

Feature request:

Can you consider adding / extending copy to clipboard option for code blocks in the library? Something like the code copy in angular? https://angular.io/guide/quickstart

It appears that any css that I add to my component.css is not applied inside the markdown directive.

<markdown [data]="mydata">
<!-- component css ain't working in here -->
</markdown>

You can verify this by e.g. adding h2 {color: red } in the styles part near the top of app.ts in your plunker, https://plnkr.co/edit/y5LPj7?p=preview

@Component({
  styles: [`
h2 { color: red; /* not working */
    }
  `],
})

Hey,

someone pointed out an issue in another Angular markdown library about XSS vulnerability and it seems that this library presents the same issue as well.

Links are not being validated and as such, the following code could be used to execute javascript code:

[Click Me](javascript:alert('Injected!'%29)

Angular 6 does not support wildcards anymore, they still support the long form.

Before in .angular-cli.json I had, "app/components/**/*.md". The new version I changed it to
{ "glob": "**/*.md", "input": "src/app/components/", "output": "/" } but it won't work.

I use your component in 2 ways :

1. As a markdown to html component for the detail of an article (binded from the attribute of an object in the component)
2. As a preview feature when editing an article (binded from a FormControl value)

In the first case, a simple :

```php
$test = "value";
```

is translated to :

<pre class=" language-php">
    <code class=" language-php">
        <span class="token variable">$test</span> <span class="token operator">=</span> <span class="token string">"value"</span><span class="token punctuation">;</span>
    </code>
</pre>

which is great.

In the second case, the same markdown code translates to :

<pre>
    <code class="lang-php">$test = "value";</code>
</pre>

It seems that prism is not going over the code. Do you have an idea why ?

I am receiving a 'marked is not defined' error upon compilation.

The exception is thrown inside the handleRaw method within markdown-to-html.component.ts file.

If I add import * as marked from 'marked' within the import statements, the exception is not throw and the raw markdown is rendered. I have tried importing marked several places within my application with no success in getting past the error.

Same build, successful on Friday, failing on Monday, now with this error:

ERROR in ./src/main.ts Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/bamboo/bamboo-agent-home/xml-data/build-dir/QPW-PUB20-PUBS3/src' 
ERROR in Error: Metadata version mismatch for module /home/bamboo/bamboo-agent-home/xml-data/build-dir/QPW-PUB20-PUBS3/node_modules/ngx-markdown/dist/lib/language.pipe.d.ts, found version 4, expected 3 
    at StaticSymbolResolver.getModuleMetadata (/home/bamboo/bamboo-agent-home/xml-data/build-dir/QPW-PUB20-PUBS3/node_modules/@angular/compiler/bundles/compiler.umd.js:25616:34)
    at StaticSymbolResolver._createSymbolsOf (/home/bamboo/bamboo-agent-home/xml-data/build-dir/QPW-PUB20-PUBS3/node_modules/@angular/compiler/bundles/compiler.umd.js:25404:46)
    at StaticSymbolResolver.getSymbolsOf (/home/bamboo/bamboo-agent-home/xml-data/build-dir/QPW-PUB20-PUBS3/node_modules/@angular/compiler/bundles/compiler.umd.js:25385:14)
    at /home/bamboo/bamboo-agent-home/xml-data/build-dir/QPW-PUB20-PUBS3/node_modules/@angular/compiler/bundles/compiler.umd.js:24241:30
    at Array.forEach (native)
    at extractProgramSymbols (/home/bamboo/bamboo-agent-home/xml-data/build-dir/QPW-PUB20-PUBS3/node_modules/@angular/compiler/bundles/compiler.umd.js:24240:79)
    at AotCompiler.analyzeModulesAsync (/home/bamboo/bamboo-agent-home/xml-data/build-dir/QPW-PUB20-PUBS3/node_modules/@angular/compiler/bundles/compiler.umd.js:23796:47)
    at CodeGenerator.codegen (/home/bamboo/bamboo-agent-home/xml-data/build-dir/QPW-PUB20-PUBS3/node_modules/@angular/compiler-cli/src/codegen.js:32:14)
    at Function.NgTools_InternalApi_NG_2.codeGen (/home/bamboo/bamboo-agent-home/xml-data/build-dir/QPW-PUB20-PUBS3/node_modules/@angular/compiler-cli/src/ngtools_api.js:73:30)
    at _donePromise.Promise.resolve.then (/home/bamboo/bamboo-agent-home/xml-data/build-dir/QPW-PUB20-PUBS3/node_modules/@ngtools/webpack/src/plugin.js:428:58)

Using these packages

{
  "dependencies": {
    "@angular/animations": "^4.4.6",
    "@angular/common": "^4.4.6",
    "@angular/compiler": "^4.4.6",
    "@angular/core": "^4.4.6",
    "@angular/forms": "^4.4.6",
    "@angular/http": "^4.4.6",
    "@angular/platform-browser": "^4.4.6",
    "@angular/platform-browser-dynamic": "^4.4.6",
    "@angular/platform-server": "^4.4.6",
    "@angular/router": "^4.4.6",
    "@angular/service-worker": "^1.0.0-beta.5",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "ng-pwa-tools": "0.0.15",
    "ngx-markdown": "^1.5.1",
    "node-sass": "^4.7.2",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.4.10",
    "@angular/compiler-cli": "^4.4.6",
    "@angular/language-service": "^4.4.5",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^3.2.2",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "2.4.2"
  }
}

Unable to find out whether the file exists or not based on the source provided in the . If the file does not exist then throw an error event that can be captured in the usage component for some work.

<!-- loaded from remote url -->
<markdown [src]="'path/to/file.md'"></markdown>

how do I access remote URL markdown file and render it?
URL can be a property in the class file.

I'm using MarkdownModule in the default way
in the imports

    MarkdownModule.forRoot(),

and when i build my project ng build -- --prod --aot
i'm getting this error

ERROR in Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'MarkdownModule' was called.

i'm using the latest version 6.0.0

IE 11 is supported? Im using angular 4 and ngx2-markdown.

I'd like to set custom options as shown in the marked documentation e.g.:

marked.setOptions({
  breaks: false
});

Which makes single line breaks into <br>s instead of the normal md behaviour of just adding a space (i.e. treating this as a line continuation).

Right now, I can hack this by just adding my desired call to setOptions at the top of markdown.component.js, but would prefer to have an option per component instance.

Any plans to add setting of custom marked options? Happy to help with preparing a PR with an attempt if this is useful.

For a simple example, in HTML I give

<div markdown>
    **TEXT**

    # TITLE
</div>

And it shows excatly as

TEXT # TITLE

Turns out all the content inside one <markdown> are shrinked into one <p>, which I think cause the problem. It happens everywhere just after I install the latest version.

I would like tu use Katex with ngx-markdown the same way I can use it on StackEdit.io.
Is it planned to have some docs about how to add plugins or how to add new key (in StackEdit, Katex syntax is between $$) to execute some logics ?

## KaTeX

You can render LaTeX mathematical expressions using [KaTeX](https://khan.github.io/KaTeX/):

The *Gamma function* satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

I can try to do something and do a PR if you want but I would need some indications.

I've been trying to highlight Typescript syntax. The text briefly highlights the syntax, then returns to an unhighlighted state. So the highlighting is working, but not staying highlighted.

I'm using ngx-clipboard@^9.0.0, and it doesn't seem to matter which method I use to load the information; I've tried:

Passing a variable created in my Typescript code, that contains a small amount of Typescript code:

<markdown [data]="base31x | language : 'typescript'"> </markdown>

Passing a variable that observes a HTTP Get:
<markdown [data]="base31 | async | language : 'typescript'"> </markdown>

Referring to a local copy of the file stored as an asset:
<markdown [src]="'assets/base31.ts'"> </markdown>

I get the same results regardless of how I hand the Typescript code to the directive: a very brief display of highlighted code followed by a plain, unhighlighted rendering of the code.

ERROR
node_modules/ng2-markdown-to-html/src/app/markdown-to-html/markdown-to-html.service.ts (25,39): Type 'ErrorObservable' is not generic.)

i am getting this error with @angular/cli 1.0.0-beta.32.3
while using the ng build -prod --aot --verbose

Hi! I'm trying to display a markdown in my angular 6 app. I'm using the basic configuration of this plugin and follow the steps in the readme , and it works, but the app shows the text without style. I mean, I want to displays this:

## My header
**my text**

like this :

My header

my text

But I can only show it like this, in plain text:

My header
my text

Also, it doesn't take either the headings or any of the markdown tags. what i'm doing wrong ? this is my code:

• html
  <markdown ngPreserveWhitespaces [src]="'./assets/md/faqs.md'" ></markdown>

• module.ts

import { NgModule } from '@angular/core';
import { FaqsComponent } from './faqs.component';
import { routing } from './faqs.routing';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { MarkdownModule, MarkedOptions, MarkedRenderer } from 'ngx-markdown';
@NgModule({
imports: [
    HttpClientModule,
    MarkdownModule.forRoot({
      loader: HttpClient
    }),
    routing
  ],
  declarations: [
    FaqsComponent
  ],
  providers: [],
})
export class FaqsModule {
}

Thanks in advance