GSB 101: Usando as Sintaxes Markdown e... Fontes?

Logo1

 Neste segundo “tutorial” sobre as novas funcionalidades do novo GSB, vamos falar sobre a edição de tópicos. Já vimos o básico sobre como fazer uma postagem , mas e se quisermos “incrementar” um pouco as coisas?
 Usuários do fórum antigo (e de fórums em geral) já conhecem o bbcode, uma pequena linguagem de formatação que possibilita a edição de postagens, adicionando funcionalidades como tamanhos diferentes de fontes, negrito, itálico, espaçamento, coisas do tipo. No Discourse (e, por conseguinte, no novo GSB) o padrão de formatação é o Markdown, uma linguagem de formatação simplificada mas que, se bem utilizada, possibilita uma boa formatação das postagens. Lembrando que também é suportado alguns bbcodes e, mesmo, html “puro”.
 Mas, vamos nos focar no Markdown. Ou, melhor, vamos nos focar nas principais mudanças em antigas sintaxes em bbcode e o novo modo de conseguir o mesmo efeito. Obviamente, não vou cobrir todas as sintaxes possíveis, mas as mais utilizadas comumente.
 Mas aí você pergunta: preciso mesmo usar isso? Não. Assim como no antigo GSB, a maior parte das postagens é feita usando o “padrão” sem nenhuma formatação. Mas é interessante conhecer o que mudou, principalmente para os nossos escritores (sejam de AARs ou de tutoriais ou de textos em geral) e quem quiser deixar suas postagens mais “bonitinhas”. Lembrando que o mais básico já se encontra na “barra de ferramentas” do Composer.
 Para exemplificar melhor, vou utilizar o seguinte modelo:
Efeito
sintaxe em bbcode > sintaxe em markdown
exemplo
 Então, bora?

Tamanho - aqui há uma diferença importante, pois apesar da sintaxe ser a mesma ([size=*][/size]) os valores agora variam de 1 a 7, então vou demonstrar todos:
[size=1]1[/size] - 1
[size=2]2[/size] - 2
[size=3]3[/size] - 3
[size=4]4[/size] - 4
[size=5]5[/size] - 5
[size=6]6[/size] - 6
[size=7]7[/size] - 7

Alinhamento à esquerda
[align=left][/align] > [left][/left]

Alinhamento à esquerda

Alinhamento centralizado
[align=center][/align] > [center][/center]

Alinhamento centralizado

Alinhamento à direita
[align=right][/align] > [right][/right]

Alinhamento à direita

Recuo de Parágrafo
[tab=30][/tab] >  
 Recuo de Parágrafo

Itálico
[i][/i] > *'*
Itálico

Negrito
[b][/b] > **'**
Negrito

Justificado
[align=justify][/justify] > [justify][/justify]

Justificado

Citação - Aqui também temos algumas “diferenças mas nem tanto”. Para citar parte de um texto, você pode selecionar o texto na mensagem original e clicar no floating “Citação” que aparece (utilizando assim o antigo [quote=*][/quote]), ou utilizar a sintaxe a seguir para criar um “Bloco de Citação” sem citar um post em si:
>
> Citação

Citação

Link - também há duas formas de utilizar: colando o link diretamente uma “prévia” será criada, ou para fazer um link personalizado clicável pode-se utilizar:
[url=*][/url] > []()
[GSB](https://gsbrazil.net/) > GSB

Imagem - Aqui são várias as opções: upar no servidor (pelo botão ou apenas arrastando para o Composer), colar diretamente o link da imagem, utilizar a sintaxe [img][/img] ou a mesma sintaxe de Link anterior:
[]()
![Minha Imagem](/uploads/default/original/2X/8/82464388d568f01529850e602b60ec6d63845320.jpeg) >

Código
[code][/code] > ``
Código

Linha Horizontal
[hr] > ***


Lista
[list][/list] > *

  • Lista

Lista Numerada
[ol][li][/li[/ol] > 1.

  1. Um
  2. Dois

Spoiler
[spoiler][/spoiler] > [details=*][/details]

[details="Spoiler"] Spoiler [/details] >

Spoiler

Spoiler

Algumas sintaxes bbcode não suportadas por Markdown, mas que podem ser utilizadas normalmente:

Sublinhado
[u][/u]
Sublinhado

Riscado
[s][/s]
Riscado

Cor (tanto a cor em hexadecimal quanto o nome em inglês)
[color=*][/color]
[color=#0026FF]Cor[/color] > Cor
[color=blue]Cor[/color] > Cor

 Acredito que estes são os principais e mais utilizados. Agora… e as fontes?
 Bem… Fontes não são suportadas por Markdown. Mas pode-se utilizar o velho bbcode [font=*][/font] para isso. Mas… quais fontes pode-se utilizar?
 Resposta curta: qualquer uma!

 Resposta longa: depende!
 Como assim? Bem… o fato é que qualquer fonte que exista no computador do usuário será visualizada formatada, toda bonitinha. Se essa fonte não existir, ou não for suportada (por exemplo, em um Mac ou Android) será exibida a fonte padrão (essa aqui mesmo).
 Exemplo: Eu posso utilizar a fonte Britannic Bold, fonte que acompanha o pacote Microsoft Office, utilizando a sintaxe [font=Britannic Bold]Britannic Bold[/font], mas ela só aparecerá como Britannic Bold nos computadores em que o Microsoft Office esteja instalado. O mesmo vale para fontes “diferentes” que tenham sido instaladas, como a Aerolite, Elegant Dragon, Final Frontier, Wild Word Roman BR, que são fontes que eu tenho instaladas aqui, mas que se o usuário não as tiver, ele verá a fonte padrão.
 Mas existem fontes “universais”, as chamadas Web Safe Fonts, que sempre serão (deveriam ser?) exibidas independente das fontes que o usuário tiver instaladas. São a opção segura (desculpem o trocadilho) para quem quiser garantir que o texto será visualizado conforme foi originalmente pensado. A exceção (infelizmente) é o Android, que usa somente a família Roboto como padrão.
 A seguir, uma lista com algumas Web Safe Fonts:

Bookman Old Style - [font=Bookman Old Style]Bookman Old Style[/font] > Bookman Old Style
Bradley Hand ITC - [font=Bradley Hand ITC]Bradley Hand ITC[/font] > Bradley Hand ITC
Brush Script MT - [font=Brush Script MT]Brush Script MT[/font] > Brush Script MT
Century - [font=Century]Century[/font] > Century
Century Gothic - [font=Century Gothic]Century Gothic[/font] > Century Gothic
Courier New - [font=Courier New]Courier New[/font] > Courier New
Cursive - [font=Cursive]Cursive[/font] > Cursive
Freestyle Script - [font=Freestyle Script]Freestyle Script[/font] > Freestyle Script
Garamond - [font=Garamond]Garamond[/font] > Garamond
Garamond Bold - [font=Garamond Bold]Garamond Bold[/font] > Garamond Bold
Gill Sans - [font=Gill Sans]Gill Sans[/font] > Gill Sans
Goudy Old Style - [font=Goudy Old Style]Goudy Old Style[/font] > Goudy Old Style
Impact - [font=Impact]Impact[/font] > Impact
Kristen ITC - [font=Kristen ITC]Kristen ITC[/font] > Kristen ITC
Monotype Corsiva - [font=Monotype Corsiva]Monotype Corsiva[/font] > Monotype Corsiva
Palatino - [font=Palatino]Palatino[/font] > Palatino
Palatino Linotype - [font=Palatino Linotype]Palatino Linotype[/font] > Palatino Linotype
Papyrus - [font=Papyrus]Papyrus[/font] > Papyrus
Rockwell - [font=Rockwell]Rockwell[/font] > Rockwell
Segoe UI - [font=Segoe UI]Segoe UI[/font] > Segoe UI
Verdana - [font=Verdana]Verdana[/font] > Verdana

 (Avisem caso alguma estiver “quebrada” que eu retiro da lista, ok?)
 Então, é isso pessoal! Aproveitem!
1 Curtida