Product
Introducing Java Support in Socket
We're excited to announce that Socket now supports the Java programming language.
babel-plugin-markdown-in-jsx
Advanced tools
Transform Markdown inside JSX to DOM elements at compile time.
这是一个 babel 插件,帮助你在 jsx 中使用 Markdown。
import * as React from 'react';
import Markdown from 'babel-plugin-markdown-in-jsx/component';
import Button from '@material-ui/core/Button';
function TestComponent() {
return (
<Markdown>
# babel-plugin-markdown-in-jsx
Transform Markdown inside `JSX` to `DOM` elements at compile time.
<Button variant="contained">Hello World</Button>
log(E) = {Math.log(Math.E)}
</Markdown>
)
}
在你的项目中打开终端,输入以下代码。
npm install --save-dev babel-plugin-markdown-in-jsx
修改 .babelrc
{
"presets": [
"@babel/preset-env",
"@babel/react"
],
"plugins": [
"markdown-in-jsx"
]
}
首先你需要在代码中声明 Markdown
组件
const Markdown = require('babel-plugin-markdown-in-jsx/component');
也可以使用 esmodule
语法
import Markdown from 'babel-plugin-markdown-in-jsx/component';
这里声明的变量名
Markdown
是随意的,但包名必须是babel-plugin-markdown-in-jsx/component
一字不差。请注意,这条声明在编译后会被删除。
现在你就可以在 JSX 中使用 Markdown
组件。
组件中的文本会被作为 Markdown 编译成 HTML。
表达式和 JSX 组件会被保留在原地。
function TestComponent() {
const imgsrc = 'img.png';
return (
<Markdown>
# Markdown Hello world
也可以插入JS表达式: log(E) = {Math.log(Math.E)}
图片的链接也可以写变量: ![图片](http://{imgsrc})
<div>
这里的内容不会被编译。
<Markdown>
# 这里的内容会作为 Markdown 编译。
</Markdown>
</div>
</Markdown>
)
}
babel-plugin-markdown-in-jsx
有一种 inline 模式。
在 Markdown
组件上加上 inline 属性,可以使用 inline 模式编译。
<Markdown>
123
</Markdown>
编译后
<div>
<p>123</p>
</div>
=============================
<Markdown inline>
123
</Markdown>
编译后
<span>
123
</span>
babel-plugin-markdown-in-jsx
提供一种方法可以自定义 Markdown
编译结果中的 React 原生组件。
有几种使用场景:
<custom-img />
来替换原生的 <img />
。css in js
,为 Markdown 内容增加样式可能会有困难。a
标签加上 target="_blank"
你需要修改 .babelrc
打开 proxy 功能。
{
"plugins": [
["markdown-in-jsx", {"proxy": true}]
]
}
proxy
功能使用了 react
的 context
来实现,关于 Context 的详细信息。
引入 babel-plugin-markdown-in-jsx/component/proxy
import * as Proxy from 'babel-plugin-markdown-in-jsx/component/proxy';
再使用 <Proxy.Provider />
并设置 value
属性
比如要替换文中所有的 <img />
和 <h1 />
<Proxy.Provider
value={{
img: CustomImage,
h1: CustomH1
}}
>
...
</Proxy.Provider>
<Proxy.Provider />
下面的所有 <Markdown />
都会被设置影响。
下面是一个为所有的图片增加红色边框的例子。
import * as React from 'react';
import Markdown from 'babel-plugin-markdown-in-jsx/component';
import * as Proxy from 'babel-plugin-markdown-in-jsx/component/proxy';
function CustomImage(props) {
return (
<img style={{border: '3px solid #f00'}} {...props} />
);
}
function TestComponent() {
return (
<Proxy.Provider value={{img: CustomImage}}>
<Markdown>
# babel-plugin-markdown-in-jsx
Transform Markdown inside `JSX` to `DOM` elements at compile time.
![](./github.png)
</Markdown>
</Proxy.Provider>
)
}
FAQs
Transform Markdown inside JSX to DOM elements at compile time.
The npm package babel-plugin-markdown-in-jsx receives a total of 6 weekly downloads. As such, babel-plugin-markdown-in-jsx popularity was classified as not popular.
We found that babel-plugin-markdown-in-jsx demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.
Security News
Deno 2.0 is now available with enhanced package management, full Node.js and npm compatibility, improved performance, and support for major JavaScript frameworks.