2 de Agosto de 2015 Por Marcia Ramos

Markdown

Para facilitar a escrita com o Jekyll, este artigo apresenta uma lista de markups em markdown Kramdown de arquivos com as extensões .md ou .markdown.

Eu mesma uso o conteúdo deste artigo como guia quando não lembro de algum markup, por isso resolvi publicá-lo e deixá-lo à mão para a comunidade web também.

Este artigo parte do princípio que você já tem o Jekyll instalado e usa o GitHub Pages para publicar seu site ou seu blog. Se você precisa de mais informações sobre isso, veja o artigo Criando Blogs com Jekyll no Windows.

Veja abaixo as configurações aplicadas ao _config.yml.

Markups Básicos

Títulos

# Texto = <h1>Texto</h1>
## Texto = <h2>Texto</h2>
### Texto = <h3>Texto</h3>

Enfases

Itálico e negrito:
Itálico e negrito-itálico:

*Texto em Itálico*
_Texto em itálico_

**Texto em negrito**
__Texto em negrito__

*Texto em itálico e em **negrito-itálico**!*

#### **Título em negrito**

Listas

Ordenadas:

Item 1
Item 2
- 2.1. Sub-item 2.1
- 2.2. Sub-item 2.2

1. Item 1
2. Item 2
    - 2.1. Sub-item 2.1
    - 2.2. Sub-item 2.2

Não-ordenadas:

Item 1
Item 2
- Sub-item 2.1
- Sub-item 2.2

- Item 1
- Item 2
    - Sub-item 2.1
    - Sub-item 2.2

Imagens

![Texto ALT](url "Título")

Alt e Título não são obrigatórios.

Links

Virtua Creative Technology

[Texto impresso](url)

Âncoras

Digâmos que você usar a palavra a seguir como âncora.

Olá. Eu sou uma âncora!

O texto ficará assim:

Olá. Eu sou uma <a name="ancora"></a> âncora!

E para recuperar a âncora, você poderá denotá-la como um link comum:

Quero citar minha âncora.

Seu texto estará escrito assim:

Quero citar minha [âncora](#ancora).

Tabelas

As tabela são criadas com hifens e barras verticais. O cabeçalho é separado do restante da tabela por traços e as colunas são separadas por barras. O código a seguir…

Cabeçalho Um	 | Cabeçalho Dois
---------------	 | --------------
Célula Um    	 | Célula Dois
Célula Três  	 | Célula Quatro

…produzirá esta tabela…

Cabeçalho Um	Cabeçalho Dois
Célula Um	Célula Dois
Célula Três	Célula Quatro

…que foi estilizada no css:

.article_body table thead tr th {
	min-width: 150px;
	padding: 20px 10px 20px 5px;
	border-bottom: 1px solid lightgray;
	border-top: 1px solid lightgray;
} 

.article_body table tbody tr td {
	min-width: 150px;
	padding: 10px 5px 10px 5px;
	border-bottom: 1px solid lightgray;
} 

.article_body table {
	margin-bottom: 30px;
	margin-top: 30px;
}

Você poderá utilizar o “Inspecionar elemento” do seu navegador para ver exatamente a qual classe a tabela pertence. No caso acima, pertence à classe .article_body. Você poderá omitir a classe e aplicar o estilo somente ao elemento table, e assim afetará todas as tabelas do seu site.

Você poderá aplicar o markdown para negrito e itálico normalmente no conteúdo da tabela. Para alinhar o texto (à esquerda, à direita e cetralizar), usa-se : entres as barras horizontais:

Este código…

| Coluna Um | Coluna Dois | Coluna Três |
| :-------- | :--------: | --------: |
| Célula 1 - _Esquerda_ | Célula 2 - _Centro_ | Célula 3 - _Direita_ | 	
| Célula Quatro | Célula Cinco | Célula Seis |

…produzirá esta tabela:

Coluna Um	Coluna Dois	Coluna Três
Célula 1 - Esquerda	Célula 2 - Centro	Célula 3 - Direita
Célula Quatro	Célula Cinco	Célula Seis

Conforme acima, a “coluna um” aparecerá com o texto alinhado à esquerda; a “coluna dois”, centralizada; e a “coluna três”, à direita. Note que o as barras verticais não precisam estar simetricamente dispostas. O estilo aplicado à tabela é o mesmo definido no CSS anteriormente.

Códigos

As formas de exibir códigos em markdown mais utilizadas são:

1. Código Inline

Este é um código inline.

Este é um `código inline`

2. Blocos de Código

2.1. Utilizando "Fenced Code Blocks" ou "Backticks"

Código em blocos, com a linguagem definida:

```html 
Este é um código html em bloco em markdown puro.
<h1>Hello world!</h1>
```

2.2. Utilizando Liquid tags

Definindo apenas a liguagem:

{% highlight html %} 
Este é um código html em bloco via liquid tags!
{% endhighlight %}

Inserindo número das linhas ao código em bloco:


1
2
3
4
{% highlight html linenos %} 
Este é um código html em bloco com linhas numeradas!
<h1>Hello world!</h1>
{% endhighlight %}

Aqui o interessante é que você pode colorir os números no seu css, como você notou no bloco acima. Para fazer isso, vá até o seu css e atribua uma cor para a classe linenos que será compilado a uma <pre> tag:

Como o markdown é transformado em html:

<pre class="lineno">1 2 3</pre>

atribua a classe no seu style.css:

.lineno {
	color: red;
}

3. Códicos via Indentation

Adicione 4 espaços em branco antes de qualquer texto que este aparecerá em bloco de código, como a seguir:

hello world!

Markups Avançados

Links para Usuários

Se você achou que este artigo foi útil, poderá dar uma para @virtuacreative !

O link para o perfil de Virtua Creative no Github na frase acima foi adicionado com um simples arroba na frente do meu nome de usuário.

O único detalhe é que você precisa “ativar” a menção de usuários nos seus artigos adicionado uma linha gems ao seu _config.yml:

gems:
  - jekyll-mentions

Neste caso, o padrão será para citação de usuários do GitHub.

Caso prefira, poderá definir o a menção de usuários de outras redes sociais, desta forma:

gems:
  - jekyll-mentions

jekyll-mentions:
  base_url: https://twitter.com

Visualização Local

Para poder visualizar as menções no seu localhost, será necessário instalar uma gem do Ruby. Antes disso, verifique e sua versão do GitHub Pages está atualizada.


1
2
3
4
5
6
7
gem update github-pages
#ou
bundle update github-pages
#depois:
gem install github-markup
#depois:
gem install jekyll-mentions

Observações:

Linha 1 ou 3: ambos funcionam; apenas depende da forma que você utilizou para instalar a gem do github-pages.
Linha 5: instala o GFM - habilita o mesmo markdown que usamos diretamente nos arquivos .md dos repositórios do git.
Linha 7: habilita a visualização dos links usados com o arroba no seu localhost.

Este blog usa o kramdown como markdown, se você estiver usando outros, não saberia dizer até que ponto esta lista funcionaria.

Para habilitar o GFM, é necessário que o inclua no seu _config.yml, desta forma:


1
2
3
4
markdown: kramdown

kramdown:
  input: GFM

Observações: A linha um define o markdown que você está usando. A linha 4 insere um input no kramdown.

Carinhas (Emoticons)

É bacana poder usar o markdown para descontrair o texto com os emoticons que conhecemos !

Você poderá acessar do seu toda a coleção de carinhas!

Sintaxe:

Veja como escrever esta frase:

“Vamos ilustrar com um gravatinha e com uma setinha ”

Vamos ilustrar com um gravatinha : bowtie :  e com uma setinha : arrow_left :

Veja o link Emoji - Lista de Emoticons para a lista completa de emoticons. Clicando sobre eles, você estará copiando o código, portanto basta colar no seu texto.

Seguindo a mesma lógica dos links para usuários, você precisará habilitar o uso do Emoji no seu site, adicionando ao _config.yml:

gems:
  - jemoji

Se você usar tanto o Emoji quanto o Mentions, como é o caso deste blog, simplesmente coloque um sobre o outro nos gems do seu _config.yml:

gems:
  - jekyll-mentions
  - jemoji

Ainda seguindo a lógica dos links para usuários, você precisará adicionar uma gem no seu PC para visualizar os emoticons localmente:

gem install jemoji

`_config.yml`

Para simplificar seu entendimento, vou mostrar abaixo como ficou o meu _config.yml para usar todos os markups de markdown citados neste artigo:

# demais configurações...

highlighter: rouge
markdown: kramdown
kramdown:
  input: GFM

gems:
  - jemoji
  - jekyll-mentions

# demais configurações...

Pronto!

É isso gente, para checar as informações acima, veja abaixo a lista de referências utilizadas para elaborar o artigo.

Se gostou do artigo, por favor deixe a gente saber disso nos comentários abaixo!

Deixe seu comentário se puder complementar, dar mais algumas dicas, sugestões e deixar sua contribuição para a comundade!

Obrigada!

Referências

☆ Referência completa sobre markdown
☆ Referência completa para Kramdown
☆ Referência básica para markdown
☆ Referência do GFM
☆ Emoji - Lista de Emoticons
☆ Instalação local do Markup do GitHub
☆ Instalação/Update local do GitHub Pages
☆ Instalação local do Emoji - Emoticons
☆ Instalação local do Jekyll Mentions
☆ Kramdown + GFM - Jekyll Docs

Último update deste artigo: 22/02/2016 às 17:33h.

Jekyll e GitHub Markdown