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 headingThis is a list in markdown:- One- Two- Three
Autolink literals
mdwww.example.com, https://example.com, and contact@example.com.
www.example.com, https://example.com, and contact@example.com.
Footnote
mdA 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 |
Tables | Are | Cool |
---|---|---|
col 1 is | left-aligned | $1600 |
col 2 is | centered | $12 |
col 3 is | right-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:
mdTwo 🍰 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:
mdimport { Button } from '@nextui-org/react';<Button>Engrafia Docs</Button>
Or you can import your Playground
component;
- This content is located on the top os the page, but appear hear.↩