5
respostas

[Dúvida] Dúvidas remanescentes sobre o Markdown - Evandro

Olá Evandro!
Como vai?
Queria primeiramente te agradecer pela taenção...eu demorei um pouco, pois eu parei para dar uma lida e estudar paralelamente...
Então, Vc me passou essa, Dica: O Markdown no VS Code possui uma visualização em tempo real (Preview) que você pode ativar clicando no ícone de "janela dividida" no canto superior direito. Só que eu não tenho certeza em que lugar se encontra o preview...Possa ser que seja falta de segurança mas eu não consegui observar.
Vou te enviar um print como que eu fiz e te indico se achei.

Segunda dúvida é sobre a sintaxe para imagens. o link da imagem deverá ser criado por nós tb? e tem q introduxir um link de entrada e um de saída? perguntei sobre essa questão da entrada e saída, pois eu fui dar uma pesquisada e vi.

Imagens: Como você já aprendeu a fazer links, a sintaxe para imagens é quase idêntica, apenas adicionando um ponto de exclamação no início: texto alternativo.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade
Vc pode me indicar onde fica a preview nesse print?

Muito Obrigada e bom início de semana

5 respostas

Olá, Fabiana. Como vai?

É muito bom ver o seu empenho em buscar conhecimento extra e praticar diretamente na ferramenta. O VS Code é um aliado poderoso e, no início, é normal ficar um pouco perdida entre tantos ícones e funcionalidades.

Sobre as suas dúvidas, vamos por partes:

1. Onde fica o Preview no VS Code?

Analisando o print que você enviou, notei que você está trabalhando em um arquivo com a extensão .ipynb (Jupyter Notebook). Nesses arquivos, o comportamento é um pouco diferente de um arquivo Markdown padrão (.md).

No seu caso, você já está visualizando o resultado! No Jupyter Notebook, o VS Code alterna entre o modo de edição e o modo de renderização.

  • Para editar, você clica duas vezes na célula.
  • Para visualizar o resultado (o seu preview), basta pressionar Shift + Enter ou clicar no ícone de "check" (concluir) que aparece acima da célula.

Se você estivesse em um arquivo apenas de texto .md, o ícone que mencionei anteriormente apareceria no canto superior direito da aba, parecendo uma letra "M" com uma pequena lupa ou uma janela dividida.

2. Sintaxe de Imagens em Markdown

Sua pesquisa foi muito boa! A sintaxe é realmente quase igual à de um link, com a diferença do ponto de exclamação no início: ![Texto Alternativo](URL_da_Imagem).

Sobre a questão de "link de entrada e saída", talvez você tenha encontrado referências a links que também funcionam como imagens clicáveis, mas para uma imagem simples, você só precisa de um único endereço (URL).

  • O link da imagem: Você pode usar o endereço de uma imagem que já está na internet (clicando com o botão direito nela e escolhendo "Copiar endereço da imagem") ou o caminho de uma imagem que esteja salva na mesma pasta do seu projeto no computador.

Exemplo prático:

![Logo da Alura](https://www.alura.com.br/assets/img/alura-share.1713531312.png)
  • Dica sobre o link: O "link de entrada" seria o endereço onde a imagem está hospedada. Não existe necessariamente um "link de saída", a menos que você queira que, ao clicar na imagem, o usuário seja levado para outro site. Nesse caso, envolveríamos a sintaxe da imagem dentro de uma sintaxe de link. Mas, para o seu aprendizado atual, foque apenas em colocar o endereço da imagem entre os parênteses.

Continue explorando o VS Code e o Jupyter Notebook, pois eles são as ferramentas fundamentais no dia a dia de quem trabalha com dados!

Espero que possa ter lhe ajudado!

Evandro,
Juro que pensei nisso e nao criei o arquivo .md
Irei fazer amanhã e te envio! Obrigada pelo suporte e atenção!
amanha avanço na teroria e sigo com os exercicios na quarta.

Obrifada

Ja corri atras kkk Não aguentei!!!
Isso é bom demais...to començando a ficar dopaminada com isso
Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá, Fabiana! Tudo bem?

Hahaha, que sensacional ler isso! Boas-vindas oficiais ao viciante mundo da tecnologia! Essa sensação de ver o código funcionar e ver as coisas ganhando forma na tela é exatamente a "dopamina do programador". Quando você pega o jeito, não quer mais parar!

Agora sim, olhando para o seu novo print (a primeira imagem do arquivo pratica.md), você fez tudo perfeitamente! Você criou o arquivo com a extensão correta e conseguiu usar os blocos de citação (>), negrito (``), código em linha (```) e os títulos (#). O seu arquivo está impecável.

Vamos matar a charada de onde fica o Preview para você nunca mais esquecer:

Onde está o botão de Preview no seu VS Code?

Olhe bem para o seu primeiro print, lá no canto superior direito, bem acima do código do seu arquivo pratica.md (na linha das abas). Você vai ver três ícones pequenos juntos.

O ícone do Preview é o terceiro ícone (o da ponta direita), que parece uma página dividida ao meio com uma pequena lupa no canto.

  • Quando você clica nele, o VS Code abre exatamente essa visualização que você já está vendo: o código de um lado e o texto bonitão e renderizado do outro! Você ativou ele com maestria.

Um pequeno detalhe na linha 5 (# Curtindo horrores)

Olhando o seu código do lado direito, na linha 5, notei que o texto # Curtindo horrores ficou roxo e não renderizou como um título grande do lado esquerdo (ele ficou com uma linha embaixo).

Isso aconteceu por causa de uma regra sutil do Markdown: os títulos sempre precisam de uma linha em branco antes deles se houver algum texto logo acima. Como a linha 4 (como isso é bom) estava colada nele, o VS Code se confundiu.

Para resolver é super simples: basta ir na linha 4, dar um Enter para criar uma linha vazia entre eles, e pronto! O seu título vai ficar grande e destacado instantaneamente.

Aproveite muito essa energia e siga firme nos estudos na quarta-feira! Você está evoluindo super rápido.

Espero que possa ter lhe ajudado!

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá Evandro! Obrigada pela instrução mas não consegui alterar...Quando abri no Notebook deu ok mas qdo eu abro no .md está continuando com o erro.

Aproveitando tb para tirar uma dúvida relativa a forma de tirar dúvida com os códigos. Eu vi que o pessoal só envia a fonte de código branca q fica com três pontinhos e queria saber como fazer, eu tenho uma ideia mas preferi perguntar. Diante mão só tenho a te agradecer.