Tutorial | Excelente editor Online e Colaborativo de código MarkDown

in #pt2 years ago (edited)

HackMD.io Tutorial Básico

O HackMD, sem dúvida, é um dos melhores editores online de textos no formato markdown. Crie documentos colaborativos ou particulares com facilidade e simplicidade.
(se você ainda não conhece as vantagens, clique aqui)

Aprenda a

  1. Criar um documento
    • Sem login
    • Com login
  2. Definir Permissões de Compartilhamento
  3. Compartilhar Link para Edição
  4. Publicar
  5. Ver exemplos básicos de código e links para documentação avançada
  6. Enviar imagens
  • Método 1 (sem controle)
  • Método 2 (com controle)
  1. Inserir links
  • Link puro
  • Com texto
  1. Inserir comentários internos
  2. Exportar / Fazer Download
    • Exportar em MarkDown
    • Exportar em HTML
    • Expotar HTML puro (sem css, js, etc)
    • Exportar formato ODF
  3. Restaurar um backup automático (Revisão)
  4. Acessar o histórico

Nível

Básico / Iniciante

Tutorial HackMD

1. Criar Documento


a) sem login

Você não precisa estar logado. Basta acessar o site hackmd.io e clicar em "Nova nota como convidado".
nova-nota.png

b) com login

É recomendável fazer o cadastro para ter sempre salvos os seus documentos. Para isso, clique no botão [ENTRAR] e escolha através de qual plataforma fará o seu login.
entrar.png

entrar-metodo.png

Após logar, clique em "+Nova nota" para iniciar seu primeiro documento.
nova-nota-logado.png

2. Definir Permissões de compartilhamento


Antes de iniciar sua edição ou passar o link para alguém, escolha as permissões do arquivo e evite problemas.

Para isso, clique no link que se encontra no canto superior direito e escolha entre:
editar-permissoes.png

  • freely
    Qualquer pessoa com o link pode ver e editar.
  • editable
    Precisa logar no HackMD para editar.
  • limited
    Precisa logar no HackMD para editar. Para visualizar, precisa estar logado.
  • locked
    Somente o dono pode editar, mas outros podem visualizar com o link.
  • protected
    Somente o dono pode editar. Para visualizar, precisa estar logado, não basta o link.
  • private
    Somente o criador do texto pode editar e visualizar.

editar-permissoes2.png

3. Compartilhar Link para Edição


A edição colaborativa é um ponto forte do HackMD

Agora que já escolheu o método preferido, para compartilhar, você pode simplesmente selecionar o endereço na barra de endereços de seu navegador e enviar para as pessoas.
compartilhar-link.png

4. Publicar


Você pode deixar o seu texto no ar para ser acessado por qualquer pessoa a qualquer momento, como se fosse um site pessoal.

Lembre-se de configurar as permissões corretas, pois o link fixo também é editável, se assim você tiver configurado.

NOTA:
Se pretende editar sempre, não faça sem login.
Crie seu login no HackMD (Passo 1b) e mantenha tudo salvo.

Clique em Publicar, no menu superior direito, para obter o link fixo.

publicar.png

5. Help - Ver exemplos básicos


Aqui você encontrará alguns exemplos básicos de códigos MarkDown.

Clique no ícone de ajuda, no canto superior esquerdo do topo.
Screenshot 2018-01-30 20:02:30.png

Você verá todas as possibilidades básicas em Dicas, além dos links para uma documentação mais avançada e exemplos, no menu lateral.
ajuda.png

6. Enviar Imagens e Hospedar Automaticamente


a) Método 1 (fácil, mas sem controle)

Você não precisa ter um local para hospedar suas fotos. Todas ficarão publicadas no imgurl automaticamente (não recomendado).

IMPORTANTE:
Você não poderá controlar as imagens enviadas dessa forma.
Se quiser controle, escolha o Método 2 logo a baixo.

Para enviar suas fotos (sabendo que não terá controle sobre elas), basta clicar no ícone da câmera e escolher o arquivo a ser upado.
Screenshot 2018-01-30 20:18:14.png

b) Método 2 (com controle total)

Hospede antes no imgur com seu próprio login, ou onde preferir, ao invés de usar o ícone de upload do HackMD.

Para inserir imagens que já estejam hospedadas no local de sua preferência, clique no ícone de imagem, no menu superior secundário e a seguir, entre os parênteses, adicione o endereço (url) da imagem.
Screenshot 2018-01-30 20:29:21.png

exemplo:

![](https://imgur.com/EXEMPLO-TUTORIAL.JPG)

7. Inserir links

a) Link Puro

Como o nome já diz, basta colar ou escrever o endereço para que funcione como link.

Exemplo:

https://steemit.com/@casberp

b) Link com Texto

I. Clique no ícone da corrente, no menu superior secundário.
Screenshot 2018-01-30 21:04:55.png

II. Escreva o texto do link entre colchetes e o link propriamente dito, entre os parênteses.

Exemplo:

[@casberp](https://steemit.com/@casberp)

8. Inserir comentários


É um recurso muito interessante adicionar comentários nos textos. Assim, todos os que forem colaborar, poderão se comunicar de forma clara.

Para adicionar comentários, clique no botão de "chat" no menu superior esquerdo secundário.
chat.png

Usando o "name", que aparece como exemplo, você facilita a colaboração. Os outros usuários saberão facilmente quem adicionou o comentário. Pode virar um "chat" completo.

comentários.png

Veja como fica:

[name=casberp]Exemplo de comentário interno:
sugiro que blá blá blá e use o link tal para cá..
[name=colaborador]Ótimo, sugestão aceita.
[name=revisor]Não gostei, altere para blá blá devido ao problema da xpto 2.0.
[name=casberp]Feito!

9. Exportar


Você pode salvar seus documentos em diversos formatos. Entenda cada um deles e saiba como fazer:

  • Exportar como Markdown

    Formato padrão. Salva um arquivo .md que você poderá utilizar onde preferir.

  • Exportar HTML

    Isso faz com que você tenha um arquivo .html com todos os links para css e js necessários para que o visual seja idêntico ao que criou no HackMD. É visualizável perfeitamente em qualquer navegador.

  • Exportar HTML puro

    HTML puro, significa que somente o código html será salvo, sem links para css e js. Isso tornará o texto um pouco diferente do que você viu no editor, mas pode ser muito útil em alguns casos.

  • Exportar formato ODF

    Esse é um formato chamado Open Documment. Funciona na maioria dos editores de texto, sem problema algum. Word, LibreOffice, OpenOffice e outros.

Para exportar (baixar), clique em "Menu" no canto superior direito, e escolha um dos formatos que você acabou de conhecer.

exportar.png

10. Restaurar um backup (Revisão)


Muitas vezes você poderá cometer o erro de editar e sumir com tudo, ou apagar partes importantes do texto. No HackMD isso não é problema. Automaticamente, são salvos backups de suas alterações.

Se você errar, para restaurar é muito simples.

I. Clique no Menu superior direito, em **"Menu" **e escolha a opção "Revisão".
menu-revisao.png

II. Escolha através da data, qual você quer restaurar. Clique em alguma e você pode conferir se o texto está correto, na janela da direita.
revisoes.png

11. Acessar o Histórico


Mesmo estando deslogado, você pode acessar seu histórico recente. Para isso, clique no ícone do HackMD no canto superior esquerdo da tela.
hackmd-inicial.png

A seguir, clique em Histórico.
historico.png

Agora clique no "cartão" correspondente.
Cuidado ao clicar no X, pois fará sumir seu histórico e você perderá o link, mas o arquivo continuará existindo. Se perdeu o link, não será mais possível encontrá-lo.
historico2.png

Conclusão


Parabéns. Esse é o tutorial básico de HackMD.

Agora você está apto para editar, colaborar, publicar, compartilhar e salvar seus textos em formato markdown usando o HackMD.io.

MUITO EM BREVE, será publicado um tutorial semelhante, mas em vídeo, para você que prefere aprender vendo alguém fazer.


Espero que esse tutorial te ajude a prosperar.

Veja outros artigos e tutoriais clicando aqui.

assinatura-rodape.jpg


Sort:  

Boa, @casberp! Ficou ótimo, parabéns ;) Quando sai o próximo? :D

Valeu casagrande! Legal vc por aqui, valeu o incentivo! Só o bandwidth colaborar hahah.

Amigo, isto não deveria ser um tutorial para o utopian-io? Investigue isso ;)

Já to com raiva deles, vou experimentar só por fora por hora hehe.

Não tenha raiva ahah as coisas bem feitas são aprovadas eheh

Sim eu vi, mas por um lado percebo que querem melhorar o sistema e que tem que ter qualidade. Vamos lá ver como vão ficar as coisas.

Boa mano! Sempre bom ver um tutorial pro vindo de você.

Explicadinho, explicadinho... Obrigada :)
Quando você nos apresentou, eu dei uma fuçada e até fiz um post com ele mas, quando fui jogar o conteúdo no steemit (ctrl+c ctrl+v), os comandos - negrito e itálico, por exemplo - não foram acatados e apareceram os todos os asteriscos :/ Fiz errado?

Os asteriscos devem estar grudados na palavra, por exemplo:

**PALAVRA EM NEGRITO**

De vez em quando o HackMD coloca os asteriscos separados da palavra (ou na linha de baixo) e acontece esse problema. Basta ajeitar "na mão" hehehe.

Entendi e obrigadinha, mais uma vez, pela resposta e pelas tentativas de resposta rsss!!!!

Ahhh descobri uma coisa por acaso: o hackmd acata o código quando copiamos o texto puro e duro dos posts. Explico o que fiz: fui copiar um post para facilitar a questão da formatação mas o ele já não estava editável. Então, copiei normal e, quando fui colar no hackmd.... tcharannnn... todos os comandos, links, tudo, tudo, tudo :DDDD
Lindo, não é??!!
"Nunca mais sentirei fome!!" (estou me sentindo muito uma Scarlett O'Hara) hhihihih

Que legal que descobriu mais uma das características do HackMD.

Parabéns! E obrigado por compartilhar aqui pro pessoal ^ ^

Ele não é "hack" atoa :)

XDDD é mesmo!!! Tá no nome!!
Descobri outra coisa: quando se usa

, ele para de considerar os comandos :/
Obrigadinha, mais uma vez

Caramba, isso ficou bom demais! Cada vez melhor, parabéns por mais um excelente post. Muito bem explicado de maneira simples, um passo a passo que vai ajudar muito. Não conhecia a ferramenta e vou adotar, Obrigado!

Valeu o incentivo @aldenio! Muito bom ter te ensinado uma alternativa online para aquele outro excelente que indicou.

Your Post Has Been Featured on @Resteemable!
Feature any Steemit post using resteemit.com!
How It Works:
1. Take Any Steemit URL
2. Erase https://
3. Type re
Get Featured Instantly – Featured Posts are voted every 2.4hrs
Join the Curation Team Here

Resteemed by @resteembot! Good Luck!
Curious?
The @resteembot's introduction post
Get more from @resteembot with the #resteembotsentme initiative
Check out the great posts I already resteemed.

This post has received a 10% upvote from @siditech thanks to: @casberp. Here's a banana! banana-small.png

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by Reborn from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.

If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.