Repository files navigation

This repository contains the code to provide editor tooling support forMDX.

• Workspaces
• Use
  • TypeScript
  • Plugins
• Contribute
• Sponsor
• License

This repository contains the following workspaces:

• @mdx-js/language-service provides utilities to integrate MDX intoVolar.
• @mdx-js/language-server provides an MDX language server using theLanguage Server Protocol.
• @mdx-js/typescript-plugin provides aTypeScript plugin to integrateMDX in TypeScript editors.
• vscode-mdx integrates the MDX language server intoVisual Studio Code, but also provides some Visual Studio Code specificfeatures such as syntax highlighting.

MDX doesn’t support TypeScript syntax, but it does supporttypes in JSDoc.

MDX type checking support is similar to JavaScript support.By default, type hints are subtle.To enable strict type checking, you need to specifymdx.checkMdx intsconfig.json:

{"compilerOptions": {// …  },"mdx": {// Enable strict type checking in MDX files."checkMdx":true  }}

TheProps type is a special type which is used to determine the type used forprops.For example:

{/**  *@typedefProps  *@property{string}name  *   Who to greet.*/}#Hello{props.name}

The special typeMDXProvidedComponents is used to determine which componentsareprovided.For example:

{/**  *@typedefMDXProvidedComponents  *@property{typeof import('../components/Planet.js').Planet}Planet*/}<Planetname="Earth" />

You can also define this type externally, and import it into your MDX file.Based on aNext.js example:

// mdx-components.tsimport{Planet}from'./components/Planet.js'constcomponents={  Planet}exporttypeMDXProvidedComponents=typeofcomponentsexportfunctionuseMDXComponents():MDXProvidedComponents{returncomponents}

Then in your MDX file:

{/**  *@import {MDXProvidedComponents} from '../mdx-components.js'*/}<Planetname="Earth" />

Another alternative is to define theMDXProvidedComponents type globally.This way you don’t have to defineMDXProvidedComponents in each MDX file.Based on aNext.js example:

// mdx-components.tsimport{Planet}from'./components/Planet.js'constcomponents={  Planet}declare global{typeMDXProvidedComponents=typeofcomponents}exportfunctionuseMDXComponents():MDXProvidedComponents{returncomponents}

Now you can write the following MDX with full type safety anywhere:

<Planetname="Earth" />

This extension supports remark parser plugins.Plugins can be defined in an array of strings or string / options tuples.These plugins can be defined intsconfig.json and will be resolved relative tothat file.Transformers such asremark-mdx-frontmatter are notsupported yet.Support is tracked in#297.

For example, to supportfrontmatter with YAML and TOML andGFM:

{"compilerOptions": {// …  },"mdx": {"plugins": [      ["remark-frontmatter",        ["toml","yaml"]      ],"remark-gfm"    ]  }}

For a more complete list, seeremark plugins.

See§ Contribute on our site for ways to get started.See§ Support for ways to get help.

This project has acode of conduct.By interacting with this repository, organization, or community you agree toabide by its terms.

See§ Sponsor on our site for how to help financially.

Vercel		Motif		HashiCorp		GitBook		Gatsby
Netlify		Coinbase	ThemeIsle	Expo	Boost Note	Markdown Space	Holloway
		You?

MIT ©JounQin@1stG.me