Como usar o markdown no desenvolvimento da Web

Sep 11, 2025
Como

Como desenvolvedores da Web e criadores de conteúdo, geralmente gastamos muito tempo escrevendo texto que esteja envolvido por dentro Html. código. E se disséssemos a você que há uma maneira melhor de fazer isso com markdown? Uma maneira pela qual você foi capaz de se concentrar na escrita e não no código?

Markdown é um texto simples, a linguagem de marcação leve desenvolvida em 2004 por John Gruber e Aaron Swartz. Originalmente criado para escrevendo o XHTML / HTML mais fácil, converter arquivos de texto simples em HTML ou XHTML estruturalmente válidos, a marcação pode ser usada para quase qualquer tipo de escrita: manuscritos, tutoriais, notas, conteúdo da web e muito mais.

Embora relativamente simples, a marcação pode ser um pouco intimidante quando você começa pela primeira vez. Mas uma vez que você obtenha o jeito, você perceberá rapidamente quanto tempo foi gasto formatando seu código em vez de digitar seu conteúdo.

01. Escolha um editor de markdown

Quando você está trabalhando com marcação para a Web, é importante entender a sintaxe básica e as limitações que você pode enfrentar. Antes de começar, você precisa de algum tipo de editor e intérprete para o seu site. Como alternativa, você pode converter a marcação antes de publicar.

You'll need some kind of editor to get started

Você precisará de algum tipo de editor para começar

Existem vários editores da qual você pode escolher. Byword é incrível porque oferece uma ampla gama de opções de exportação, incluindo HTML e PDF. Outra grande alternativa é Stackedit - Um editor de marcação on-line gratuito. Claro, qualquer editor de texto simples funcionará.

Jetpack is handy for use with WordPress

Jetpack é útil para uso com WordPress

Se você não planeja converter seu markdown para HTML, você pode obter um plugin (ou interruptor) para o seu site. Para o WordPress, Mochila a jato Tem excelente suporte para marcação, que permite que você use a marcação diretamente dentro de posts e comentários - contanto que você habilite essa opção.

Como qualquer idioma de marcação, a marcação tem sua própria sintaxe. Nota: Há uma série de diferentes sabores ou variedades de marcação. Neste artigo, cobriremos apenas a sintaxe comumente compartilhada.

02. Configurar cabeçalhos

Em HTML, existem seis estilos de título: H1. , H2. , H3. , H4. , H5 e H6. . Para recriar estes no markdown, use uma série de símbolos de hashtag ( Miserável ) - Correspondente ao número do título - seguido pelo texto da posição. Por exemplo, para criar um & lt; h1 & gt; tag, use uma hashtag Miserável ; para um & lt; h2 & gt; tag, use duas hashtags ## ; e assim por diante.

Entrada de marcação: 

 # título 1
## título 2.
### título 3.
#### título 4.
##### título 5.
###### título 6

Saída HTML: 

 & lt; h1 & gt; título 1 & lt; / h1 & gt;
& lt; h2 & gt; título 2 & lt; / h2 & gt;
& lt; h3 & gt; título 3 & lt; / h3 & gt;
& lt; h4 & gt; título 4 & lt; / h4 & gt;
& lt; h5 & gt; título 5 & lt; / h5 & gt;
& lt; h6 & gt; título 6 & lt; / h6 & gt;

03. Marque os parágrafos

Parágrafos são representados pelo & lt; p & gt; tag em html. Na marcação, eles são separados por uma ou mais linhas em branco. Como HTML, o espaço em branco é ignorado. Então, se você adicionar 20 linhas em branco, você ainda terá apenas um parágrafo.

Entrada de marcação: 

 A raposa marrom rápida salta sobre o cão preguiçoso.
O cão preguiçoso não se importa, porque ele é um cão preguiçoso.

Saída HTML: 

 & lt; p & gt; a rápida raposa marrom salta sobre o cão preguiçoso. & Lt; / p & gt;
& lt; p & gt; o cão preguiçoso não se importa, porque ele é um cão preguiçoso. & lt; / p & gt;

04. Estilo a linha quebra

Rupturas de linha, que são representadas em HTML com o & lt; BR & GT; Tag, são adicionados usando uma única quebra de linha, com dois espaços no final da linha anterior.

Entrada de marcação: 

 A raposa marrom rápida
salta sobre o cão preguiçoso.

Saída HTML: 

 & lt; p & gt; a rápida raposa marrom & lt; BR & GT; salta sobre o cão preguiçoso. & Lt; / p & gt;

05. Marque ênfase.

Existem duas maneiras de adicionar ênfase ao seu texto: itálico ( & lt; em & gt; em HTML) ou em negrito ( & lt; forte e gt; em html).

No markdown, você realiza isso usando um ou dois asteriscos ( * ). Você também pode usar sublinhados (_), mas eu fico com asteriscos, porque existem outros sabores de marcação que usam sublinhados para outras coisas.

Entrada de marcação: 

 * texto itálico *
** texto negrito **

Saída HTML: 

 & lt; em & gt; texto itálico & lt; / em & gt;
& lt; forte e gt; texto negrito & lt; / forte & gt;

Nota: Você também pode criar texto em negrito usando três asteriscos: *** texto negrito e itálico *** .

06. Crie regras horizontais

Para criar uma regra horizontal (ou & lt; hr & gt; em HTML), use uma série de três ou mais hífens ( --- ), asteriscos ( Fazer ) ou sinais iguais ( ===. ). É a sua escolha qual você prefere, mas apenas certifique-se de incluir uma linha vazia acima e abaixo.

Entrada de marcação: 

 Aprender algo novo é sempre muito divertido.

---

Com certeza é!

Saída HTML: 

 & lt; P & gt; aprendendo algo novo é sempre muito divertido. & Lt; / p & gt;
& lt; hr & gt;
& lt; p & gt; com certeza é! & lt; / p & gt;

07. Adicionar imagens e links

Em HTML, uma imagem é adicionada usando o & lt; img & gt; tag e links são adicionados usando o & lt; a & gt; marcação.

Na marcação, as imagens começam com um ponto de exclamação ( ! ), seguido por suportes quadrados ( [] ) para o "texto alt", e parênteses ( () ) Para o caminho para a imagem. Você também pode incluir um título opcional dentro das citações duplas ( "" ).

Com links, é quase o mesmo, exceto que não há ponto de exclamação.

Entrada de marcação: 

! [Alt text] (/ caminho / para / image.jpg "título opcional")
[Link Text] (http://example.com "Título opcional")

Nota: Você também pode usar links de referência e imagens, mas isso não é coberto aqui.

Saída HTML: 

 & lt; img src = "/ caminho / para / image.jpg" alt = "alt text" title = "título opcional" / & gt;
& lt; a href = "http://example.com" title = "opcional título" & gt; link text & lt; / a & gt;

08. Faça listas

Existem dois tipos de listas em HTML: encomendados ( & lt; ol & gt; ) e não ordenados ( & lt; ul & gt; ). Com marcação, use números para listas ordenadas e asteriscos ( * ) ou hífens ( - ) para listas não ordenadas.

Entrada de marcação: 

 1. Item 1
2. Item 2.
* Primeiro item
* Segundo item
- primeiro item
- Segundo item

Saída HTML: 

 & lt; ol & gt;
& lt; li & gt; item 1 & lt; / li & gt;
& lt; li & gt; item 2 & lt; / li & gt;
& lt; / ol & gt;
& lt; ul & gt;
& lt; li & gt; primeiro item & lt; / li & gt;
& lt; li & gt; segundo item & lt; / li & gt;
& lt; / ul & gt;
& lt; ul & gt;
& lt; li & gt; primeiro item & lt; / li & gt;
& lt; li & gt; segundo item & lt; / li & gt;
& lt; / ul & gt;

09. Adicionar código em linha e blocos de código

Quando você está trabalhando com código em HTML, você pode incluí-lo como um elemento inline usando o & lt; código & gt; Tag; ou como um bloco de texto pré-formatado usando o & lt; pré e gt; e lt; código & gt; combinação.

Na marcação, esses elementos são delimitados usando um único backtick em cada lado ( ` ); ou usando um estilo cercado, que inclui três backpticks acima e abaixo do bloco de código ( `` `. ).

Entrada de marcação: 

 A variável 'NumberOfPoints' segura a pontuação do jogador.
se jogador.wins {
NúmeroOfpoint + = 1
}

Saída HTML: 

 The & Lt; Código & GT; NumberOfPoints & Lt; / Código & GT; variável detém a pontuação do jogador.
& lt; pré e gt; e lt; código & gt;
se jogador.wins {
NúmeroOfpoint + = 1
}
& lt; / pré e gt; & lt; / código & gt;

10. Estilo Up BlockQuotes

Blockquotes são adicionados em HTML usando o & lt; blockquote & gt; marcação. Em marcação, use o maior que o símbolo ( & gt; ) antes da linha.

Entrada de marcação: 

 & gt; Este é meu blockquote.
& gt;
& gt; Isso faz parte do mesmo blockquote.
& gt; Este é um novo blockquote.

Saída HTML: 

 & lt; blockquote & gt;
& lt; P & gt; este é o meu blockquote. & lt; / p & gt;
& lt; BR & GT;
& lt; p & gt; isso faz parte do mesmo blockquote. & lt; / p & gt;
& lt; / blockquote & gt;
& lt; blockquote & gt;
& lt; p & gt; este é um novo blockquote. & lt; / p & gt;
& lt; / blockquote & gt;

11. Incorporar em linha HTML

Há momentos em que você precisa criar um elemento HTML que não seja suportado;Por exemplo, você pode precisar de um & lt; tabela & gt; ou & lt; div & gt; marcação.

Se for esse o caso, você poderá misturar marcação e HTML, mas há algumas restrições.Por exemplo, você não pode incluir marcação nas tags HTML em nível de bloco.

Consulte Mais informação:

  • 20 Módulos do Node.js que você precisa saber
  • 12 perguntas comuns de javascript respondidas
  • 9 dos melhores recursos para aprender HTML e CSS

Como - Artigos mais populares

Use Framer X para construir protótipos interativos

Como Sep 11, 2025

(Crédito da imagem: Framer) Como designers, há sempre a questão de quais ferramentas de prototipagem você deve us..

Como desenhar figuras mais realistas

Como Sep 11, 2025

Neste tutorial de desenho de figura, nos concentraremos no tronco e nos seios, particularmente em como os seios mudam de forma de..

Como criar um efeito de digitação animado

Como Sep 11, 2025

Quando usado bem, Animação CSS. pode adicionar interesse e personalidade ao seu site. Neste artigo, vamos percorrer como criar um efeito animado que ..

Como construir layouts complexos usando CSS

Como Sep 11, 2025

O layout para a web sempre foi limitado, realmente nunca houve algo realmente dedicado a tornar o conteúdo fácil de exibir em u..

Protótipos perfeitos e desenhos de mão com Marvel

Como Sep 11, 2025

Com uma curva de aprendizagem mais curta do que a Invision App e as novas ferramentas de design de design de design para equipes ..

Como criar glazes com aquarela

Como Sep 11, 2025

Para este workshop, eu estarei levando você passo a passo através de uma das minhas pinturas - cobrindo tudo, desde o conceito ..

Como misturar a cor da sombra na pintura

Como Sep 11, 2025

Algumas pessoas encontram mistura para sombras complicadas, muitas vezes tentando misturar uma nova cor. Infelizmente, o resultad..

Como preparar gráficos ilustradores para efeitos após

Como Sep 11, 2025

Eu não posso começar a dizer quantos Adobe Illustrator. arquivos foram passados ​​para mim para animação q..

Categorias