Nonlinear Programming Methods

    ng2-markdown-to-html
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.2 • Public • Published

    ng2-markdown-to-html

    CircleCI Coverage Status version npm dependencies Status peerDependencies Status

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

    Demo available @ jfcere.github.io/ng2-markdown-to-html

    Installation

    Use the following command to add ng2-markdown-to-html library to your package.json file.

    npm install ng2-markdown-to-html --save

    Configuration

    To activate Prism.js synthax highlight you will need to choose a css theme file from node_modules/prismjs/themes directory and add it to your application along with @types/prismjs types file.

    Note that you can also find additional themes by browsing the web such as Prism-Themes or Mokokai for example.

    If you are using Angular CLI you can follow the example below...

    .angular-cli.json

    "styles": [
      "styles.css",
    + "../node_modules/prismjs/themes/prism-okaidia.css"
    ],

    tsconfig.app.json (for Angular-CLI >= 1.0.0-rc.0)

    "compilerOptions": {
      "types": [
    +   "prismjs"
      ]
    },

    Usage

    You must import MarkdownToHtmlModule inside your module to be able to use markdown-to-html component and/or directive.

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    + import { MarkdownToHtmlModule } from 'ng2-markdown-to-html';
     
    import { HomeComponent } from './home.component';
     
    @NgModule({
      imports: [
        CommonModule,
    +    MarkdownToHtmlModule.forRoot(),
      ],
      declarations: [HomeComponent],
    })

    ng2-markdown-to-html provides one component and one directive to parse your markdown to your web application.

    Component

    You can use markdown-to-html component to either parse static markdown directly from your html markup, load the content from a remote url using src property or bind a variable to your component using data property.

    <!-- static markdown -->
    <markdown-to-html>
      # Markdown
    </markdown-to-html>
     
    <!-- loaded from remote url -->
    <markdown-to-html [src]="'path/to/file.md'"></markdown-to-html>
     
    <!-- variable binding -->
    <markdown-to-html [data]="markdown"></markdown-to-html>

    Directive

    The same way the component works, you can use markdown-to-html directive to accomplish the same thing.

    <!-- static markdown -->
    <div markdown-to-html>
      # Markdown
    </div>
     
    <!-- loaded from remote url -->
    <div markdown-to-html [src]="'path/to/file.md'"></div>
     
    <!-- variable binding -->
    <div markdown-to-html [data]="markdown"></div>

    Synthax highlight

    When using static markdown you are responsible to provide the code block with related language.

    <markdown-to-html>
    +  ```typescript
        const myProp: string = 'value';
    +  ```
    </markdown-to-html>

    When using remote url ng2-markdown-to-html will use file extension to automatically resolve the code language.

    <!-- will use html highlights -->
    <markdown-to-html [src]="'path/to/file.html'"></markdown-to-html>
     
    <!-- will use php highlights -->
    <markdown-to-html [src]="'path/to/file.php'"></markdown-to-html>

    When using variable binding you can optionally use language pipe to specify the language of the variable content (default value is markdown when pipe is not used).

    <markdown-to-html [data]="markdown | language : 'typescript'"></markdown-to-html>

    Demo application

    A demo is available @ https://jfcere.github.io/ng2-markdown-to-html and it source code can be found inside the src/app/markdown-demo directory.

    The following commands will clone the repository, install npm dependencies and serve the application @ http://localhost:4200

    git clone https://github.com/jfcere/ng2-markdown-to-html.git
    npm install
    ng serve

    AoT compilation

    Building with AoT is part of the CI and is tested every time a commit occurs so you don't have to worry at all.

    Road map

    Here is the list of tasks that will be done on this library in a near future ...

    • Add CircleCI integration
    • Publish demo on github pages
    • Add variable binding feature
    • Transpile library to Javascript
    • Make Prism highlight optional
    • Support Prism.js customizing options (line-numbers, line-height, ...)

    Contribution

    Contributions are always welcome, just make sure that ...

    • Your code style matches with the rest of the project
    • Unit tests pass
    • Linter passes

    License

    Licensed under MIT.

    Install

    npm i ng2-markdown-to-html

    DownloadsWeekly Downloads

    58

    Version

    1.3.2

    License

    MIT

    Last publish

    Collaborators

    • j3ff