bitpie钱包app下载中文版|mdx

bitpie钱包app下载中文版|mdx

作者： bitpie钱包app下载中文版
2024-03-07 19:51:17

让 Markdown 步入 组件时代 | MDX中文文档 | MDX中文网

rkdown 步入 组件时代 | MDX中文文档 | MDX中文网Skip to navigation让 Markdown 步入组件时代MDX 是一种书写格式，允许你在 Markdown 文档中无缝地插入 JSX 代码。 你还可以导入（import）组件，例如交互式图表或弹框，并将它们嵌入到 你所书写的内容当中。 这让利用组件来编写较长的内容成为了一场革命。 继续阅读 »New: MDX 2!经过数年的努力开发，MDX 2 版本正式发布了，新版本带来了很多 改进。 下面划重点： 改进语法 让 JSX 中插入 markdown 更容易‍ JavaScript 表达式 将 {2 * Math.PI} 转换为 6.283185307179586 新集成了 esbuild、Rollup 和 Node.js⚛️ 支持所有 JSX 运行时： React、Preact、Vue、Emotion，以及你能叫上来名字的，都被支持 改进的 AST 暴露了更多详细信息‍♀️ 编译速度至少提升 25% 生成的代码运行速度是原来的两倍 （提速 100%） @mdx-js/mdx 打包后的体积比原来的三分之一还少 （减少了 250%） 还有很多，很多……继续阅读 »MDX 有什么用？你可以通过 JSX 在 markdown 中嵌入组件：example.mdximport {Chart} from './snowfall.js'

export const year = 2018

# Last year’s snowfall

In {year}, the snowfall was above average.

It was followed by a warm spring which caused

flood conditions in many of the nearby rivers.

上述代码被编译成 JavaScript，你就可以在任何支持 JSX 的框架中 使用了：Last year’s snowfallIn 2018, the snowfall was above average. It was followed by a warm spring which caused flood conditions in many of the nearby rivers.我们制作了一个交互式的练习工具，你可以利用这个工具尝试 MDX 并看到 转换后的结果。 在线工具 »入门MDX 支持大部分的打包工具（bundlers）、框架和编辑器。 无论是 Next.js、Docusaurus 或 Gatsby。 无论是 esbuild、Rollup 或 webpack。 无论是 React、Preact 或 Vue。 继续阅读 »MDX 优点汇总❤️ 强大： MDX 将 markdown 和 JSX 语法完美地融合在一起，完美地适配 基于 JSX 的项目 一切皆组件: 可以将现有的组件使用到 MDX 中，并且可以将其它 MDX 文件作为组件导入（import） 可自定义： 可以为每个 markdown 语法指定一个用于渲染的组件（例如 {h1: MyHeading}） 基于 Markdown： 保留了 markdown 的简洁和优雅， 你只需在需要时使用 JSX 非常非常快： MDX 没有运行时的开销，所有编译都发生在构建阶段 在构建阶段It’s extremely useful for using design system components to render markdown and weaving interactive components in with existing markdown.— @chrisbiscardiMDX is made with ❤️ in Boise, Amsterdam, and around the This site does not track you.MIT © 2017-2024冀ICP备14002930号-9Project on GitHubSite on GitHubUpdates on TwitterUpdates as RSS feedSponsor on OpenCollective友链BootstrapTailwind CSSReactStyleXNext.jsDocusaurusnpmYarnpnpmBabelWebpackRollupParcelesbuildSvelteAlpine.jsMarkdownSassWebAssemblyPrettierDenoKoaLodashStrapiAxiosNunjucksPugMobXReduxJSDocSkip to content中文文档MDX 是什么？入门Using MDXExtending MDXTroubleshooting MDX使用指南GitHub flavored markdown (GFM)FrontmatterMathSyntax highlightingEmbedMDX on demand核心软件包@mdx-js/esbuild@mdx-js/loader@mdx-js/mdx@mdx-js/node-loader@mdx-js/preact@mdx-js/react@mdx-js/registerremark-mdx@mdx-js/rollup@mdx-js/vue组件在线练习场社区SupportContributeSponsorAboutProjects博客英文官网GitHubTwitterOpenCollect

什么是 MDX？ | MDX 中文网

¹ˆæ˜¯ MDX？ | MDX 中文网Skip to navigation什么是 MDX？英：What is MDX?本文介ç»�什么是 MDX æ ¼å¼�。它展示了如何在 MDX 中使用 ESM 中的 markdownã€�JSXã€�JavaScript 表达å¼�以å�Š import å’Œ export 语å�¥ã€‚ 有关如何将 MDX 集æˆ�到项目中的详细信æ�¯ï¼Œè¯·å�‚阅 § 入门。英：This article explains what the MDX format is. It shows how markdown, JSX, JavaScript expressions, and import and export statements in ESM can be used inside MDX. See § Getting started for details on how to integrate MDX into your project.内容英：Contents先决æ�¡ä»¶è‹±ï¼šPrerequisites组件时代的 Markdown英：Markdown for the component eraMDX 语法英：MDX syntaxMarkdownJSX表达å¼�英：ExpressionsESM交织英：Interleaving进一步阅读英：Further reading先决æ�¡ä»¶è‹±ï¼šPrerequisitesè¦�编写和使用 MDX，你应该熟悉 Markdown（请å�‚阅此 备忘å�•å’Œæ•™ç¨‹ è�·å�–帮助）和 JavaScript（特别是 JSX）。英：To write and enjoy MDX, you should be familiar with both markdown (see this cheat sheet and tutorial for help) and JavaScript (specifically JSX).组件时代的 Markdown英：Markdown for the component eraMDX å…�许你在 Markdown 内容中使用 JSX。你å�¯ä»¥å¯¼å…¥äº¤äº’å¼�图表或警报等组件，并将它们嵌入到你的内容中。这使得使用组件编写长篇内容å�˜å¾—é��常有趣。🚀英：MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. 🚀更å®�际的是，MDX å�¯ä»¥è§£é‡Šä¸ºä¸€ç§�å°† markdown ä¸� JSX 结å�ˆåœ¨ä¸€èµ·çš„æ ¼å¼�，如下所示：英：More practically MDX can be explained as a format that combines markdown with JSX and looks as follows:MDX# Hello, world!

> Some notable things in a block quote!

标题和�引用是 markdown，而那些类似 HTML 的标签是 JSX。对�强调或标题等常�内容，Markdown 通常感觉比 HTML 或 JSX 更自然。JSX 是 JavaScript 的扩展，看起�� HTML，但�以方便地使用组件（��用的东西）。英：The heading and block quote are markdown, while those HTML-like tags are JSX. Markdown often feels more natural to type than HTML or JSX for common things like emphasis or headings. JSX is an extension to JavaScript that looks like HTML but makes it convenient to use components (reusable things).此示例在

上使用 className。那是因为它是为 React 编写的，而 React 期望类是这样的。其他框�（例如 Vue 和 Preact）期望类的定义��，因此请注�，根�所使用的工具，JSX 的编写方�存在一些差异。英：This example uses className on the
. That’s because it was written for React and React expects classes that way. Other frameworks, such as Vue and Preact, expect classes to be defined differently, so note that there are some differences in how JSX has to be authored depending on what tools it’s used with.MDX 还支� JavaScript 的其他一些功能：大括� ({1 + 1}) 和 ESM（import 和 export）中的表达�。英：A few other features from JavaScript are supported in MDX as well: expressions in braces ({1 + 1}) and ESM (import and export).MDX 语法英：MDX syntax注�：你�必对 @mdx-js/* 包使用此语法。或者一直使用它。如�你使用打包器集�，则�以通过文件扩展�（.mdx � .md）在 MDX 和 Markdown 之间进行更改。或者，�以使用 options.format。英：Note: You don’t have to use this syntax with @mdx-js/* packages. Or use it always. If you’re using a bundler integration you can change between MDX and markdown through the file extension (.mdx vs. .md). Alternatively, options.format can be used.MDX 语法将 markdown � JSX 结�起�。这给了我们一些类似�文学编程的东西。它还为我们�供了两�语言的奇怪组�：markdown 对空格�感且宽容（你输入的内容�能�完全有效，但�会崩溃），而 JavaScript 对空格��感且�宽容（它确�会因拼写错误而崩溃）。英：The MDX syntax combines markdown with JSX. This gives us something along the lines of literate programming. It also gives us an odd mix of two languages: markdown is whitespace sensitive and forgiving (what you type may not exactly work but it won’t crash) whereas JavaScript is whitespace insensitive and unforgiving (it does crash on typos).奇怪的是，我们�常喜欢它们的结�方��英：Weirdly enough we quite like how they combine!Markdown对�强调或标题等常�内容，Markdown 通常感觉比 HTML 或 JSX 更自然。Markdown 通常看起�更符�预期并且更简�。而�是以下 HTML：英：Markdown often feels more natural to type than HTML or JSX for common things like emphasis or headings. Markdown typically looks more like what’s intended and is terser. Instead of the following HTML:HTML

A blockquote with some emphasis.

你�以在 markdown （或 MDX）中编写等效内容，如下所示：英：You can write the equivalent in markdown (or MDX) like so:Markdown> A blockquote with *some* emphasis.

MDX 默认支�标准 Markdown (CommonMark)：英：MDX supports standard markdown by default (CommonMark):Markdown# Heading (rank 1)

## Heading 2

### 3

#### 4

##### 5

###### 6

> Block quote

* Unordered

* List

1. Ordered

2. List

A paragraph, introducing a thematic break:

---

```js

some.code()

```

a [link](https://example.com), an

![image](./image.png)

, some *emphasis*,

something **strong**, and finally a little `code()`.

�标准 Markdown 功能（例如 GFM�frontmatter�数学�语法高亮）�以通过�件�用（�� ¶ 使用�件）。英：Nonstandard markdown features (such as GFM, frontmatter, math, syntax highlighting) can be enabled with plugins (see ¶ Using plugins).一些 Markdown 功能在 MDX 中�起作用：英：Some markdown features don’t work in MDX:缩进代�在 MDX 中�起作用：英：Indented code does not work in MDX:MDX console.log(1) // this is a paragraph in MDX!

这样�的�因是这样你�以很好地缩进你的组件：英：The reason for that is so you can nicely indent your components:MDX

# Hello!

自动链�在 MDX 中�起作用。�因是它们� JSX 无法区分（例如：），而我们更喜欢�确的。如�你需�链�，请使用完整链�：[descriptive text](https://and-the-link-here.com)英：Autolinks do not work in MDX. The reason is that they can be indistinguishable from JSX (for example: ) and we prefer being explicit. If you want links, use full links: [descriptive text](https://and-the-link-here.com)HTML 语法在 MDX 中�起作用，因为它已被 JSX（ 到 ）�代。你�以使用大括�中的 JavaScript 注释�代替 HTML 注释：{/* comment! */}英：HTML syntax doesn’t work in MDX as it’s replaced by JSX ( to ). Instead of HTML comments, you can use JavaScript comments in braces: {/* comment! */}未转义的左尖括�/�� (<) 和左大括� ({) 必须转义：<或{（或使用表达�：<�{`）英：Unescaped left angle bracket / less than (<) and left curly brace (\{) have to be escaped: Hello, Venus!

Hello, Mars!

...到 JSX（或 MDX），如下所示：英：…to JSX (or MDX) like this:MDX

JSX 适�组件。它使��的事情�得更加清晰，并�许关注点分离。MDX 支� JSX 语法。下�的内容看起�很� HTML：英：JSX is good for components. It makes repeating things more clear and allows for separation of concerns. MDX supports JSX syntax. The following looks a lot like HTML:MDX

Heading!

HTML is a lovely language.

And here is *markdown* in **JSX**!

但正如���到的，你也�以使用组件。请注�，必须定义组件。你�以导入它们�在本地定义它们或��传递它们（�� § 使用 MDX）：英：But as previously mentioned you can use components too. Note that components must be defined. You can import them, define them locally, or pass them in later (see § Using MDX):MDX

You can also use objects with components, such as the `thisOne` component on

the `myComponents` object:

open

x={1}

label={'this is a string, *not* markdown!'}

icon={}

/>

有一些边缘情况 MDX � JSX 的��之处。英：There are a few edge cases where MDX differs from JSX.表达�英：ExpressionsMDX 还支�大括�内的 JavaScript 表达�：英：MDX also supports JavaScript expressions inside curly braces:MDXTwo � is: {Math.PI * 2}

表达��以包�整个 JavaScript 程�，��它们（�装在）计算结�为�渲染内容的表达�中��。你�以�这样使用 IIFE：英：Expressions can contain whole JavaScript programs as long as they’re (wrapped in) an expression that evaluates to something that can be rendered. You can use an IIFE like so:MDX

{(function () {

const guess = Math.random()

if (guess > 0.66) {

return Look at us.

}

if (guess > 0.33) {

return Who would have guessed?!

}

return Not me.

}

)()}

表达��以为空或仅包�注释：英：Expressions can be empty or contain just a comment:ESMMDX 还支� JavaScript 中的 import 和 export 语�。这些 ESM 功能�以在 MDX 中使用�定义事物：英：MDX supports import and export statements from JavaScript as well. These ESM features can be used within MDX to define things:MDXimport {External} from './some/place.js'

export const Local = properties =>

An external component and a local one.

ESM 也�用��组件（数�）：英：ESM can also be used for non-components (data):MDXimport {Chart} from './chart.js'

import population from './population.js'

export const pi = 3.14

交织英：Interleaving如�文本和标签���一行，则�以在 JSX 中使用 markdown“内��，但�能使用“��：英：You can use markdown “inlines� but not “blocks� inside JSX if the text and tags are on the same line:MDX

# this is not a heading but *this* is emphasis

一行上的文本和标签�会生��，因此它们也�会生�

。在��的线路上，他们这样�：英：Text and tags on one line don’t produce blocks so they don’t produce

s either. On separate lines, they do:MDX

This is a `p`.

我们使用这个规则�区分（�一�线或��线）。�基� HTML 中元素的语义。所以你�以�建�正确的 HTML（你�应该这样�）：英：We differentiate using this rule (same line or not). Not based on semantics of elements in HTML. So you can build incorrect HTML (which you shouldn’t):MDX

Don’t do this: it’s a `p` in an `h1`

Do this: an `h1` with `code`

如�文本和标签���一行，但相应的标签����行，则无法�行“��：英：It’s not possible to wrap “blocks� if text and tags are on the same line but the corresponding tags are on different lines:MDXWelcome!

This is home of...

# The Falcons!

这是因为�解� markdown，我们首先必须将其分为“��。所以在这�情况下有两个段�和一个标题。在第一段中留下一个开始 a 标签，并在标题中留下一个�散的结� a 标签。英：That’s because to parse markdown, we first have to divide it into “blocks�. So in this case two paragraphs and a heading. Leaving an opening a tag in the first paragraph and a stray closing a tag in the heading.进一步阅读英：Further reading如�你想在项目中使用 MDX，请�阅 § 入门英：If you want to use MDX in your project, see § Getting started如�你在使用该格�时�到错误，请�阅 § MDX 故障�除英：If you’re getting errors when working with the format, see § Troubleshooting MDX下一章：入门MDX 中文网 - 粤ICP备13048890�Skip to contentMDX开�文档什么是 MDX？入门使用 MDX扩展 MDXMDX 故障�除学习指�GitHub �格的 Markdown (GFM)Frontmatter数学语法高亮嵌入MDX 按需注入组件软件包@mdx-js/esbuild@mdx-js/loader@mdx-js/mdx@mdx-js/node-loader@mdx-js/preact@mdx-js/react@mdx-js/rollup@mdx-js/vueremark-mdx组件列表当�版本 v

浅谈MDX数据库 - 知乎

浅谈MDX数据库 - 知乎切换模式写文章登录/注册浅谈MDX数据库微策略中国​已认证账号MDX是”MultiDimensional eXpression”的缩写，这是一种类似于SQL的数据库查询语言。这种查询语言专门用于OLAP (Online analytical processing，在线分析处理)数据，这些数据是存储于OLAP Cube（在线分析处理数据块）中。1. MDX的历史MDX由微软于1997年作为ODBO规范的一部分最先提出。Microsoft Analysis Services（微软分析服务）随后基于这个规范发布了“Microsoft OLAP Services 7.0”。微软又于1999年正式发布了该规范。MDX仅仅只是一个微软的规范，并不是一个开放的标准。但是这个规范正在被越来越多的OLAP服务提供商所采用。这正是MDX生命力顽强的体现。2. MDX数据库MDX标准几乎被所有的大型数据库软件提供商所采用。微软有SSAS（Microsoft SQL Server Analysis Services），甲骨文有Essbase，SAP有SAP BW，IBM有TM1，除此之外还有各种各样的OLAP服务提供商的商用软件支持该标准。详情见表格：3. MDX获取数据MDX规范里定义了两种获取数据的方式：XMLA和OLE DB for OLAP。3.1 XMLAXMLA是“XML for Analysis”的缩写。这是一个企业级标准，用于获取分析系统（例如OLAP）的数据。XMLA支持两种SOAP方法：Execute和Discover。其中：Execute用于执行MDX语句，返回的结果是多维数据的结构和对应的格式化结果Discover用于获取OLAP数据块的结构数据，例如：目录（Catalog），数据块（Cube），维度（Dimension），属性（Properties）等。在XMLA标准中，MDX语句被放在标签中，例如：

SELECT Measures.MEMBERS ON COLUMNS FROM Sales

FoodMart

Multidimensional

TupleFormat

3.2 OLE DB for OLAPOLE DB for OLAP 是“Object Linking and Embedding Database for Online Analytical Processing abbreviated ODBO”的缩写。这是由微软发布的、用于处理多维数据的企业级标准。其中ODBO是一个在Windows平台用于客户端和OLAP服务器交互的标准API，而且ODBO拓展了OLE DB访问OLAP数据能力。如果用户需要通过OLE DB for OLAP访问支持MDX的数据库，那么MDX的数据库必须提供Windows版本的客户端API库，同时用户必须有一定的编程基础才能正确地拿到数据。4. MDX语句一条基本的MDX语句样例如下：with member [Measures].[DoubleAmount] as '[Measures].[Amount] * 2'

select [Account].[Accounts].Levels(1).AllMembers on columns,

{[Measures].[Amount], [Measures].[DoubleAmount]} on rows

from [Finance]

where ([Date].[Calendar Year].&[2001])“with” 语句部分；样例中的第1行。该语句用于获取数据前的预处理。在预处理的过程中，我们可以定义各种各样的计算，这些计算包括可命名集合和计算成员。在本样例中，我们定义的是计算成员。通过分析这个MDX语句样例，我们可以看出MDX语句有以下几个部分：“select” 语句部分；样例中的第2，3行。该语句用于选择可获取的数据。“from” 语句部分；样例中的第4行。该语句用来定义我们从哪个数据块获取数据。“where” 语句部分；样例中的第5行。该语句用来切割数据块，并合计数据。在这4个部分中，我们都有很大的自由度，可以根据自己的需求写出很复杂的MDX语句以获得相应的数据。5. 可以访问MDX数据的客户端5.1 使用Firefox获取MDX数据对于支持XMLA标准的MDX数据库，我们可以使用Firefox的开发者工具来访问。具体的步骤如下：打开Firefox浏览器打开开发者工具：访问XMLA对应的网址，类似于：http://OLAP-Datasource-Address/OLAP/MSMDPUMP.DLL .在开发者工具中会有一条访问失败的记录：右键点击失败记录，选择“Edit and Resend”按钮：修改“New Request”的方法为“POST”，同时把基于XMLA规范创建的请求放到“Request Body”里面：点击“Send”即可在标准的XMLA规范里，我们需要把用于登录验证的信息放到Request Header里面，而且验证信息需要加密。5.2 使用Excel获取MDX数据另外我们还可以通过Excel来访问大部分的MDX数据库。具体的步骤如下打开新版本的Excel，小编使用的是Excel 2017换到Data那一页，点击“Get Data”下拉框如果是MSAS，就选择”From Database”里面的“From Analysis Services”选项填写对应的登录信息，然后点击下一步选择对应的数据块或者表格，然后点击结束在Excel的右边区域会出现一个可编辑的对话框，我们可以在对话框里进行操作结果会显示在Excel的空白区域Excel相对来说，操作起来比较简单，使用也比较方便；但是Excel在筛选方面限制比较大，不能自由筛选数据。6. 微策略对MDX数据库的支持微策略从03年就开始支持MDX数据库，到MicroStrategy 2019我们已经直接支持了以下MDX数据库：基于这些MDX数据库，微策略提供了灵活的数据探索方式和高度自由化的操作选择。在微策略的产品中，我们只需要简单三步，就能创建出高可读性的报表。创建MDX数据库连接：导入MDX数据块：创建可视化报表：我们一直致力于支持更多的MDX数据库，并提供可靠、快速的服务。更多信息请咨询微策略MDX团队。7. 总结本文章简要讲述了MDX的历史背景、MDX语句的介绍、MDX数据获取方式以及微策略对于MDX数据库支持。微策略对于MDX数据库的支持有悠久的历史，我们相信微策略能够给客户提供关于MDX专业全面的解决方案。参考资料：https://en.wikipedia.org/wiki/MultiDimensional_eXpressionhttps://en.wikipedia.org/wiki/XML_for_Analysishttps://en.wikipedia.org/wiki/OLE_DB_for_OLAPhttps://en.wikipedia.org/wiki/Comparison_of_OLAP_serversKey Concepts in MDX (Analysis Services)我们会每周推送商业智能、数据分析资讯、技术干货和程序员日常生活，欢迎关注我们的知乎公众号“微策略中国”或微信公众号“微策略 商业智能"。发布于 2019-12-02 16:12Microsoft SQL Server数据库数据库技术​赞同 11​​添加评论​分享​喜欢​收藏​申请

MDX 是什么？ | MDX中文文档 | MDX中文网

是什么？ | MDX中文文档 | MDX中文网Skip to navigation中文文档 / MDX 是什么？5-7 minutes readBy John Otander, Titus WormerMDX 是什么？本文解释了 MDX 格式是什么。 它展示了如何让 markdown、JSX、JavaScript 表达式以及 ESM 中 import 和 export 语句在 MDX 中和平共处。 参见 § 入门 章节以了解如何将 MDX 集成进你的 项目中。目录PrerequisitesMarkdown for the component eraMDX syntaxMarkdownJSXExpressionsESMInterleavingFurther reading预备知识To write and enjoy MDX, you should be familiar with both markdown (see this cheat sheet and tutorial for help) and JavaScript (specifically JSX).组件时代的 markdownMDX 赋予你在 markdown 内容当中使用 JSX 的能力。 你可以导入（import）如见，例如交互式图标或警告框，并将它们嵌入 到你所书写的内容当中。 这让利用组件来编写较长的内容成为了一场革命。 实际上，MDX 可以看作是一种融合了 markdown 和 JSX 的格式，就像下面这个示例：MDX# Hello, world!

> Some notable things in a block quote!

标题和块引用是 markdown 格式，而那些 类似 HTML 标签 的是 JSX 格式。 对于诸如强调或标题之类的常见内容，markdown 通常感觉比 HTML 或 JSX 在书写上更自然 更自然。 JSX 是对 JavaScript 的扩展，它 看起来 像 HTML，但是更便于 使用组件（或可重用的东西）。这个实例在 <div> 上使用了 className 属性。 这是因为它是为 React 编写的，并且 React 要求将 class 书写为 className 形式。 其他框架，例如 Vue 和 Preact，则接受 class 形式。 因此，请注意 JSX 在书写上的这些不同， 因为这取决于所用的工具。MDX 还支持 JavaScript 中的一些功能： 花括号中可以使用表达式 （{1 + 1}） ，以及对 ESM （import 和 export） 标准的支持。MDX 语法Note: You don’t have to use this syntax with @mdx-js/* packages. Or use it always. If you’re using a bundler integration you can change between MDX and markdown through the file extension (.mdx vs. .md). Alternatively, options.format can be used.MDX 的语法融合了 markdown 和 JSX。 This gives us something along the lines of literate programming. It also gives us an odd mix of two languages: markdown is whitespace sensitive and forgiving (what you type may not exactly work but it won’t crash) whereas JavaScript is whitespace insensitive and unforgiving (it does crash on typos).Weirdly enough we quite like how they combine!MarkdownMarkdown often feels more natural to type than HTML or JSX for common things like emphasis or headings. Markdown typically looks more like what’s intended and is terser. Instead of the following HTML:HTML

A blockquote with some emphasis.

You can write the equivalent in markdown (or MDX) like so:Markdown> A blockquote with *some* emphasis.

MDX supports standard markdown by default (CommonMark):Markdown# Heading (rank 1)

## Heading 2

### 3

#### 4

##### 5

###### 6

> Block quote

* Unordered

* List

1. Ordered

2. List

A paragraph, introducing a thematic break:

---

```js

some.code()

```

a [link](https://example.com), an ![image](./image.png), some *emphasis*,

something **strong**, and finally a little `code()`.

Nonstandard markdown features (such as GFM, frontmatter, math, syntax highlighting) can be enabled with plugins (see ¶ Using plugins).Some markdown features don’t work in MDX:Indented code does not work in MDX:MDX console.log(1) // this is a paragraph in MDX!

The reason for that is so you can nicely indent your components:MDX

# Hello!

Autolinks do not work in MDX. The reason is that they can be indistinguishable from JSX (for example: ) and we prefer being explicit. If you want links, use full links: [descriptive text](https://and-the-link-here.com)HTML syntax doesn’t work in MDX as it’s replaced by JSX ( to ). Instead of HTML comments, you can use JavaScript comments in braces: {/* comment! */}Unescaped left angle bracket / less than (<) and left curly brace ({) have to be escaped: \< or \{ (or use expressions: {'<'}, {'{'})More on how MDX differs from markdown is documented here.JSXJSX is an extension to JavaScript that looks like HTML but makes it convenient to use components (reusable things). JSX is typically combined with a frontend framework like React, Preact, or Vue. These frameworks add support for components, which let you change repeating things like the following markup:HTML

Hello, Venus!

Hello, Mars!

…to JSX (or MDX) like this:MDX

JSX is good for components. It makes repeating things more clear and allows for separation of concerns. MDX supports JSX syntax. The following looks a lot like HTML:MDX

Heading!

HTML is a lovely language.

And here is *markdown* in **JSX**!

But as previously mentioned you can use components too. Note that components must be defined. You can import them, define them locally, or pass them in later (see § Using MDX):MDX

You can also use objects with components, such as the `thisOne` component on

the `myComponents` object:

open

x={1}

label={'this is a string, *not* markdown!'}

icon={}

/>

There are a few edge cases where MDX differs from JSX.ExpressionsMDX also supports JavaScript expressions inside curly braces:MDXTwo is: {Math.PI * 2}

Expressions can contain whole JavaScript programs as long as they’re (wrapped in) an expression that evaluates to something that can be rendered. You can use an IIFE like so:MDX{(function () {

const guess = Math.random()

if (guess > 0.66) {

return Look at us.

}

if (guess > 0.33) {

return Who would have guessed?!

}

return Not me.

})()}

Expressions can be empty or contain just a comment:MDX{/* A comment! */}

ESMMDX supports import and export statements from JavaScript as well. These ESM features can be used within MDX to define things:MDXimport {External} from './some/place.js'

export const Local = props =>

An external component and a local one.

ESM can also be used for non-components (data):MDXimport {Chart} from './chart.js'

import population from './population.js'

export const pi = 3.14

InterleavingYou can use markdown “inlines” but not “blocks” inside JSX if the text and tags are on the same line:MDX

# this is not a heading but *this* is emphasis

Text and tags on one line don’t produce blocks so they don’t produce

s either. On separate lines, they do:MDX

This is a `p`.

We differentiate using this rule (same line or not). Not based on semantics of elements in HTML. So you can build incorrect HTML (which you shouldn’t):MDX

Don’t do this: it’s a `p` in an `h1`

Do this: an `h1` with `code`

It’s not possible to wrap “blocks” if text and tags are on the same line but the corresponding tags are on different lines:MDXWelcome!

This is home of...

# The Falcons!

That’s because to parse markdown, we first have to divide it into “blocks”. So in this case two paragraphs and a heading. Leaving an opening a tag in the first paragraph and a stray closing a tag in the heading.Further readingIf you want to use MDX in your project, see § Getting startedIf you’re getting errors when working with the format, see § Troubleshooting MDX下一页：入门Found a typo? Other suggestions?Edit this page on GitHubPublished on August 11, 2018Modified on January 6, 2023MDX is made with ❤️ in Boise, Amsterdam, and around the This site does not track you.MIT © 2017-2024冀ICP备14002930号-9Project on GitHubSite on GitHubUpdates on TwitterUpdates as RSS feedSponsor on OpenCollective友链BootstrapTailwind CSSReactStyleXNext.jsDocusaurusnpmYarnpnpmBabelWebpackRollupParcelesbuildSvelteAlpine.jsMarkdownSassWebAssemblyPrettierDenoKoaLodashStrapiAxiosNunjucksPugMobXReduxJSDocSkip to content中文文档MDX 是什么？入门Using MDXExtending MDXTroubleshooting MDX使用指南GitHub flavored markdown (GFM)FrontmatterMathSyntax highlightingEmbedMDX on demand核心软件包@mdx-js/esbuild@mdx-js/loader@mdx-js/mdx@mdx-js/node-loader@mdx-js/preact@mdx-js/react@mdx-js/registerremark-mdx@mdx-js/rollup@mdx-js/vue组件在线练习场社区SupportContributeSponsorAboutProjects博客英文官网GitHubTwitterOpenCollect

入门 | MDX 中文网

MDX 中文网Skip to navigation入门英：Getting started本文介绍如何将 MDX 集成到你的项目中。它展示了如何将 MDX 与你选择的打包器和 JSX 运行时结合使用。 要了解 MDX 格式的工作原理，我们建议你从 § 什么是 MDX 开始。当你完成设置并准备好使用 MDX 时，请参阅 § 使用 MDX。英：This article explains how to integrate MDX into your project. It shows how to use MDX with your bundler and JSX runtime of choice. To understand how the MDX format works, we recommend that you start with § What is MDX. See § Using MDX when you’re all set up and ready to use MDX.内容英：Contents先决条件英：Prerequisites快速开始英：Quick start打包器英：BundlerJSX编辑英：Editor类型英：Types安全英：Security集成英：Integrations打包者英：Bundlers构建系统英：Build systems编译器英：Compilers站点生成器英：Site generatorsJSX 运行时英：JSX runtimesJavaScript 引擎英：JavaScript engines进一步阅读英：Further reading先决条件英：PrerequisitesMDX 依赖于 JSX，因此你的项目也需要支持 JSX。任何 JSX 运行时（React、Preact、Vue 等）都可以。请注意，我们确实为你将 JSX 编译为 JavaScript，因此你无需进行设置。英：MDX relies on JSX, so it’s required that your project supports JSX as well. Any JSX runtime (React, Preact, Vue, etc.) will do. Note that we do compile JSX to JavaScript for you so you don’t have to set that up.所有 @mdx-js/* 包都是用现代 JavaScript 编写的。需要 Node.js 版本 16.0 或更高版本才能使用它们。我们的包也是 仅限 ESM，所以它们必须是 import，而不是 required。英：All @mdx-js/* packages are written in modern JavaScript. A Node.js version of 16.0 or later is needed to use them. Our packages are also ESM only, so they have to be imported instead of required.注意：使用 Rust 而不是 Node.js？尝试 mdxjs-rs！英：Note: Using Rust instead of Node.js? Try mdxjs-rs!快速开始英：Quick start打包器英：BundlerMDX 是一种编译为 JavaScript 的语言。（我们还将常规 Markdown 编译为 JavaScript。）最简单的入门方法是使用打包器的集成（如果你有的话）：英：MDX is a language that’s compiled to JavaScript. (We also compile regular markdown to JavaScript.) The easiest way to get started is to use an integration for your bundler if you have one:如果你使用 esbuild，请安装并配置 @mdx-js/esbuild英：if you use esbuild, install and configure @mdx-js/esbuild如果你使用 Rollup（或 Vite），请安装并配置 @mdx-js/rollup英：if you use Rollup (or Vite), install and configure @mdx-js/rollup如果你使用 webpack（或 Next.js），请安装并配置 @mdx-js/loader英：if you use webpack (or Next.js), install and configure @mdx-js/loader你还可以在没有打包程序的情况下使用 MDX：英：You can also use MDX without bundlers:你可以使用 @mdx-js/node-loader 在 Node.js 中导入 MDX 文件英：you can import MDX files in Node.js with @mdx-js/node-loader你可以使用我们的核心编译器 @mdx-js/mdx 来编译 MDX 文件英：you can use our core compiler @mdx-js/mdx to compile MDX files你可以使用我们的核心编译器 @mdx-js/mdx 到 evaluate（编译并运行）MDX 文件英：you can use our core compiler @mdx-js/mdx to evaluate (compile and run) MDX files有关这些工具的更多信息，请参阅其专用部分：¶ Next.js、¶ Node.js、¶ Rollup、¶ Vite、¶ esbuild 和 ¶ Webpack。英：For more info on these tools, see their dedicated sections: ¶ Next.js, ¶ Node.js, ¶ Rollup, ¶ Vite, ¶ esbuild, and ¶ webpack.JSX现在你已经设置了集成或 @mdx-js/mdx 本身，是时候配置 JSX 运行时了。英：Now you’ve set up an integration or @mdx-js/mdx itself, it’s time to configure your JSX runtime.如果你使用 React，这是默认的；可选择安装和配置 @mdx-js/react英：if you use React, that’s the default; optionally install and configure @mdx-js/react如果使用 Preact，请将 jsxImportSource 于 ProcessorOptions 设置为 'preact'；可选择安装和配置 @mdx-js/preact英：if you use Preact, set jsxImportSource in ProcessorOptions to 'preact'; optionally install and configure @mdx-js/preact如果你使用 Svelte，请安装 svelte-jsx，并将 jsxImportSource 于 ProcessorOptions 设置为 'svelte-jsx'英：if you use Svelte, install svelte-jsx, and set jsxImportSource in ProcessorOptions to 'svelte-jsx'如果使用 Vue，请将 jsxImportSource 于 ProcessorOptions 设置为 'vue'；可选择安装和配置 @mdx-js/vue英：if you use Vue, set jsxImportSource in ProcessorOptions to 'vue'; optionally install and configure @mdx-js/vue如果使用 Solid，请将 jsxImportSource 于 ProcessorOptions 设置为 'solid-js/h'英：if you use Solid, set jsxImportSource in ProcessorOptions to 'solid-js/h'如果你使用 Emotion，请将 jsxImportSource 于 ProcessorOptions 设置为 '@emotion/react'英：if you use Emotion, set jsxImportSource in ProcessorOptions to '@emotion/react'如果你使用主题 UI，请安装并配置 @mdx-js/react，然后将 MDX 内容封装在 中英：if you use Theme UI, install and configure @mdx-js/react, then wrap your MDX content in a 通过设置 jsxImportSource 于 ProcessorOptions 支持其他 JSX 运行时。英：Other JSX runtimes are supported by setting jsxImportSource in ProcessorOptions.有关这些工具的更多信息，请参阅其专用部分：¶ Emotion、¶ Preact、¶ React、¶ Solid、¶ Svelte、¶ 主题用户界面 和 ¶ Vue。英：For more info on these tools, see their dedicated sections: ¶ Emotion, ¶ Preact, ¶ React, ¶ Solid, ¶ Svelte, ¶ Theme UI, and ¶ Vue.编辑英：Editor你可以通过向编辑器添加对 MDX 的支持来增强使用 MDX 的体验：英：You can enhance the experience of using MDX by adding support of it to your editor:如果你使用 VS Code，请尝试 mdx-js/vscode-mdx英：if you use VS Code, try mdx-js/vscode-mdx如果你使用 Vim，请尝试 jxnblk/vim-mdx-js英：if you use Vim, try jxnblk/vim-mdx-js如果你使用 Sublime Text，请尝试 jonsuh/mdx-sublime英：if you use Sublime Text, try jonsuh/mdx-sublime如果你使用 JetBrains IntelliJ/WebStorm，请尝试 JetBrains/mdx-intellij-plugin英：if you use JetBrains IntelliJ/WebStorm, try JetBrains/mdx-intellij-plugin为我们的 VS Code 扩展提供支持并用于高亮 GitHub 上的代码块的语法高亮保留在 wooorm/markdown-tm-language。英：The syntax highlighting that powers our VS Code extension and that is used to highlight code blocks on GitHub is maintained at wooorm/markdown-tm-language.类型英：TypesExpand example of typed importsFirst install the package:Shellnpm install @types/mdx

…TypeScript should automatically pick it up:example.jsimport Post from './post.mdx' // `Post` is now typed.

我们的包上打有 TypeScript。为了使类型起作用，必须键入 JSX 命名空间。这是通过安装和使用框架类型来完成的，例如 @types/react。英：Our packages are typed with TypeScript. For types to work, the JSX namespace must be typed. This is done by installing and using the types of your framework, such as @types/react.要启用导入的 .mdx、.md 等类型，请安装并使用 @types/mdx。该包还导出几个有用的类型，例如代表 components 属性的 MDXComponents。你可以像这样导入它们：英：To enable types for imported .mdx, .md, etc., install and use @types/mdx. This package also exports several useful types, such as MDXComponents which represents the components prop. You can import them like so:example.tsimport type {MDXComponents} from 'mdx/types.js'

安全英：SecurityMDX 是一种编程语言。如果你信任你的作者，那很好。如果不这样做，那就不安全。英：MDX is a programming language. If you trust your authors, that’s fine. If you don’t, it’s unsafe.不要让互联网上的随机人员编写 MDX。如果你这样做，你可能想考虑将