Giter Club home page Giter Club logo

markdown's Introduction

Markdown

Aplicando na prática os comandos aprendidos na linguagem Markdown


A linguagem Markdown assim como o html são linguagens de marcação e não de programação. Mas por que motivos utilizaríamos o Markdown se nós já temos o html?

A linguagem Markdown tem como objetivo tornar o código fonte mais legível e de fácil leitura. Além disso ele é utilizado em vários momentos sem que as pessoas saibam, como aqui mesmo no GitHub dentro das "Issues", no arquivo "README.md" que por sinal a extenção ".md" significa Markdown, no aplicativo de voz Discord e até mesmo o whatsapp tem comandos com base em Markdown.

Mas chega de enrolação, vamos aprender a utilizar os comandos...

Vocês podem baixar este arquivo para visualizar o código fonte do mesmo e entender melhor cada um dos comandos que forem listados aqui.

Códigos em Markdown

Negrito

Para deixar um texto ou parte de um texto em negrito, nós podemos utilizar o símbolo asterisco duas vezes ** no início, depois devemos utilizar o mesmo símbolo para indicar que queremos terminar o texto ou a palavra em negrito, do contrário este efeito seria aplicado para todo o texto.

Nós também podemos ao inves de asterisco, utilizar o underline DUAS vezes __ no início, para indicar que desejamos iniciar o efeito negrito e duas vezes no final, para indicar que desejamos encerrar o efeito.

**teste** ou __teste__

Itálico

Para adicionar o efeito Itálico, nós podemos utilizar o asterisco apenas uma vez * ao inves de duas como vimos no negrito.

Assim como em negrito, nós devemos adicionar o símbolo no início da frase ou texto que desejamos deixar em itálico e depois utilizamos novamente para encerrar o efeito para que o mesmo não seja aplicado em toda a extenção do texto sem que seja de nossa vontade.

Nós também podemos utilizar o underline _ UMA vez, para substituir o asterísco, pois o efeito aplicado é o mesmo.

*teste* ou _teste_

Texto riscado

As vezes nós queremos riscar alguma parte do texto e o comando Markdown utilizado para essa finalidade é o til ~~. Nós utilizamos ele DUAS vezes antes da frase para indicar o início do efeito e depois utilizamos mais duas vezes para indicar o encerramento do mesmo.

~~teste~~

Títulos

Os títulos são representados pelas Hashtags.

Nós utilizamos UMA hashtag # para indicar um título de Nível 1, DUAS hashtags ## para indicar um título de Nível 2 e TRÊS hashtags ### para indicar um título de Nível 3.

# Título nível 1
## Título nível 2
### Título nível 3

Linhas horizontais

Para criarmos linhas horizontais nós utilizamos TRÊS sinais de menos --- OU TRÊS asteriscos ***.

Assim podemos criar uma linha horizontal (bem marcada) para separar ou dividir tópicos por exemplo.

--- ou ***

Misturar efeitos

Outra coisa que podemos fazer em Markdown é misturar os efeitos como negrito, sublinhado e riscado. Exemplo:

~~**_Markdown_**~~

Lista numerada

1. teste1
1. teste2
1. teste3
5. teste4
  1. teste1
  2. teste2
  3. teste3
  4. teste4

Caso deseje criar listas como esta, também é possível através da linguagem Markdown. Basta adicionar um número como o número 1 por exemplo, seguido de um ponto final, espaço, e o texto.

Independente da numeração que você utilizar para criar a lista, ela será ordenada da forma correta como no exemplo acima.

Você também pode adicionar sub-itens na lista numerada, por exemplo:

1. teste
   1. teste1.1
   2. teste1.2
  1. teste
    1. teste1.1
    2. teste1.2

Basta adicionar TRÊS espaços antes de adicionar o número e o ponto final.

Listas demarcadas

As listas demarcadas podem ser criadas utilizando o símbolo asterisco * ou o sinal de menos -, seguido de espaço e o texto.

* teste
* teste2
* teste3
  • teste
  • teste2
  • teste3

Nesta lista nós também podemos adicionar sub-itens. Basta adicionarmos TRÊS espaços, o símbolo ou o sinal de menos e o texto.

* teste
   * teste1.1
   * teste1.2
  • teste
    • teste1.1
    • teste1.2

Lista de tarefas

A lista de tarefas é muito útil e tem sido muito utilizada. Para criarmos uma lista deste tipo nós utilizamos o sinal de menos - seguido de espaço, [ abertura de colchetes, espaço, ] fechamento de colchetes, espaço, e o texto que desejamos.

- [ ] teste
- [ ] teste2
- [ ] teste3
  • teste
  • teste2
  • teste3

Suponhamos que você cumpriu uma ou todas estas tarefas, como marcar esta tarefa na lista?

Muito simples. Basta você substituir o espaço entre os colchetes pela letra "X" e a marcação será feita.

- [x] teste
- [x] teste2
- [ ] teste3
  • teste
  • teste2
  • teste3

Assim como nas listas anteriores, nós também podemos adicionar sub-itens a esta lista. Para isso nós só precisamos fazer como nas listas anteriores e adicionar os TRÊS espaços antes do comando.

- [ ] teste
   - [x] teste1.1
   - [ ] teste1.2 
  • teste
    • teste1.1
    • teste1.2

Adicionando imagens

Adicionar imagens a linguagem Mardown também é muito simples.

Primeiro adicionamos o sinal de exclamação ! seguido da abertura de colchetes [, descrição da imagem , fechamento de colchetes ], abertura de parênteses (, o link web da imagem desejada ou o endereço local da mesma, e por fim o fechamento dos parênteses ).

![teste](img/imagem.png)

![teste](https://algumacoisa.png)

My Job

Adicionar links

A sintaxe para adicionar links é a mesma de inserir imagens, porém sem o ponto de exclamação !.

[teste](https://link.com.br)

Portifólio da imagem acima

Criação de tabelas

Para a criação de tabelas nós trabalhamos com as barras | após cada texto adicionado.

Número | Item | Preço

Depois criamos as linhas horizontais que irão dividir as colunas dos itens e seguimos com a tabela.

---|---|---

Agora seguimos preenchendo a tabela utilizando o mesmo padrão das colunas.

1 | Maçã | R$19,30
2 | Banana | R$05,50

Agora seguindo todos os passos a nossa tabela se encontra desta forma.

Número | Item | Preço
---|---|---
1 | Maçã | R$19,30
2 | Banana | R$05,50
Número Item Preço
1 Maçã R$19,30
2 Banana R$05,50

Adicionar códigos

Ao longo de todo este texto eu adicionei várias linhas e blocos de código, isto é, as partes destacadas com fundo cinza e mono espaçadas passando a ideia de que são linhas de código de alguma linguagem de programação ou de marcação de texto como no caso do Markdown.

Para adicionarmos uma única linha de código nós utilizamos duas crases `` e dentro delas adicionamos o conteúdo com a linha de código que desejamos.

gameDev = new Arraylist<gameDeveloper>();

Já para criarmos um bloco de código onde temos algumas ou várias linhas, nós utilizamos TRÊS crases ``` no início do código e mais três no final. Assim todo o conteúdo inserido dentro das crazes será formatado como linhas de código.

if(moved) {
	frames ++;
	   if(frames == maxFrames) {
		  	frames = 0;
		   index++;
			if(index == maxIndex)
			   index = 0;

Quebra de linhas

Para quebrar uma linha em Markdown é mais simples do que tudo o que aprendemos até aqui.

Basta que você pule uma linha, ou seja, utilizar a tecla ENTER DUAS vezes.


Espero ter ajudado a todos que tinham dúvidas a respeito dessa linguagem de marcação super útil e muito legal.

markdown's People

Contributors

josephdacosta avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.