Features Markdown

28 de maio de 2019 · 4 min para ler

Sébastien Lorber

Docusaurus maintainer

Este post serve como referência visual e funcional de todas as features de Markdown/MDX usadas no blog.

Use como guia para escrita e validação de renderização.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Parágrafos

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Novo parágrafo após linha em branco.

Ênfase

Texto em itálico
Texto em negrito
Texto em itálico + negrito
Texto em ~~tachado~~

Citações (Blockquote)

Isto é uma citação.

Pode ter múltiplas linhas.

Negrito, itálico e code funcionam aqui também.

Listas

Lista não ordenada

Item A
Item B
- Subitem B.1
- Subitem B.2
Item C

Lista ordenada

Primeiro
Segundo
Terceiro

Lista de tarefas

Markdown básico
Código
Stepper
Componentes customizados

Links

Link interno: Blog

Link externo: Documentação Docusaurus

Imagens

Imagem de exemplo

Código inline

Use o comando apktool d app.apk para descompilar o APK.

Bloco de código

apktool d app.apk

public class MainActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
  }
}

Bloco de código com título

/src/components/HelloCodeTitle.js
function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}

Bloco de código com highlight

function HighlightSomeText(highlight) {
  if (highlight) {
    return 'This text is highlighted!';
  }

  return 'Nothing highlighted';
}

function HighlightMoreText(highlight) {
  if (highlight) {
    return 'This range is highlighted!';
  }

  return 'Nothing highlighted';
}

Bloco de codigo com highlight via metadata

import React from 'react';

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;

Com numero de linha

import React from 'react';

export default function MyComponent(props) {
  return <div>Foo</div>;
}

export default function MyComponent(props) {
  return <div>Foo</div>;
}

Separador horizontal

HTML Embutido

HTML direto no MDX

Útil para casos pontuais.

Admonitions

observação