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.