Recursos em Markdown
Neste artigo vamos explorar os recursos disponíveis em markdown para personalizar as suas documentações.
Antes de iniciar
- Instale a extensão
Markdown Snippets for MDX and Docusauruspara o VS Code.
Lista de componentes Markdown
A extensão Markdown Snippets for MDX and Docusaurus auxilia e agiliza todo o processo de criação de conteúdo. Basta digitar !, e uma lista é apresentada:
| Componente | Atalho | Para que serve? |
|---|---|---|
| Admoestação | !admo | Componentes para descrever avisos, dicas, notas, perigos e informações |
| Negrito | !bold | Marcar o texto em negrito |
| Código em linha | !code | Criar um código em linha |
| Bloco de código | !codeblock | Criar um bloco de código |
| Imagem | !image | Criar uma imagem |
| Itálico | !italic | Deixar palavras ou textos em itálico |
| Link | !link | Criar um link para acessar um recurso externo ou âncora |
Exemplos de uso dos componentes
Admoestação
:::note
Admoestação de nota.
:::
:::tip
Admoestação de dica.
:::
:::info
Admoestação de informação.
:::
:::warning
Admoestação de atenção.
:::
:::danger
Admoestação de perigo.
:::
observação
Admoestação de nota.
dica
Admoestação de dica.
informação
Admoestação de informação.
aviso
Admoestação de atenção.
perigo
Admoestação de perigo.
Negrito
**Texto em negrito**
Este é um texto com uma parte em negrito.
Código em linha
`Código em linha`
Este é um texto com um código em linha.
Bloco de código
```jsx title="/src/components/HelloCodeTitle.js"
function HelloCodeTitle(props) {
return <h1>Hello, {props.name}</h1>;
}
```
/src/components/HelloCodeTitle.js
function HelloCodeTitle(props) {
return <h1>Hello, {props.name}</h1>;
}
Imagem
Itálico
*Texto em itálico*
Este é um texto com uma parte em itálico.
Link
[Texto do link](endereço)
Este é um texto com um link para a documentação do Docusaurus.
Recursos adicionais
Existem outros recursos em markdown que podem ser utilizados, abaixo você encontra alguns links com recursos para aprendizado: