Skip to content

Commit

Permalink
Rename to ngx-markdown (#30)
Browse files Browse the repository at this point in the history
  • Loading branch information
jfcere authored Oct 28, 2017
1 parent 98ad9c7 commit 59c8102
Show file tree
Hide file tree
Showing 23 changed files with 139 additions and 137 deletions.
2 changes: 1 addition & 1 deletion .angular-cli.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "ng2-markdown-to-html"
"name": "ngx-markdown"
},
"apps": [
{
Expand Down
54 changes: 27 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# ng2-markdown-to-html
[![CircleCI](https://circleci.com/gh/jfcere/ng2-markdown-to-html/tree/master.svg?style=shield&)](https://circleci.com/gh/jfcere/ng2-markdown-to-html/tree/master) [![Coverage Status](https://coveralls.io/repos/github/jfcere/ng2-markdown-to-html/badge.svg?branch=master)](https://coveralls.io/github/jfcere/ng2-markdown-to-html?branch=master) [![version](https://img.shields.io/npm/v/ng2-markdown-to-html.svg?style=flat)](https://www.npmjs.com/package/ng2-markdown-to-html) [![npm](https://img.shields.io/npm/l/ng2-markdown-to-html.svg)](https://opensource.org/licenses/MIT) [![dependencies Status](https://david-dm.org/jfcere/ng2-markdown-to-html/status.svg)](https://david-dm.org/jfcere/ng2-markdown-to-html) [![peerDependencies Status](https://david-dm.org/jfcere/ng2-markdown-to-html/peer-status.svg)](https://david-dm.org/jfcere/ng2-markdown-to-html?type=peer)
# ngx-markdown
[![CircleCI](https://circleci.com/gh/jfcere/ngx-markdown/tree/master.svg?style=shield&)](https://circleci.com/gh/jfcere/ngx-markdown/tree/master) [![Coverage Status](https://coveralls.io/repos/github/jfcere/ngx-markdown/badge.svg?branch=master)](https://coveralls.io/github/jfcere/ngx-markdown?branch=master) [![version](https://img.shields.io/npm/v/ngx-markdown.svg?style=flat)](https://www.npmjs.com/package/ngx-markdown) [![npm](https://img.shields.io/npm/l/ngx-markdown.svg)](https://opensource.org/licenses/MIT) [![dependencies Status](https://david-dm.org/jfcere/ngx-markdown/status.svg)](https://david-dm.org/jfcere/ngx-markdown) [![peerDependencies Status](https://david-dm.org/jfcere/ngx-markdown/peer-status.svg)](https://david-dm.org/jfcere/ngx-markdown?type=peer)

ng2-markdown-to-html is an [Angular 2+](https://angular.io/) library that uses [marked](https://github.com/chjj/marked) to parse markdown to html combined with [Prism.js](http://prismjs.com/) for synthax highlights.
ngx-markdown is an [Angular 2+](https://angular.io/) library that uses [marked](https://github.com/chjj/marked) to parse markdown to html combined with [Prism.js](http://prismjs.com/) for synthax highlights.

Demo available @ [jfcere.github.io/ng2-markdown-to-html](https://jfcere.github.io/ng2-markdown-to-html)
Demo available @ [jfcere.github.io/ngx-markdown](https://jfcere.github.io/ngx-markdown)

## Installation

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

```bash
npm install ng2-markdown-to-html --save
npm install ngx-markdown --save
```

## Configuration
Expand Down Expand Up @@ -42,96 +42,96 @@ If you are using [Angular CLI](https://cli.angular.io/) you can follow the examp

## Usage

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

```diff
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
+ import { MarkdownToHtmlModule } from 'ng2-markdown-to-html';
+ import { MarkdownModule } from 'ngx-markdown';

import { HomeComponent } from './home.component';

@NgModule({
imports: [
CommonModule,
+ MarkdownToHtmlModule.forRoot(),
+ MarkdownModule.forRoot(),
],
declarations: [HomeComponent],
})
```

ng2-markdown-to-html provides one component and one directive to parse your markdown to your web application.
ngx-markdown 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.
You can use `markdown` 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.

```html
<!-- static markdown -->
<markdown-to-html>
<markdown>
# Markdown
</markdown-to-html>
</markdown>

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

<!-- variable binding -->
<markdown-to-html [data]="markdown"></markdown-to-html>
<markdown [data]="markdown"></markdown>
```

### Directive

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

```html
<!-- static markdown -->
<div markdown-to-html>
<div markdown>
# Markdown
</div>

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

<!-- variable binding -->
<div markdown-to-html [data]="markdown"></div>
<div markdown [data]="markdown"></div>
```

## Synthax highlight

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

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

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

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

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

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).

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

## Demo application

A demo is available @ [https://jfcere.github.io/ng2-markdown-to-html](https://jfcere.github.io/ng2-markdown-to-html) and it source code can be found inside the `src/app/markdown-demo` directory.
A demo is available @ [https://jfcere.github.io/ngx-markdown](https://jfcere.github.io/ngx-markdown) 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](http://localhost:4200)

```bash
git clone https://github.com/jfcere/ng2-markdown-to-html.git
git clone https://github.com/jfcere/ngx-markdown.git
npm install
ng serve
```
Expand Down
4 changes: 2 additions & 2 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ function minifyTemplate(path, ext, file, callback) {
}

gulp.task('inline-template', function () {
return gulp.src(['./src/app/markdown-to-html/*.ts', '!./src/app/markdown-to-html/*.spec.ts'])
return gulp.src(['./src/app/markdown/*.ts', '!./src/app/markdown/*.spec.ts'])
.pipe(inlineNg2Template({
base: '/src/app/markdown-to-html',
base: '/src/app/markdown',
removeLineBreaks: true,
styleProcessor: sassProcessor,
templateProcessor: minifyTemplate,
Expand Down
4 changes: 2 additions & 2 deletions index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export * from './src/app/markdown-to-html/markdown-to-html.module';
export * from './src/app/markdown-to-html/markdown-to-html.component';
export * from './src/app/markdown/markdown.module';
export * from './src/app/markdown/markdown.component';
11 changes: 6 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "ng2-markdown-to-html",
"name": "ngx-markdown",
"description": "Angular 2+ library that uses marked to parse markdown to html combined with Prism.js for synthax highlights",
"homepage": "https://github.com/jfcere/ng2-markdown-to-html",
"homepage": "https://github.com/jfcere/ngx-markdown",
"version": "1.3.2",
"license": "MIT",
"author": {
Expand All @@ -10,7 +10,7 @@
},
"repository": {
"type": "git",
"url": "https://github.com/jfcere/ng2-markdown-to-html"
"url": "https://github.com/jfcere/ngx-markdown"
},
"keywords": [
"angular",
Expand All @@ -20,6 +20,7 @@
"markdown-to-html",
"marked",
"ng2",
"ngx",
"parser",
"prism",
"prism.js"
Expand All @@ -34,7 +35,7 @@
"start": "npm run clean:dist && ng serve",
"test": "ng test",
"coveralls": "cat \"./coverage/lcov.info\" | \"./node_modules/coveralls/bin/coveralls.js\"",
"build:gh-pages": "ng build --prod --base-href \"https://jfcere.github.io/ng2-markdown-to-html/\"",
"build:gh-pages": "ng build --prod --base-href \"https://jfcere.github.io/ngx-markdown/\"",
"publish:gh-pages": "angular-cli-ghpages --message \"Publish gh-pages\"",
"prebuild:lib": "npm run clean:dist && npm run clean:inline-template && npm run clean:artifact",
"build:lib": "npm run inline-template && npm run transpile && npm run package && npm run minify",
Expand All @@ -46,7 +47,7 @@
"inline-template": "gulp inline-template",
"transpile": "ngc -p src/tsconfig.lib.json",
"package": "rollup -c",
"minify": "uglifyjs dist/bundles/ng2-markdown-to-html.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/ng2-markdown-to-html.umd.min.js"
"minify": "uglifyjs dist/bundles/ngx-markdown.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/ngx-markdown.umd.min.js"
},
"private": false,
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
export default {
input: 'dist/lib/index.js',
output: {
file: 'dist/bundles/ng2-markdown-to-html.umd.js',
file: 'dist/bundles/ngx-markdown.umd.js',
format: 'umd',
},
sourceMap: false,
name: 'ng.markdowntohtml',
name: 'ngx.markdown',
globals: {
'@angular/core': 'ng.core',
'@angular/http': 'ng.http',
Expand Down
2 changes: 1 addition & 1 deletion src/app/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from './markdown-to-html/markdown-to-html.module';
export * from './markdown/markdown.module';
Loading

0 comments on commit 59c8102

Please sign in to comment.