https://github.com/Foblex/m-render
MRender is a powerful library for rendering Markdown with extended support for Angular components and code snippets. Perfect for creating SPA/SSR-based documentation or content-driven projects with built-in themes and flexibility.
https://github.com/Foblex/m-render
Last synced: about 21 hours ago
JSON representation
MRender is a powerful library for rendering Markdown with extended support for Angular components and code snippets. Perfect for creating SPA/SSR-based documentation or content-driven projects with built-in themes and flexibility.
- Host: GitHub
- URL: https://github.com/Foblex/m-render
- Owner: Foblex
- License: other
- Created: 2024-12-31T10:31:42.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-02-18T11:38:36.000Z (about 1 month ago)
- Last Synced: 2026-03-11T10:00:06.628Z (17 days ago)
- Language: TypeScript
- Homepage: https://m-render.foblex.com/
- Size: 64.3 MB
- Stars: 11
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - m-render - A library for rendering Markdown with extended support for Angular components and code snippets. (Third Party Components / Markdown)
- awesome-angular - m-render - A library for rendering Markdown with extended support for Angular components and code snippets. (Third Party Components / Markdown)
README
# MRender: Markdown Renderer for Angular
**MRender** is an Angular library for rendering Markdown-based documentation with SSR support, built-in Angular components, customizable UI, and extended syntax.
---
## 🚀 Features
* Render `.md` files in Angular apps
* Extended syntax: `ng-component`, `code-group`, `preview-group`, alert blocks (`tip`, `info`, `danger`, etc.)
* Fully SSR-compatible
* Embed Angular components inside markdown
* Provider-based configuration for homepage and documentation
* Lazy loading of examples
* Built-in Table of Contents, SEO and meta support
---
## 📦 Installation
```bash
npm install @foblex/m-render
```
---
## 🧩 Usage
### Homepage Configuration
```ts
import {
provideBackground, provideComponents,
provideHero, provideHomeButtons, provideHomeFeatures,
provideHomeFooter, provideImage, provideLogo, provideTitle
} from '@foblex/m-render';
export const HOME_CONFIGURATION = {
providers: [
provideLogo('./logo.svg'),
provideTitle('Foblex Flow'),
provideHero({
headline: 'Foblex Flow',
tagline1: 'Built with Angular',
tagline2: 'Flow-Chart Library',
subDescription: 'Supports Angular 12+, SSR, and Composition API.',
}),
provideBackground(HomePageBackgroundComponent),
provideImage(HomePageImageComponent),
provideHomeButtons([...]),
provideHomeFeatures([...]),
provideHomeFooter({ text: 'MIT License | Copyright © 2022 - Present' }),
],
};
```
### Documentation Configuration
```ts
import {
provideDirectory, provideNavigation, provideComponents,
provideTableOfContent, provideHeader, provideFooterNavigation,
provideMeta, provideHeaderSearchAlgolia
} from '@foblex/m-render';
export const DOCUMENTATION_CONFIGURATION = {
providers: [
provideDirectory('./markdown/guides/'),
provideNavigation(...),
provideComponents([...]),
provideTableOfContent({ title: 'In this article', range: { start: 2, end: 6 } }),
provideHeader(...),
provideFooterNavigation(...),
provideMeta({ ... }),
],
};
```
### Enable Algolia Search + Ask AI
```ts
provideHeader(
provideHeaderSearchAlgolia({
appId: 'YOUR_APP_ID',
apiKey: 'YOUR_SEARCH_ONLY_API_KEY',
indexName: 'YOUR_INDEX_NAME',
placeholder: 'Ask AI / Search',
}),
);
```
### Route Setup
```ts
import { provideDocumentation, provideHomePage } from '@foblex/m-render';
export const routes: Routes = [
{
path: '',
loadChildren: () => import('@foblex/m-render').then((m) =>
m.HOME_ROUTES.map((route) => ({
...route,
providers: [provideHomePage(HOME_CONFIGURATION)],
}))
),
},
{
path: 'docs',
loadChildren: () => import('@foblex/m-render').then((m) =>
m.DOCUMENTATION_ROUTES.map((route) => ({
...route,
providers: [provideDocumentation(DOCUMENTATION_CONFIGURATION)],
}))
),
},
];
```
---
## ✨ Markdown Extensions
### `ng-component`
Render Angular components or external URLs (via `iframe`) with optional height and linked source code:
```markdown
::: ng-component [height]="YOUR EXAMPLE HEIGHT"
[component.ts] <<< /assets/component.ts
[component.html] <<< /assets/component.html
:::
```
```markdown
::: ng-component [url]="https://example.com" [height]="60vh"
[component.ts] <<< /assets/component.ts
:::
```
`ng-component` supports full-screen mode out of the box for both Angular previews and iframe previews.
### `code-group`
Group multiple code snippets into tabs:
````markdown
::: code-group
```ts [Component]
console.log('Component code');
```
```html [Template]
Hello
```
:::
````
### `preview-group`
Display preview groups with filters:
```markdown
::: preview-group
[Nodes]
[Connectors]
[Connections]
:::
```
### Alerts
Use `tip`, `danger`, `info`, etc.:
```markdown
::: tip Title
This is a tip block
:::
```
---
## 🧑💻 Contributing
Open for contributions, feedback and PRs.
GitHub: [https://github.com/Foblex/m-render](https://github.com/Foblex/m-render)
---
## 🧾 License
[MIT](./LICENSE)
---
## Inspiration
The design and layout of MRender were heavily inspired by [VitePress](https://vitepress.dev), an open-source static site generator for Vue by Evan You.
MRender is a complete reimplementation in Angular, but its UI and structure intentionally follow VitePress for familiarity and clarity.