重现原生马克倒置渲染器
由MDAST提供动力,用于React Industrial的灵活和能动的Markdown渲染器. 支持自定义的造型、嵌入元素和可扩展性,为完全控制输出制定规则.
特征
- – CommonMark-Compliant – 解析并让 Markdown 以 CommonMark spec 为基础
- QQ GFM 支持 – 通过可插件扩展以 GitHub Flavored Markdown 特性扩展 Markdown .
- – React Industrial First – 专为在React Institute中渲染Markdown而设计
- — — 基于 AST 的渲染 — — 使用自定义的精致控制让规则由 MDAST 节点驱动
- QQ 完全自定义 – 自定义每个 Markdown 元素如何以灵活方式制作规则
- QQ 轻量级 & 树形可移动 – 没有捆绑语法亮点的最小脚印
- QQ TypeScript First — 为更安全和更可预测的代码打字很强
标记 – 有自定义组件的Render Markdown, AST 访问,以及对渲染行为的全面控制.
鸣谢
此软件包的灵感来自 反应- 内置- 标记- 显示 ——多亏了原作者为Markdown在React Introduct中渲染打下基础.
我们用一个完全的型号安全架构构建了这个基础, 用更轻而更现代的mdast-util-broad-markdown parser来交换.
安装
国家预防机制
npm install @docren/react-native-markdown
雅伦
yarn add @docren/react-native-markdown
菲律宾
pnpm add @docren/react-native-markdown
基准使用
import { View, StyleSheet, ScrollView } from 'react-native';
import { Markdown } from '@docren/react-native-markdown';
export default function App() {
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={styles.content}>
<Markdown
markdown={`#Hello world`}
}
/>
</ScrollView>
</View>
);
}
export default App;
更详细用途
提案和方法
这个 <Markdown> 组件采用下列道具.
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
| 马克多 | 字符串 QQ Uint8 箭头 | 不详 | required Markdown的内容要渲染。 接受纯字符串或 .md 文件内容为 Uint8Array . |
| 样式 | 样式映射 QQ 无效 | 来源 | 适用于Markdown元素的样式 。 通过由 Markdown 元素类型键入的样式图 . |
| 合并样式 | 布尔 | 真实 | 是否将默认样式与用户提供的样式图合并 。 若为 false,只使用您的风格. |
| 使规则 | 渲染规则 | 来源 | 自定义如何使用渲染函数对象渲染特定的Markdown元素 。 默认合并 . |
| 列表 Bullet 样式 | 盘子 盘子 | "盘" | 定义未排序列表的默认项目符号样式( 或 – ) . |
| 自定义组件 | 反演 QQ 无效 | 不详 | 覆盖带有自定义反应元素的默认列表项目。 适用于所有未排列列表项目. |
| 链接新闻 | (url:字符串) 虚空 | 不详 | 按下链接时引用回调 。 提供时, 它取代默认值 Linking.openURL 行为. |
| 扩展 | 扩展[ ] | [ | 通过提供自定义的 MDAST 扩展或修改 Markdown 解析 。 用于GFM或自定义语法. 要知道更多情况 |
| 调试 | 布尔 | 虚假 | 为开发目的在解析和渲染过程中启用调试日志 . |
语法支持
- 块引用
- 换行
- 代码
- 重点
- 定义
- 标题
- 标题1
- 标题3
- 标题4
- 标题2
- 标题5
- 标题6
- 图像
- 图像参考
- 内置代码
- 链接
- 链接参考
- 列表
- 列表 项目
- 段 次 页 次
- 根号
- 强
- 文本
- 主题中断
- 击出( 计划)
- 表格(计划)
- 表单
- 桌面
- html(未计划)
- (未计划)
规则和样式
样式元素
文本样式遵循了相接法,类似于CSS的工作方式. 全局样式可以使用根样式设置,该样式将适用于大多数Markdown元素,同时仍然允许您在需要时在单个元素上覆盖特定的样式.
记住:文本样式并不影响所有的文本节点——特别是列表项目等. 如果您想要对所有文本应用一致的样式(例如颜色或字体),则最好用根样式来定义它.
样式
样式允许您自定义特定 Markdown 元素的外观, 压倒默认的样式行为, 默认样式。 。 。 .
默认情况下,您的样式与内置样式合并. 要完全覆盖它们,请参考合并的Style道具.
样式示例
export default function App() {
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={styles.content}>
<Markdown
markdown={mdxString}
styles={{
blockquote: {
backgroundColor: '#cad8ee',
borderRadius: 12,
},
}}
/>
</ScrollView>
</View>
);
}
规则
规则允许您定义 Markdown 元素应该如何显示 。 您可以找到默认执行 这里。 。 。 .
注:在定义规则时,确保为每个组件指定一个独特的密钥. 您可以使用节点属性中提供的自定义值或密钥 .
i️您不需要定义、链接参考或图像参考的规则,因为这些规则是内部解决的链接和图像。 你还可以用在你的Markdown内容中. 如果您需要定制, 请覆盖链接和图像的渲染规则 .
如果你用这个包与博览会.
规则示例
import {Image} from 'expo-image'
export default function App() {
const mdxString = `
`
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={styles.content}>
<Markdown
markdown={mdxString}
renderRules={{
image: ({ node }) => (
<Image
key={(node as any).key}
source={{ uri: node.url }}
alt={node.alt ?? ""}
style={{ width: "100%", height: 300, borderRadius: 8 }}
/>
),
}}
/>
</ScrollView>
</View>
);
}
语法高音
这个软件包不包括内置语法突出,因为它的目的是保持轻量级. 不过,您可以整合外部图书馆,例如 反应 - 内语法 - 高亮 或者说 反应-内置-代码-高亮器 对于这个功能.
一旦集成,您就可以应用语法突出显示 renderRule.code 函数.
在包含的示例应用中可以找到一个执行实例.
语法突出显示规则
import CodeHighlighter from 'some-syntax-highlighting-package'
<Markdown
markdown={mdxString}
renderRules={{
code: ({ node }) => (
<CodeHighlighter
key={(node as any).key}
hljsStyle={atomOneDarkReasonable} //highlight.js theme
language={node.lang || 'plaintext'}
scrollViewProps={{
bounces: false,
contentContainerStyle: styles.codeContentContainer,
}}
textStyle={styles.codeTextStyle}
>
{node.value}
</CodeHighlighter>
),
}}
/>
处理链接
默认情况下,链接由 Linking 从反应-内在。 ie,
import { Linking } from 'react-native';
Linking.openURL(url);
你可以以两种方式之一推翻这种行为:
使用 LinkPress 回调
export default function App() {
const mdxString = `[Link to Google](https://www.google.com)`
const onLinkPress = (url: string) => {
// Handle link press, e.g., open in a web browser or navigate to a screen
console.log('Link pressed:', url);
};
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={styles.content}>
<Markdown markdown={mdxString} onLinkPress={onLinkPress} />
</ScrollView>
</View>
);
}
提供自定义渲染
要覆盖默认链接行为, 您可以使用自定义渲染规则 。 链接。 若您使用博览会, 建议使用Expo路由器进行内部链接和外部链接.
export default function Screen() {
const markdown = `
[Explore](/explore)
[Google](https://google.com)
`;
const router = useRouter();
const handleLinkPress = (url: string) => {
if (!url.startsWith('/')) {
// If the URL does not start with '/', treat it as an external link
// and open it in the default browser.
return Linking.openURL(url);
}
router.push(url as Href);
};
const rules: RenderRules = {
link: ({ node, children }) => {
return (
<Text
key={(node as any).key}
style={{ color: 'blue', textDecorationLine: 'underline' }}
onPress={() => handleLinkPress(node.url)}
>
{children}
</Text>
);
},
};
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={styles.content}>
<Markdown markdown={markdown} renderRules={rules} />
</ScrollView>
</View>
);
}
所有规则及其相关的风格
大多数规则和样式都使用同名名称,因此参考 语法支持 的章节。 以下列出任何不同命名的例外情况.
当怀疑时,检查 默认样式 财务报告和审定财务报表 默认生成规则
定义,链接参考和图像参考没有规定规则或样式,因为如上所述,它们作为链接和图像的内部处理.
| 规则 | 样式 | 说明 |
|---|---|---|
| 标题 | 标题1 标题2 标题3 标题4 标题5 | 对于单一标题渲染规则,有6个风格变化,对应不同的标题级别(h1到h6). |
| 列表 项目 | 列表项目、列表包、列表项目 | 列表项目 - 包装子弹和内容的容器样式。 ListBullet – 列表缓存 – 无序列表( 或 ) 中使用的默认项目符号样式 。 [不适用于自定义项目元素] 列表项目 Content — 列表项目内容部分的样式 . |
路线图
- 主题样式( 暗/ 淡模式)
- 表格支持
相关
捐款
见 贡献指南 学习如何为储存库和发展工作流程作出贡献.
许可证
这个项目根据麻省理工学院的许可证获得许可.