https://github.com/manthanank/ng-markdown
Ng Markdown
https://github.com/manthanank/ng-markdown
angular highlight library markdown marked package
Last synced: about 2 months ago
JSON representation
Ng Markdown
- Host: GitHub
- URL: https://github.com/manthanank/ng-markdown
- Owner: manthanank
- License: mit
- Created: 2025-07-17T17:48:25.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2025-07-18T08:58:13.000Z (11 months ago)
- Last Synced: 2025-10-25T04:56:51.623Z (8 months ago)
- Topics: angular, highlight, library, markdown, marked, package
- Language: TypeScript
- Homepage:
- Size: 91.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NgMarkdown
This is a simple Angular markdown rendering library.
## Installation
```bash
npm install @manthanankolekar/ng-markdown
```
## Usage
Import
```typescript
import { Component, signal } from '@angular/core';
import { NgMarkdownComponent } from '@manthanankolekar/ng-markdown';
@Component({
selector: 'app-root',
standalone: true,
imports: [NgMarkdownComponent],
template: `
Toggle Markdown
`,
styles: `
.markdown-container {
padding: 1.5rem;
background: #fff;
border-radius: 0.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
max-width: 42rem;
margin: 2rem auto;
}
.toggle-btn {
display: block;
margin: 1rem auto 0 auto;
padding: 0.5rem 1.5rem;
background: #2563eb;
color: #fff;
font-weight: 600;
border: none;
border-radius: 0.375rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s;
}
.toggle-btn:hover, .toggle-btn:focus {
background: #1d4ed8;
outline: none;
box-shadow: 0 0 0 3px rgba(37,99,235,0.3);
}
`
})
export class AppComponent {
markdownText = '# Hello, Markdown!\n\n```ts\nconsole.log("Hello World");\n```';
toggleMarkdown() {
this.markdownText = this.markdownText.includes('Hello')
? '# Updated Markdown!\n\n- List item 1\n- List item 2'
: '# Hello, Markdown!\n\n```ts\nconsole.log("Hello World");\n```';
}
}
```
Use
```html
```
- `data`: The markdown string to render.
## Demo
[Stackblitz](https://stackblitz.com/edit/ng-markdown-example)
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.