Code Element

This features provides a convinient way to map a fenced code region to a custom MDX element. In this example, we map cow to rendering element Cow.

./src/theme/Cow/index.tsx

import React from 'react';

export default function Cow(props: { lang: string; meta: object; value: string }) {
  const { value } = props;
  return <pre>cow says: {value}</pre>;
}

So that this code section gets replaced with the MDX code using Dot.

```cow
Boo!
```

http://localhost:3000

cow says: Boo!

Configuration

Add a codeElement section in the rise4fun config and map the lang identifier to the theme MDX element name.

./docusaurus.config.js

const config = configure({ ... }, {
    ...
    codeElement: {
        langs: [
            {
                lang: "cow",
                element: "Cow"
            }
        ]
    },
})