Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ericleib/ngx-remark
Render markdown with custom Angular templates
https://github.com/ericleib/ngx-remark
Last synced: 3 months ago
JSON representation
Render markdown with custom Angular templates
- Host: GitHub
- URL: https://github.com/ericleib/ngx-remark
- Owner: ericleib
- License: mit
- Created: 2023-07-18T08:28:19.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-05-07T13:14:28.000Z (6 months ago)
- Last Synced: 2024-07-09T11:52:56.641Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 394 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-remark - Render markdown with custom Angular templates. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-remark - Render markdown with custom Angular templates. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-remark - Render markdown with custom Angular templates. (Table of contents / Third Party Components)
README
[](https://github.com/ericleib/ngx-remark/actions/workflows/build.yml)
[](https://badge.fury.io/js/ngx-remark)
# ngx-remark
This library allows to render Markdown with custom HTML templates in Angular.
Most libraries for rendering Markdown in Angular first transform the Markdown to HTML and then use the `innerHTML` attribute to render the HTML. The problem of this approach is that there is no way to use Angular components or directives in any part of the generated HTML.
In contrast, this library uses [Remark](https://remark.js.org/) to parse the Markdown into an abstract syntax tree (AST) and then uses Angular to render the AST as HTML. The `` component renders all standard Markdown elements with default built-in templates, but it also allows to override the templates for any element.
Typical use cases include:
- Displaying code blocks with a custom code editor.
- Displaying custom tooltips over certain elements.
- Allowing custom actions with buttons or links.
## Installation
Install the library with npm:
```bash
npm install ngx-remark
```
## Importing the library
Import the `RemarkModule` in your application module:
```typescript
import { RemarkModule } from 'ngx-remark';
@NgModule({
imports: [
RemarkModule
]
})
export class AppModule { }
```
## Usage
Use the `` component to render Markdown:
```html
```
The above renders the HTML will all default templates.
You can customize the Remark processing pipeline with the optional `processor` input (the default is `unified().use(remarkParse)`):
```html
```
As an example, the following uses the [remark-gfm](https://github.com/remarkjs/remark-gfm) plugin to support GitHub Flavored Markdown:
```typescript
import { RemarkGfm } from 'remark-gfm';
processor = unified().use(remarkParse).use(RemarkGfm);
```
You can override the templates for any node type with the `` element and the `remarkTemplate` directive:
```html
...
```
In the above example, note the following:
- The headings of depth 1 are customized with a red color.
- The `remarkTemplate` attribute must be set to the name of the [MDAST](https://github.com/syntax-tree/mdast) node type.
- The `let-node` attribute is required to make the `node` variable available in the template. The `node` variable is of type `Node` and can be used to access the properties of the node.
- Since the heading node might have children (in particular `text` nodes), the `remarkNode` directive is used to render the children of the node.
It is possible to use the structural shorthand syntax for the `remarkTemplate` directive:
```html
```
If the node type doesn't have children, the `[remarkNode]` directive isn't required:
```html
```
You can customize various node types by adding as many templates as needed:
```html
```