{"id":47271436,"url":"https://github.com/Foblex/m-render","last_synced_at":"2026-03-27T22:00:44.066Z","repository":{"id":270467124,"uuid":"910459496","full_name":"Foblex/m-render","owner":"Foblex","description":"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.","archived":false,"fork":false,"pushed_at":"2026-02-18T11:38:36.000Z","size":67462,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-03-11T10:00:06.628Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://m-render.foblex.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Foblex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"custom":["https://www.paypal.com/donate/?hosted_button_id=VXXQ5SRMEU256"]}},"created_at":"2024-12-31T10:31:42.000Z","updated_at":"2026-03-05T06:14:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"05536cb1-843a-4d3d-bba2-f0e1f629afc9","html_url":"https://github.com/Foblex/m-render","commit_stats":null,"previous_names":["foblex/m-render"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/Foblex/m-render","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foblex%2Fm-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foblex%2Fm-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foblex%2Fm-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foblex%2Fm-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Foblex","download_url":"https://codeload.github.com/Foblex/m-render/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foblex%2Fm-render/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31061197,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-27T19:32:53.857Z","status":"ssl_error","status_checked_at":"2026-03-27T19:32:45.136Z","response_time":164,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-03-15T13:00:29.425Z","updated_at":"2026-03-27T22:00:44.053Z","avatar_url":"https://github.com/Foblex.png","language":"TypeScript","readme":"# MRender: Markdown Renderer for Angular\n\n**MRender** is an Angular library for rendering Markdown-based documentation with SSR support, built-in Angular components, customizable UI, and extended syntax.\n\n---\n\n## 🚀 Features\n\n* Render `.md` files in Angular apps\n* Extended syntax: `ng-component`, `code-group`, `preview-group`, alert blocks (`tip`, `info`, `danger`, etc.)\n* Fully SSR-compatible\n* Embed Angular components inside markdown\n* Provider-based configuration for homepage and documentation\n* Lazy loading of examples\n* Built-in Table of Contents, SEO and meta support\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @foblex/m-render\n```\n\n---\n\n## 🧩 Usage\n\n### Homepage Configuration\n\n```ts\nimport {\n  provideBackground, provideComponents,\n  provideHero, provideHomeButtons, provideHomeFeatures,\n  provideHomeFooter, provideImage, provideLogo, provideTitle\n} from '@foblex/m-render';\n\nexport const HOME_CONFIGURATION = {\n  providers: [\n    provideLogo('./logo.svg'),\n    provideTitle('Foblex Flow'),\n    provideHero({\n      headline: 'Foblex Flow',\n      tagline1: 'Built with Angular',\n      tagline2: 'Flow-Chart Library',\n      subDescription: 'Supports Angular 12+, SSR, and Composition API.',\n    }),\n    provideBackground(HomePageBackgroundComponent),\n    provideImage(HomePageImageComponent),\n    provideHomeButtons([...]),\n    provideHomeFeatures([...]),\n    provideHomeFooter({ text: 'MIT License | Copyright © 2022 - Present' }),\n  ],\n};\n```\n\n### Documentation Configuration\n\n```ts\nimport {\n  provideDirectory, provideNavigation, provideComponents,\n  provideTableOfContent, provideHeader, provideFooterNavigation,\n  provideMeta, provideHeaderSearchAlgolia\n} from '@foblex/m-render';\n\nexport const DOCUMENTATION_CONFIGURATION = {\n  providers: [\n    provideDirectory('./markdown/guides/'),\n    provideNavigation(...),\n    provideComponents([...]),\n    provideTableOfContent({ title: 'In this article', range: { start: 2, end: 6 } }),\n    provideHeader(...),\n    provideFooterNavigation(...),\n    provideMeta({ ... }),\n  ],\n};\n```\n\n### Enable Algolia Search + Ask AI\n\n```ts\nprovideHeader(\n  provideHeaderSearchAlgolia({\n    appId: 'YOUR_APP_ID',\n    apiKey: 'YOUR_SEARCH_ONLY_API_KEY',\n    indexName: 'YOUR_INDEX_NAME',\n    placeholder: 'Ask AI / Search',\n  }),\n);\n```\n\n### Route Setup\n\n```ts\nimport { provideDocumentation, provideHomePage } from '@foblex/m-render';\n\nexport const routes: Routes = [\n  {\n    path: '',\n    loadChildren: () =\u003e import('@foblex/m-render').then((m) =\u003e\n      m.HOME_ROUTES.map((route) =\u003e ({\n        ...route,\n        providers: [provideHomePage(HOME_CONFIGURATION)],\n      }))\n    ),\n  },\n  {\n    path: 'docs',\n    loadChildren: () =\u003e import('@foblex/m-render').then((m) =\u003e\n      m.DOCUMENTATION_ROUTES.map((route) =\u003e ({\n        ...route,\n        providers: [provideDocumentation(DOCUMENTATION_CONFIGURATION)],\n      }))\n    ),\n  },\n];\n```\n\n---\n\n## ✨ Markdown Extensions\n\n### `ng-component`\n\nRender Angular components or external URLs (via `iframe`) with optional height and linked source code:\n\n```markdown\n::: ng-component \u003ccomponent-selector\u003e\u003c/component-selector\u003e [height]=\"YOUR EXAMPLE HEIGHT\"\n[component.ts] \u003c\u003c\u003c /assets/component.ts\n[component.html] \u003c\u003c\u003c /assets/component.html\n:::\n```\n\n```markdown\n::: ng-component [url]=\"https://example.com\" [height]=\"60vh\"\n[component.ts] \u003c\u003c\u003c /assets/component.ts\n:::\n```\n\n`ng-component` supports full-screen mode out of the box for both Angular previews and iframe previews.\n\n### `code-group`\n\nGroup multiple code snippets into tabs:\n\n````markdown\n::: code-group\n```ts [Component]\nconsole.log('Component code');\n```\n\n```html [Template]\n\u003cdiv\u003eHello\u003c/div\u003e\n```\n:::\n````\n\n### `preview-group`\n\nDisplay preview groups with filters:\n\n```markdown\n::: preview-group\n[Nodes]\n[Connectors]\n[Connections]\n:::\n```\n\n### Alerts\n\nUse `tip`, `danger`, `info`, etc.:\n\n```markdown\n::: tip Title\nThis is a tip block\n:::\n```\n\n---\n\n## 🧑‍💻 Contributing\n\nOpen for contributions, feedback and PRs.\n\nGitHub: [https://github.com/Foblex/m-render](https://github.com/Foblex/m-render)\n\n---\n\n## 🧾 License\n\n[MIT](./LICENSE)\n\n---\n\n## Inspiration\n\nThe design and layout of MRender were heavily inspired by [VitePress](https://vitepress.dev), an open-source static site generator for Vue by Evan You.  \nMRender is a complete reimplementation in Angular, but its UI and structure intentionally follow VitePress for familiarity and clarity.\n","funding_links":["https://www.paypal.com/donate/?hosted_button_id=VXXQ5SRMEU256"],"categories":["Third Party Components"],"sub_categories":["Markdown"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFoblex%2Fm-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFoblex%2Fm-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFoblex%2Fm-render/lists"}