babel-plugin-markdown-in-jsx
这是一个 babel 插件,帮助你在 jsx 中使用 Markdown。
;;;{return<Markdown># babel-plugin-markdown-in-jsxTransform Markdown inside `JSX` to `DOM` elements at compile time<Button variant="contained">Hello World</Button>= Math</Markdown>}
Getting Started
在你的项目中打开终端,输入以下代码。
npm install --save-dev babel-plugin-markdown-in-jsx
修改 .babelrc
首先你需要在代码中声明 Markdown
组件
const Markdown = ;
也可以使用 esmodule
语法
;
这里声明的变量名
Markdown
是随意的,但包名必须是babel-plugin-markdown-in-jsx/component
一字不差。请注意,这条声明在编译后会被删除。
现在你就可以在 JSX 中使用 Markdown
组件。
组件中的文本会被作为 Markdown 编译成 HTML。
表达式和 JSX 组件会被保留在原地。
{const imgsrc = 'img.png';return<Markdown># Markdown Hello world也可以插入JS表达式: = Math图片的链接也可以写变量: !图片http://{imgsrc})<div>这里的内容不会被编译。<Markdown># 这里的内容会作为 Markdown 编译。</Markdown></div></Markdown>}
Inline Mode
babel-plugin-markdown-in-jsx
有一种 inline 模式。
在 Markdown
组件上加上 inline 属性,可以使用 inline 模式编译。
<Markdown>123</Markdown>编译后<div><p>123</p></div>=============================<Markdown inline>123</Markdown>编译后<span>123</span>
Built-in Component Proxy
babel-plugin-markdown-in-jsx
提供一种方法可以自定义 Markdown
编译结果中的 React 原生组件。
有几种使用场景:
- 如果你希望用更复杂的
<custom-img />
来替换原生的<img />
。 - 如果你使用
css in js
,为 Markdown 内容增加样式可能会有困难。 - 如果你想要给所有
a
标签加上target="_blank"
你需要修改 .babelrc
打开 proxy 功能。
proxy
功能使用了 react
的 context
来实现,关于 Context 的详细信息。
引入 babel-plugin-markdown-in-jsx/component/proxy
;
再使用 <Proxy.Provider />
并设置 value
属性
比如要替换文中所有的 <img />
和 <h1 />
<ProxyProvidervalue=img: CustomImageh1: CustomH1>...</ProxyProvider>
<Proxy.Provider />
下面的所有 <Markdown />
都会被设置影响。
下面是一个为所有的图片增加红色边框的例子。
;;;{return<img style=border: '3px solid #f00' ...props />;}{return<ProxyProvider value=img: CustomImage><Markdown># babel-plugin-markdown-in-jsxTransform Markdown inside `JSX` to `DOM` elements at compile time!/githubpng</Markdown></ProxyProvider>}