(dica) mostrar/ocultar texto
Como ocultar/mostrar texto
Como alguém que usa(va) bastante o Obsidian para fazer anotações, um recurso que aprendi a usar e amar foi o de ocultar/mostrar anotações. O Obsidian também é baseado em formatação markdown, mas infelizmente isso não quer dizer que todas as suas formatações se apliquem aqui no Bear Blog - aparentemente cada sistema pode usar markdown como lhe convém. Tipo, liberdade criativa, como assim?? Quero rebelião!
Por isso, para poder usar essa formatação, usamos um recurso diferente, dessa vez no HTML: a tag de details e summary. (Também é possível criar essa utilidade usando javascript, mas eu não tenho dinheiros pra pagar o Premium e liberar essa função por aqui, então vai na modalidade pobre mesmo :P)
Para criar esse "botão" (essa função também pode ser chamada de toggle, caso você deseje procurar mais a respeito), vamos fazer:
<details>
Daí aqui no meio você coloca o texto que deseja que possa ser ocultado/exibido de acordo com a vontade do leitor!
</details>
O resultado:
Daí aqui no meio você coloca o texto que deseja que possa ser ocultado/exibido de acordo com a vontade do leitor!
Como dá pra ver, no entanto, o nome do botão fica "details", o que não é muito interessante pra gente, já que perde parte da naturalidade do texto. Para corrigir isso, adicionamos a tag de summary, que nos permite nomear o botão. Fica assim:
<details>
<summary> Spoilers!!! </summary>
Aí aqui colocamos o texto! Bem simples, mas com um efeito legal, né?
</details>
O resultado:
Spoilers!!!
Aí aqui colocamos o texto! Bem simples, mas com um efeito legal, né?
Para ter um efeito bonitinho, podemos usar outras formatações como a de alinhamento de texto. Nesse caso é só fazer a configuração de acordo com a formatação desejada.
Exemplo:
<div style="text-align:center;"><details>
<summary> Anotação </summary>
<p style="text-align:justify;"> Nesse caso, eu quis que a área a ser oculta/mostrada ficasse centralizada, mas que o texto dentro dela fosse justificado, então criei uma div geral (centralizada) e depois botei um parágrafo específico (justificado).</p>
<p style="text-align:justify;font-weight:bold;">Sempre lembrando de abrir e fechar tags!!</p>
</details>
</div>
Resultado:
Anotação
Nesse caso, eu quis que a área a ser oculta/mostrada ficasse centralizada, mas que o texto dentro dela fosse justificado, então criei uma div geral (centralizada) e depois botei um parágrafo específico (justificado).
Sempre lembrando de abrir e fechar tags!!
Bem legal, né?
Por hoje é só, pessoal! \o