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;
  }
}

Security

The library implements several security measures:

• HTML sanitization using Angular's DomSanitizer
• XSS protection
• Safe HTML rendering

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Author

Ankitkumar Singh

Acknowledgments

• Inspired by GitHub's README rendering
• Built with Angular Framework

Support

For support, issues, or feature requests, please create an issue in the GitHub repository.