III Semana de História do campus dos Malês, IHLM/UNILAB
Prof. Eric Brasil
Markdown é uma sintaxe baseada em texto simples para formatação de documentos. Possui muitas opções interessantes para produção de materiais didáticos, apresentações entre outros.
Uma introdução ao Markdown e suas possibilidades no ensino e divulgação científicaÍndiceEmentaA SintaxePq usar Markdown para suas aulas e apresentações?Estrutura básciaCabeçalhosPrimeiro nível de cabeçalhoSegundo nível de cabeçalhoTerceiro nível de cabeçalhoQuarto nível de cabeçalhoParágrafos e Quebras de linhaÊnfasesBlocos de citaçãoTabelasLinhas horizontaisImagens e gifsLinksCódigosListasHTMLEditores de markdownApps On-lineAvançadoExportando e colocando online.Slides, blogs e livrosPDF e artigos científicosDeployContatosAgradecimentos
O que é a sintaxe Markdown. Estrutura básica: cabeçalhos, parágrafos, tabelas, imagens, gifs, links, códigos, listas, html. Editores de markdown. "Sabores" e temas. Exportando e colocando online.
Esse minicurso é inspirado e utiliza como base a lição Introdução ao Markdown, de Sarah Simpkin, publicada no ProgrammingHistorian e traduzida para o português por João Gilberto Saraiva
Vamos começar!
A sintaxe Markdown foi criada em 2004 e é um modo de formatar arquivos de textos simples, utilizando algumas marcações com símbolos como #
, *
, []()
etc.
Esses arquivos são salvos com a extensão .md
e podem ser abertos com editores de texto simples, como Gedit, Notepad, etc. Assim, podem ser abertos em diferentes sistemas operacionais.
Além disso, muitas plataformas de publicação e sites aceitam arquivos arquivos .md
, muitas vezes renderizando o arquivo automaticamente para HTML.
Atualmente, existem inúmeros programas gratuitos e de código aberto para edição de Markdown, possibiltando a configuração de muitos recursos, temas (ou "flavours") e opções de exportação (seja em html, pdf, doc, etc).
Vamos agora entender a estrutura básica de um arquivo em .md
.
# Primeiro nível de cabeçalho
## Segundo nível de cabeçalho
### Terceiro nível de cabeçalho
#### Quarto nível de cabeçalho
Renderiza como:
Os parágrafos devem ser separados por uma linha vazia.
Por exemplo:
xVamos aprender markdown?
Para separar parágrafos precisamos inserir um linha em branco para criar um parágrafo.
Isso renderiza assim:
Vamos aprender markdown?
Para separar parágrafos precisamos inserir um linha em branco para criar um parágrafo.
Para colocar um texto em itálico é só colocá-lo entre *
ou _
e em negrito entre **
ou __
.
xxxxxxxxxx
A _III Semana de História_ do campus dos Malês será um **sucesso**.
A III Semana de História do campus dos Malês será um sucesso.
Para inserir um bloco de destaque para uma citação é só incluir >
no início do parágrafo:
xxxxxxxxxx
>Eu sou uma citação bonita de um texto qualquer.
Eu sou uma citação bonita de um texto qualquer.
É possível inserir tabelas separando as colunas com |
e hífens para demarcar a linha de títulos.
Por exemplo:
xxxxxxxxxx
| Coluna 1 | Coluna 2 | Coluna 3 |
| -------- | --------- | -------- |
| Linha 1, coluna 1 | Linha 1, coluna 2 | Linha 1, coluna 3|
| Linha 2, coluna 1 | Linha 2, coluna 2 | Linha 2, coluna 3|
| Linha 3, coluna 1 | Linha 3, coluna 2 | Linha 3, coluna 3|
Isso é renderizado como:
Coluna 1 | Coluna 2 | Coluna 3 |
---|---|---|
Linha 1, coluna 1 | Linha 1, coluna 2 | Linha 1, coluna 3 |
Linha 2, coluna 1 | Linha 2, coluna 2 | Linha 2, coluna 3 |
Linha 3, coluna 1 | Linha 3, coluna 2 | Linha 3, coluna 3 |
É possível definir o alinhamento da coluna incluíndo :
na linha do cabeçalho:
xxxxxxxxxx
| Alinhado à esquerda | Centralizado | Alinhado à direita |
| :-------- | :-------: | --------: |
| Maçãs | Vermelho | 5000 |
| Bananas | Amarelo| 75 |
Alinhado à esquerda | Centralizado | Alinhado à direita |
---|---|---|
Maçãs | Vermelho | 5000 |
Bananas | Amarelo | 75 |
Para separar seu documento e criar quebra de sessões, é possível inserir linhas horizontais utilizando ---
ou ***
Para inserir imagen basta escrever o seguinte:
xxxxxxxxxx

Imagem com caminho em meu computador:
xxxxxxxxxx

Imagem com url:
xxxxxxxxxx

OBS: Se vc pretende configurar mais elementos de sua imagem, como tamanho, alinhamento, legenda, será preciso utilizar html
. Veremos algumas dicas assim abaixo.
Acrescentar links no documento é bem simples e segue padrão similar à inserção de imagens. Basta colocar o texto entre colchetes e o link entre parênteses na sequência []()
:
[Introdução ao Markdown](https://programminghistorian.org/pt/licoes/introducao-ao-markdown)
Isso renderiza assim:
É possível escrever blocos de código utilizando três acentos graves para abrir e fechar bloco:
xxxxxxxxxx
python
print('Olá, mundo!')
Ou ainda, escrever o código em linha usando um acento grave abrindo e fechando
sudo apt install pandoc
É possível incluir listas ordenadas e não ordenadas
A lista ordenada é criada inserindo -
ou *
no início de cada linha.
xxxxxxxxxx
Lista não ordenada
- ul
- ul
- ul
- ul
Renderiza como:
ul
ul
ul
Listas ordenadas são criadas numerando cada linha e colocando um .
após cada número:
xxxxxxxxxx
Lista ordenada
1. od
2. od
1. od
3. od
4. od
Renderiza como:
Lista ordenada
od
od
od
od
O Markdown possui limitações e ainda não é um formato amplamente aceito no meio acadêmico. Muitos recursos de editores de texto como Word, LibreOffice não estão disponíveis em Markdown.
Entretanto, é possível inserir mais opções utilizando um pouco de html em seu documento.
Ex 1: Tamanho de uma imagem
xxxxxxxxxx
<img src="https://media.giphy.com/media/nVTa8D8zJUc2A/source.gif" alt="seriously" style="zoom:100%;" />
Ex 2: Alinhamento da imagem
Escrever o texto direto num editor de texto simples, sem visualizar o resultado final instantaneamente, pode ser um desafio no início.
Entretanto, exixtem vários editores de markdown que facilitam muito sua vida e ainda possuem vários "sabores" [flavours] ou temas para trabalhar.
RMarkdow e variações:
Reveal.js
.md
e outros elmentos (imagens, gifs, etc). Publicar com GitHub Pages. Se vc publicar o site com o README.md o flavour que será renderizado é o do GitHub. Se vc pretende publicar a página com algum tema específico, vc deve exportar o seu arquivo md para html (usando o Typora, por exemplo). Esse arquivo deve ser nomeado como index.html
seguindo o mesmo padrão usado no Netlify.E-mails
Twitter: @ericbrasiln
Instagram: ericbrasiln
Site pessoal: ericbrasiln.github.io
Github: ericbrasiln
Obrigado pela paciência e participação.
Viva o Sus!