Readme-parser-light NPM

Angular README Parser Library

A lightweight Angular library for parsing and displaying README.md content with basic markdown support. This library provides a simple way to render markdown content in your Angular applications without heavy dependencies.

Features

📝 Parsing of basic markdown elements
🔒 Secure HTML rendering with built-in sanitization
🎨 GitHub-like styling
🚀 Lightweight and performant
📱 Responsive design
🛠 Easy to customize and extend

Installation

npm install ng-readme-parser

Supported Markdown Elements

Headers (H3 to H6)
Bold text
Italic text
Unordered lists
Ordered lists
Line breaks and paragraphs

Usage

1. Import the Module

Add the ReadmeParserModule to your application's module imports:

import { ReadmeParserModule } from 'ng-readme-parser';

@NgModule({
  imports: [
    // ... other imports
    ReadmeParserModule
  ],
  // ... rest of the module configuration
})
export class AppModule { }

2. Use in Component Template

Add the readme viewer component to your template:

<lib-readme-viewer [content]="readmeContent"></lib-readme-viewer>

3. Provide Content

In your component's TypeScript file:

export class YourComponent {
  readmeContent = `
### Example Header

This is a paragraph with **bold** and *italic* text.

- Bullet point 1
- Bullet point 2
  - Nested bullet point

1. Numbered item 1
2. Numbered item 2
`;
}

Markdown Syntax Guide

Headers

### H3 Header
#### H4 Header
##### H5 Header
###### H6 Header

Text Formatting

**Bold Text**
*Italic Text*

Lists

Unordered lists:

- Item 1
- Item 2
  - Nested item

Ordered lists:

1. First item
2. Second item
   1. Nested numbered item

API Reference

ReadmeViewerComponent

Inputs

Input	Type	Description	Required
content	string	The markdown content to render	Yes

ReadmeParserService

Methods

Method	Parameters	Return Type	Description
parse	markdown: string	string	Converts markdown string to sanitized HTML

Customization

Styling

The component comes with default GitHub-like styling. You can override these styles in your application:

:host ::ng-deep .readme-content {
  /* Your custom styles here */
}

Extending Parser

To add support for additional markdown elements, extend the ReadmeParserService:

@Injectable()
export class CustomParserService extends ReadmeParserService {
  parse(markdown: string): string {
    let html = super.parse(markdown);
    // Add your custom parsing logic here
    return html;
  }
}