Disqus: usando tags HTML

por Fernando sávio, em 2016-06-06, categorias: Html | Disqus

Tenho visto muita gente “alertando” seus spoilers nos comentários do Disqus de vários sites da seguinte maneira:

[SPOILERS]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis tellus lectus. 
Fusce egestas magna quis ligula tempus scelerisque. Etiam risus nunc, consequat sed 
accumsan vel, rhoncus ut augue. In venenatis elit vitae urna sollicitudin suscipit. 
Mauris vulputate pharetra pellentesque. Mauris a urna nibh. Cras varius pretium erat. 
Duis neque tortor, sagittis vel volutpat vel, maximus nec dui. Mauris vel tellus dui. 
Sed sollicitudin ligula eros, vel ornare elit semper nec.

ou

Spoiler!!!!!
.
.
.
.
.
.
.
.
.
. (aqui teria um "Leia mais")
.
.
.
.
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis tellus lectus. 
Fusce egestas magna quis ligula tempus scelerisque. Etiam risus nunc, consequat sed 
accumsan vel, rhoncus ut augue. In venenatis elit vitae urna sollicitudin suscipit. 
Mauris vulputate pharetra pellentesque. Mauris a urna nibh. Cras varius pretium erat. 
Duis neque tortor, sagittis vel volutpat vel, maximus nec dui. Mauris vel tellus dui. 
Sed sollicitudin ligula eros, vel ornare elit semper nec.

Depois de ver estes comentários fui ao nobre amigo Google para lembrar quais são as tags aceitas pelo Disqus. Foi onde encontrei este post onde mostra as tags aceitas pelo Disqus.

Enfim, decidi documentar aqui no meu blog para facilitar minha vida (e de mais alguém, espero) e também vou deixar um resumo dessas features antes de cada sessão de comentário como uma cola para quem for comentar aqui no blog.

Bora lá, começando pela famigerada tag <spoiler>!

<spoiler>

Código:

Lorem ipsum dolor sit amet, <spoiler>consectetur</spoiler> adipiscing 
elit. Quisque quis tellus lectus.

Resultado:

Resultado para a tag spoiler

<a>

Código:

Lorem ipsum dolor sit amet, <a href="https://mussumipsum.com/">consectetur</a> 
adipiscing elit. Quisque quis tellus lectus.

Resultado:

Resultado para a tag a

<strong> ou <b>

Código:

Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing 
elit. <b>Quisque</b> quis tellus lectus.

Resultado:

Resultado para a tag strong

<em> ou <i>

Código:

Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing 
elit. <i>Quisque</i> quis tellus lectus.

Resultado:

Resultado para a tag em

<strike> ou <s>

Código:

Lorem ipsum dolor sit amet, <strike>consectetur</strike> adipiscing 
elit. <s>Quisque</s> quis tellus lectus.

Resultado:

Resultado para a tag strike

<blockquote>

Código:

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Quisque quis tellus lectus.
</blockquote>

Resultado:

Resultado para a tag blockquote

<pre> e <code>

Código:

<pre><code class="python">
## Fibonacci using recursion
def fib(n):
    if n==1 or n==2:
        return 1
    return fib(n-1)+fib(n-2)

print fib(5)
</code></pre>

Escapando HTML nos códigos:

Código:

<pre><code class="html">
Lorem ipsum dolor sit amet, &#60;strong&#62;consectetur&#60;/strong&#62; 
adipiscing elit. Quisque quis tellus lectus. &#60;strike&#62;Fusce 
egestas&#60;/strike&#62; magna quis ligula tempus scelerisque.
</code></pre>

Resultado:

Resultado para a tag code

PS: as tags <cite>, <span>, <p>, <caption> e <table> não foram incluídas no post por não ter efeito aparente nos testes.