Skip to content

Commit

Permalink
fixup! fix: handle rubber band scrolling in hideable navbar (#5721)
Browse files Browse the repository at this point in the history
  • Loading branch information
cerkiewny committed Oct 27, 2021
1 parent 8235969 commit 7360d50
Showing 1 changed file with 25 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,31 @@ description: Using MDX plugins to expand Docusaurus Markdown functionalities
slug: /markdown-features/plugins
---

The fragment files written in Docusaurus are using the MDX format see [this link](https://mdxjs.com/getting-started/) for more details about MDX. MDX itself can be easily extended with additional capabilities of translating the input text into HTML. Docusaurus content plugins support out of the box both [Remark](https://github.com/remarkjs/remark) and [Rehype](https://github.com/rehypejs/rehype) plugins that work with MDX.
The fragment files written in Docusaurus are using the MDX format see [this link](https://mdxjs.com/getting-started/) for more details. MDX itself can be easily extended with additional capabilities of translating the input into HTML. Docusaurus out of the box supports [Remark](https://github.com/remarkjs/remark) and [Rehype](https://github.com/rehypejs/rehype) plugins providing useful extensions.

However sometimes it is not enough and you might want to use some advanced features as provided in [this extensive list of plugins for remark](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins) or [another one for rehype](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins). The plugins on this list usually provide easier, shorter or more specialized ways of creating the HTML content. There are really useful if you want to for instance: override the defaults in terms of markdown to HTML conversion, add some new checks or support some specialized syntax specific to your content (like mathml support or picturing graphs or sheet music generation).
However sometimes they are not enough and you might want to use some additional transformation features. Some of the use cases are as follows:

- using existing remark plugin ([see official remark plugin list](https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins))
- using existing rehype plugin ([see official rehype plugin list](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins))
- introduce new syntax to your MDX
- change the HTML output for existing MDX syntax

Some examples of introducing new syntax might be:

- mathml support
- graph visualization
- sheet music generation

Changes to HTML output might be useful if you want to:

- add some additional HTML properties
- change the resulting HTML element for Markdown feature

## What are remark and rehype

Remark is a markdown processor used to parse it into the structured tree that can be used programmatically to transform it or compile it into output format. Complete introduction to remark can be found [here](https://github.com/remarkjs/remark).
Remark is a markdown processor used to parse it into the structured tree. It can be later used programmatically to transform it or compile it into output format. Complete introduction to remark can be found [here](https://github.com/remarkjs/remark).

Rehype is a similar suite of plugins working on the HTML files, capable of transforming, minifying, it. Complete introduction to rehype can be found [here](https://github.com/rehypejs/rehype).
Rehype is a similar suite of plugins working on the HTML files, capable of transforming them. Complete introduction to rehype can be found [here](https://github.com/rehypejs/rehype).

## Configuring plugins {#configuring-plugins}

Expand Down Expand Up @@ -87,4 +103,8 @@ See more information in the [MDX documentation](https://mdxjs.com/advanced/plugi

In order to create own plugins follow those instructions for [remark](https://github.com/remarkjs/remark/blob/main/doc/plugins.md#creating-plugins) or [rehype](https://github.com/remarkjs/remark/blob/main/doc/plugins.md#creating-plugins).

You can also take a look at docusaurus own [plugins](https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-mdx-loader/src/remark) as a source of inspiration on how to write them and what are the good usecases.
:::tip

Docusaurus provides its own [plugins](https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-mdx-loader/src/remark) that can be inspiration for your next plugin.

:::

0 comments on commit 7360d50

Please sign in to comment.