MRENDER: Angular 的标记下渲染器

微镜 是一个Angular 库,用于在 SSR 支持下渲染基于 Markdown 的文档,内置 Angular 组件,可自定义的 UI,以及扩展的语法.

* 特性

• 渲染器 .md 在 Angular 应用程序中的文件
• 扩展语法 : ng-component, (中文(简体) ), code-group, (中文(简体) ), preview-group,警报块(tip, (中文(简体) ), info, (中文(简体) ), danger页:1
• 与安全部门改革完全兼容
• 将角构件嵌入下标
• 以供应商为基础的主页和文件配置
• 粗略地加载实例
• 内建目录、 SIO 和元支持

* 安装

npm install @foblex/m-render

使用量

主页配置

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' }),
  ],
};

文件配置

import {
  provideDirectory, provideNavigation, provideComponents,
  provideTableOfContent, provideHeader, provideFooterNavigation,
  provideMeta
} 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({ ... }),
  ],
};

路由设置

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)],
      }))
    ),
  },
];

++ 标记下扩展

ng-component

Render 角组件或外部 URL( 通过 iframe)带有可选的高度和链接源代码:

::: ng-component <component-selector></component-selector> [height]="YOUR EXAMPLE HEIGHT"
[component.ts] <<< /assets/component.ts
[component.html] <<< /assets/component.html
:::

::: ng-component [url]="https://example.com" [height]="60vh"
[component.ts] <<< /assets/component.ts
:::

ng-component 支持全屏模式出框,用于角预览和iframe预览.

code-group

将多个代码片段组合成标签 :

::: code-group
```ts [Component]
console.log('Component code');
```

```html [Template]
<div>Hello</div>
```
:::

preview-group

以过滤器显示预览组 :

::: preview-group
[Nodes]
[Connectors]
[Connections]
:::

警报

使用 tip, (中文(简体) ), danger, (中文(简体) ), info等 :

::: tip Title
This is a tip block
:::

捐款

开放捐款、反馈和公关.

GitHub : (中文(简体) ) https://github.com/Foblex/m-render (英语)

许可证

麻省理工学院

灵感

MRender的设计和布局受到很大启发 虚拟新闻由Evan You为Vue制作的开源静态站点生成器.
MRender在Angular是完全的再执行,但其UI和结构有意地跟随VitePress的熟悉和清晰.