Snippets using Docusaurus Components

CloudCannon supports embedding rich Snippets in Markdown content when using the CloudCannon Content Editor. Once configured, Snippets in your content will be presented as blocks in rich text views, with the ability to add them as Snippets via the toolbar:

To start configuring Components in your MDX content, a Snippet configuration must be imported using the _snippets_imports key in your CloudCannon global configuration file.

_snippets_imports:
  mdx: true
  docusaurus_mdx: true

{
  "_snippets_imports": {
    "mdx": true,
    "docusaurus_mdx": true
  }
}

Docusaurus uses both regular MDX components along with custom extensions, so we import both the mdx Snippets and the docusaurus_mdx Snippets. You can find detailed documentation on the base mdx snippets on the Editing with MDX Components page.

Enabling snippets in the toolbar#

By default, CloudCannon will show the snippet toolbar action in the content editor if snippets are available.

Supported extensions#

Admonitions#

With the Admonition snippet you can use Docusaurus admonition syntax to highlight rich content in the Content Editor.

:::note Your Title

Some **content** with _Markdown_ `syntax`.

:::

Code Blocks#

The Code Block snippet allows you to create Docusaurus code blocks with syntax highlighting, titles, and line numbers.

```jsx title="/src/components/HelloCodeTitle.js" showLineNumbers
function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}
```

Content Tabs#

The Content Tabs snippet provides support for adding tab seperated content using the Docusaurus Tabs component. If you're using the Content Tab snippet we recommend registering it to the global scope by wrapping the MDX Component file. You can find documentation on Docusaurus component scope here.

<Tabs>
  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana">
    This is a banana 🍌
  </TabItem>
</Tabs>

Truncate#

The Truncate snippet allows you to mark which content should be included in the blog post summary when using the Docusaurus blog feature.

<!--truncate-->