https://github.com/flowup/ngx-hackable-markdown
A customizable Markdown renderer wrapped in an Angular component
https://github.com/flowup/ngx-hackable-markdown
Last synced: 10 months ago
JSON representation
A customizable Markdown renderer wrapped in an Angular component
- Host: GitHub
- URL: https://github.com/flowup/ngx-hackable-markdown
- Owner: flowup
- License: mit
- Created: 2018-10-18T18:43:09.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-10-05T19:56:44.000Z (over 4 years ago)
- Last Synced: 2025-07-09T04:44:38.437Z (12 months ago)
- Language: TypeScript
- Homepage:
- Size: 784 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-hackable-markdown
A **customizable** Markdown renderer wrapped in an Angular component.
- **Template-driven** -- accepts `ng-template`s overriding how HTML tags and entities are rendered.
- **Angular-Universal-friendly** -- works with server-side rendering.
**This is a 0.x.x version. Breaking API changes might come and bugs might occur!**
## Installation
```
npm install --save ngx-hackable-markdown
```
## Example
### my.module.ts
```typescript
@NgModule({
imports: [
CommonModule,
HackableMarkdownModule, // DON'T FORGET TO IMPORT
],
declarations: [MyComponent],
exports: [MyComponent]
})
export class MyModule { }
```
### my.component.html
```html
»
«
• • •
```
## Templating capabilities
The `ngxHackableTag` directive should **always** adorn an `ng-template` and accepts the following arguments:
- HTML tags: `a`, `blockquote`, `code`, `del`, `em`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `hr`, `img`, `li`, `ol`, `p`, `pre`, `strong`, `ul`.
- HTML entities: `ndash` (rendered from `--`), `mdash` (rendered from `---`), `hellip` (rendered from `...`).
The view-nesting `[ngxHackableChildren]` directive adorning an `ng-container` can (and usually **should**) be used inside templates for all HTML tags except `hr` and `img`.
The following view context properties can be used in templates (see the example above):
- `content` -- the object's recursive text content.
- `metadata` -- an array of metadata like URL, title, etc. Exposed in `a` and `img` templates. E.g. `[foo](bar "baz plox")` yields `['bar', 'baz plox']`
- `children` -- a reference to the given node's children that should be passed to the `[ngxHackableChildren]` directive.
See [this cheat-sheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) (or inspect rendered DOM) in case of uncertainty about which Markdown syntax maps to a given tag.