Usando HyperLite

Usando HyperLite em suas postagens

Entenda a linguagem HyperLite e veja como utilizá-la para formatar e decorar suas postagens.

Introdução

A Linguagem HyperLite é a segunda linguagem de marcação hipertexto original e recomendada para as postagens escritas e publicadas no HyperFluxCMS.

HyperLite é uma linguagem que é inspirada em outras linguagens de marcação tradicionais como MarkDown, MediaWiki e WhatsApp.

Ela foi desenvolvida para ser poderosa, cobrindo as necessidades de pelo menos 80% dos sites, e ao mesmo tempo mais simples do que HyperCode e muito mais simples do que HTML.

Exemplo de página formatada com HyperCode.

Ao instalar o HyperFluxCMS, algumas páginas são criadas automaticamente no seu site. Uma dessas páginas de chama "Demonstração HyperLite" e contém exemplo de várias tags HyperLite em ação. Estude esta página e faça experimentos, para conhecer melhor o comportamento da página mediante o código.

Se você já apagou o página ou não tem acesso a ela, pode conferir ela aqui:

Demonstração HyperLite

e o código-fonte aqui

Código-fonte da Página Demonstração HyperLite

Acentuação, Quebra Automática de Linhas e Símbolos,

Esses tópicos são tratados em outras partes da documentação e valem a pena serem consultados para entender como o HyperCode trata desses assuntos.

Acentuação
Símbolos Especiais
Símbolos Especiais em HyperLite
Quebra Automática de Linhas em HTML.
Evitando Quebra Automática de Linhas.

Sintaxe

HyperLite é baseada na inserção de símbolos comuns no texto, facilmente acessíveis pelo teclado como *, /, ~, etc., a fim de indicar o processador/compilador de que naquele ponto se insere um objeto ou se inicia um bloco de texto com determinada característica.

O HyperLite pode ser usado em conjunto com as outras duas linguagens suportadas pelo HyperFluxCMS: HyperCode e HTML, para complementar a formatação ou decoração do texto com funcionalidades não cobertsas pelo HyperLite.

HyperLite é extremamente simples de usar e possui uma sintaxe limpa que, ao contrário do HTML, não polui visualmente o texto, tornando a leitura do código original quase tão fluida como se fosse texto puro.

Marcação

Uma marcação começa com um dos símbolos especiais de marcação, que serão listados mais adiante.

Por exemplo, um asterisco * indica que o texto daquele ponto em diante deverá ser mostrado em negrito, até que se encontre uma marcação de fim de negrito.

A marcação de FIM de uma propriedade é exatamente igual à marcação de início; um bloco de negrito, marcado com *, termina e deixa de ser negrito ao encontrar outro *; um bloco de itálico, marcado com /, termina e deixa de ser itálico ao encontrar outro /; e assim sucessivamente.

é mostrado como

Este é um texto em negrito.

Para facilitar a edição do texto e evitar muitas Sequências de Escape (veja a seguir), NEM SEMPRE um dos caracteres de marcação é considerado como um caractere de marcação.

O HyperLite foi projetado tendo em vista minimizar a necessidade de sequências de escape, considerando os caracteres como caracteres comuns, literais, na maior parte das situações em que ele seria encontrado em um texto comum verdadeiro.

Caracteres de marcação de Blocos: |*_~/^, são considerados como marcação se eles seguirem pelo menos uma das seguintes condições:

para INICIAR um bloco:

• se não está escapeado; e
• se é o primeiro caractere do texto; ou
• se é o primeiro caractere da linha; ou
• se é o primeiro caractere depois de um espaço; ou
• se é o primeiro caractere depois de outro símbolo de marcação; ou
• se é o primeiro caractere depois de alguns símbolos como (.

para TERMINAR um bloco:

• se não está escapeado; e
• se é o último caractere do texto; ou
• se é o último caractere da linha; ou
• se é o último caractere antes de espaço ou dos símbolos ,, ., :, ; ou ); ou
• se é o último caractere depois de outro símbolo de marcação; e
• se há um bloco respectivo iniciado.

Caracteres de marcação de parágrafo: ., ;, # são considerados como marcação se eles seguirem pelo menos uma das seguintes condições:

• se não está escapeado; e
• se é o primeiro caractere do texto; ou
• se é o primeiro caractere da linha;

Em outras condições, os caracteres são considerados caracteres literais que são exibidos normalmente para o visitante do site e não alteram a formatação ou comportamento da página.

Por exemplo, o texto A Páscoa de 2025 cairá em 20/04/2025 é exibido normalmente como A Páscoa de 2025 cairá em 20/04/2025, pois o símbolo / nesse caso não cumpre os requisitos para ser considerado símbolo de marcação e é tratado como um caractere normal.

Aninhamento de marcações

Assim como em HTML ou HyperCode, um bloco com determinada marcação de formatação pode conter, dentro dele, um bloco com marcação de formatação, que, por sua vez, pode conter um bloco com marcação de formatação.

Por exemplo:

é um código válido e é renderizado como
Este texto está em itálico e agora também em negrito e agora também está sublinhado, mas agora não está mais sublinhado, só em negrito e itálico, e a partir daqui está somente itálico.

A especificação do HyperLite exige que o fechamento dos blocos seja feito sempre seguindo a ordem inversa da abertura. O último a abrir deve ser o primeiro a fechar.

No exemplo acima, a sequência foi:

1. iniciou itálico
2. iniciou negrito
3. iniciou sublinhado
4. terminou sublinhado
5. terminou negrito
6. terminou itálico.

Sequências de Escape

Uma coisa que merece uma atenção especial de quem for editar uma página do HyperFluxCMS usando HyperLite é que ele usa uma variedade relativamente grande de caracteres, e para cada um deles que aparecer ao longo do texto em uma condição em que possa ser entendida como símbolo de marcação, será necessário fazer uma "sequência de escape", inserindo o símbolo contrabarra \ imediatamente antes dela, para que o processador entenda que ele faz parte do texto, e não da marcação.

Por exemplo, o caractere barra /, que normalmente indicaria que o texto a seguir deve ser exibido em itálico, mas nesse caso deve ser mostrado como barra comum, deve ser precedido por \, ficando \/.

Exemplo, no texto 1 * 2 * 3, que seria renderizado como 1 2 3|

se quisermos que os asteriscos sejam tradados como simples asteriscos, devemos usar sequência de escape. Assim: 1 \* 2 \* 3

Já se fosse 1*2*3 sem espaços antes e depois dos asteriscos, não há necessidade de escapear, já que a posição dele no texto não cumpre nenhum dos requisitos para ser considerada símbolo de marcação.

Marcação de Texto

Os símbolos a seguir marcam início e fim de uma característica na formatação do bloco de texto

*: Asterisco indica texto em negrito:

é renderizado como Este é um texto em negrito

/: Barra comum indica texto formatado como itálico:

é renderizado como Este é um texto em Itálico

_: Underscore, Underline, indica texto formatado como sublinhado:

é renderizado como Este é um texto sublinhado

~: Til indica texto riscado:

é renderizado como Este é um texto riscado

^: Acento circunflexo indica texto destacado:

é renderizado como Este é um texto destacado

|: Barra vertical indica texto formatado como código:

é renderizado como Este é um texto em Código

Marcação de Títulos e Subtitulos

O caractere # (quadrado, jogo-da-velha, mosca, lasanha, cerca, cerquilha, grade) é usado para indicar que o texto a seguir se trata de um título ou subtítulo de uma seção da página.

Ele só tem valor de marcação quando é o primeiro caractere de uma linha ou da página. Em outras situações ele é considerado um caractere normal.

O número de # seguidos indica o nível do título/Heading da página.

• Nível 1 (com só 1 #) é o mais alto, em que o titulo aparece maior e com mais destaque.
• Nível 2 (com só 2 #) é um subtítulo, um pouco mais baixo que o de nível 1 e aparece menor e com menos destaque.
• A lógica segue até o nível 6, que é o subtítulo de menor valor.

Exemplo:

é renderizado como

Cardápio

Pizzas

Pizzas Tradicionais

Pizzas Especiais

Note que, ao contrário das marcações de bloco, a marcação de titulos e subtitulos não tem fechamento. Uma linha que comece com ela considera como título todo o conteúdo da linha e é delimitado pelo fim dela.

Listas

O HyperLite tem suporte a dois tipos de linhas: ordenadas e não ordenadas.

As listas ordenadas são aquelas que tem um numero sequencial em cada item. Por exemplo, os passos para se fazer um bolo, que obrigatoriamente seguem uma ordem. Já uma lista não ordenada normalmente tem "bolinhas" e indicam itens que não tem uma ordem definida, como uma lista de compras.

Uma lista não ordenada é criada em HyperLite com uma série de linhas consecutivas iniciadas com ponto ..

Exemplo:

que é renderizado como

Comprar:

• Pão
• Leite
• Queijo
• Óleo

Uma lista ordenada é criada em HyperLite com uma série de linhas consecutivas iniciadas com ponto-e-vírgula ;.

que é renderizado assim:

Como preparar um miojo:

1. coloque dois copos de água em uma panela;
2. leve ao fogo e espere ferver;
3. adicione o macarrão do pacote;
4. espere por 3 minutos;
5. tire do fogo;
6. adicione o conteúdo do pacote de tempero.
7. mexa bem e sirva quente.

Note que você não precisa e nem deve colocar os números na frente dos itens. O sistema insere os números automaticamente.

Os caracteres . e ; só têm valor de marcação quando são o primeiro caractere de uma linha ou da página. Em outras situações são considerados caracteres normais.

Links

Para inserir um link em HyperLite, usa-se o caractere arroba @; a letra "L" maiúscula ou minúscula; o símbolo ":"; e a URL absoluta ou relativa do link; tudo isso sem espaços nem quebra de linha. Depois de terminar a URL, deve haver um espaço, quebra de linha ou outro separador.

Um link pode ser um endereço de e-mail, uma página dentro do próprio site, um arquivo para download ou uma página ou site externo.

A URL pode conter explicitamente o esquema (http, https ou mailto) ou, se omitido, o HyperFluxCMS infere de acordo com o link.

• Links que pareçam ser e-mail, no formato "qualquer-coisa @ algum-site" são presumidos como sendo e-mails e são tratados como "mailto:"
• Outros demais links são presumidos como sendo "https://"

Exemplos:

Por causa do "@", presume que é um endereço de e-mail e cria um link para envio de e-mail com o destinatário "johndoe@nowhere.com"

Por causa do "mailto:", explícito, assume sem dúvidas de que se trata de um endereço de e-mail e cria um link para envio de e-mail com o destinatário "johndoe@nowhere.com"

Como não há o esquema nem um "@", presume que é um endereço HTTPS e cria um link para a url "https://hyperfluxcms.com".

Como foi explicitamente informado o protocolo HTTP, cria um link para a url "http://hyperfluxcms.com".

Como foi explicitamente informado o protocolo HTTPS, cria um link para a url "https://hyperfluxcms.com".

Imagens

Para inserir uma imagem HyperLite, usa-se o caractere arroba @; a letra "i" maiúscula ou minúscula; o símbolo ":"; e a URL absoluta ou relativa da imagem.

Opcionalmente, pode-se incluir parâmetros adicionais para gerar miniaturas, "thumbnails" das imagens.

Ainda pode-ser informar o tamanho de exibição da imagem na página.
tudo isso sem espaços nem quebra de linha. Depois de terminar a URL, deve haver um espaço, quebra de linha ou outro separador.

Assim, o texto

insere no local indicado a imagem chamada "logo.png" da galeria do site.

Como padrão, a imagem inserida é renderizada no tamanho em pixels do próprio arquivo de imagem. Por exemplo, uma imagem cujo arquivo tenha 800 x 400 pixels será inserida com esse tamanho na página (podendo ser escalada para mais ou para menos dependendo do dispositivo e navegador utilizados).

É possível explicitar a largura desejada da imagem usando o caractere barra vertical | após o nome do arquivo (sem espaços) e a dimensão desejada; O mesmo para a altura usando outra barra vertical | e dimensão.

É possível utilizar qualquer uma das unidades de medida válidas para tamanho de elementos em HTML: px (pixels), pt (points), % (porcentagem), etc.

Se as duas medidas forem informadas (que inclusive podem estar em unidades de medida diferentes), a imagem será mostrada obedecendo os valores informados. Se os valores não forem exatamente iguais ao tamanho real da imagem, ela será esticada ou encolhida para ocupar o espaco especificado.

Se as medidas informadas não forem 100% proporcionais às dimensões reais da imagem, ela será distorcida, esticada ou comprimida perdendo a proporção. Isso não é exclusividade do HyperLite, e sim uma característica previsível e desejável própria do HTML e dos navegadores.

Se somente UMA das dimensõs (largura OU altura) for especificada, a imagem será exibida com a largura ou altura informada e a outra dimensão não informada será calculada automaticamente de forma a manter a proporção da imagem.

Exemplos:

Dimensões não informadas. Mostra a imagem logo.png em seu tamanho original

Largura e altura informadas. Mostra a imagem logo.png com tamanho de 400 x 300 pixels, esticando ou comprimindo a imagem se for necessário.

Largura e altura informadas. Mostra a imagem logo.png com tamanho de 100% da largura do elemento pai da imagem e 300 pixels de altura, distorcendo e esticando a imagem se for necessário.

Somente largura informada. Mostra a imagem logo.png com largura de 400pt e altura calculada automaticamente para manter a proporção sem distorcer.

Largura em branco e altura informada. Mostra a imagem logo.png com altura de 300pt e largura calculada automaticamente para manter a proporção sem distorcer.

É possível usar Miniaturas Automáticas. Veja mais em Miniaturas.

Exemplo:

Âncoras

Para inserir uma âncora em uma postagem usando HyperLite, @; a letra "a" maiúscula ou minúscula; o símbolo ":"; e o id da âncora.

Por exemplo, @a:history cria no local uma âncora com Id "âncora".

Para entender âncoras, veja Âncoras em Hypercode

Conclusão

Estas são as marcações de texto usando HyperLite. É possível criar títulos, subtítulos, inserir links e imagens, criar listas e formatar texto em diversos atributos como itálico, negrito, destacado, etc.

O uso de HyperLite não sobrecarrega o código com tags complicadas, difíceis de entender, não requer que se decore nomes de tags, mantém a sintaxe simples, compacta e sem atrapalhar a leitura do texto dentro do código.

Mesmo assim, o HyperLite é suficiente para pelo menos 80% dos casos. Mas em casos que os elementos de marcação HyperLite não sejam suficientes, é possível usar as Tags HyperCode ou mesmo HTML.

Lembre-se que o HyperFluxCMS permite que se utilize duas ou mesmo as três linguagens de marcação simultaneamente na mesma página. Dessa forma você conseguirá manter seu código Limpo, Leve e Legível.

Veja também:
Usando HTML no HyperFluxCMS
Usando HyperCode no HyperFluxCMS