MD e MDX

Engrafia uses md, and mdx files to write documentation, and js files to create custom pages, you can also create custom pages with mdx files too.

What is Markdown (MD) file

That is the better definition of a MArkdown file:

*Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages. Using Markdown is different than using a WYSIWYG editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately. Markdown isn’t like that. When you create a Markdown-formatted file, you add Markdown syntax to the text to indicate which words and phrases should look different. For example, to denote a heading, you add a number sign before it (e.g., # Heading One). Or to make a phrase bold, you add two asterisks before and after it (e.g., this text is bold). It may take a while to get used to seeing Markdown syntax in your text, especially if you’re accustomed to WYSIWYG applications. The screenshot below shows a Markdown file displayed in the Visual Studio Code text editor._**

You can see an entire definition, and tutorial in official website Docs

Examples

md
# H1 heading
## H2 heading
This is a list in markdown:
- One
- Two
- Three
md
www.example.com, https://example.com, and contact@example.com.

www.example.com, https://example.com, and contact@example.com.

Footnote

md
A note[^1]
[^1]: This content is located on the top os the page, but appear hear.

A note1

Strikethrough

md
~one~ or ~~two~~ tildes.

~one~ or two tildes.

Table

md
| Tables | Are | Cool |
| -------- | :-----------: | ----: |
| col 1 is | left-aligned | $1600 |
| col 2 is | centered | $12 |
| col 3 is | right-aligned | $1 |
TablesAreCool
col 1 isleft-aligned$1600
col 2 iscentered$12
col 3 isright-aligned$1

Tasklist

md
- [ ] to do
- [x] done
  • to do
  • done

What is a mdx file?

MDX is an authorable format that lets you seamlessly write JSX in your markdown documents. 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.

md
# Hello, world!
<div className="note">> Some notable things in a block quote!</div>

Expressions

MDX also supports JavaScript expressions inside curly braces:

md
Two 🍰 is: {Math.PI \* 2}

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

md
{(function () {
const guess = Math.random()
if (guess > 0.66) {
return <span style={{color: 'tomato'}}>Look at us.</span>
}
if (guess > 0.33) {
return <span style={{color: 'violet'}}>Who would have guessed?!</span>
}
return <span style={{color: 'goldenrod'}}>Not me.</span>
})()}

Those and more examples you can find on official documentation Docs

Writing a pages in MDX

Using Engrafia you will use mdx files to write pages, it means that you can import, and export functions, and modules from a documentation page, for example:

md
import { Button } from '@nextui-org/react';
<Button>Engrafia Docs</Button>

Or you can import your Playground component;


  1. This content is located on the top os the page, but appear hear.