4

Olá! Tenho um fórum e, nas publicações de meus usuários, eles podem adicionar códigos para exibi-los utilizando a tag bbcode [code][/code].

Eu gostaria de saber como fazer para estilizar o código, igual acontece aqui no SOpt. Exemplo: Qualquer código que eu insira, ele irá aplicar cores, independente de ser php, html, javascript....

Abaixo, uma imagem do meu exibidor de códigos, atualmente: inserir a descrição da imagem aqui

Como eu gostaria que fosse:

inserir a descrição da imagem aqui


Minhas perguntas principais são:

  • Como fazer isso
  • Existe alguma biblioteca pronta que eu possa fazer uso?
  • Isso deixará o carregamento da página mais lerdo/comprometido?

1 Resposta 1

4

Isso chama-se Syntax highlight e há bibliotecas que fazem isso. Podes fazer isso no servidor ou no lado do cliente, de preferência assíncrono.

Um exemplo, usando a biblioteca highlight.js seria assim (com o código dentro de tags pre e code):

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();

</script>

<pre><code>
function teste() { 
    return 123;
}

var nr = teste();
console.log(nr);
</code></pre>

Outro exemplo com Prism.js

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.js"></script>

<pre><code class="language-js">
function teste() { 
    return 123;
}

var nr = teste();
console.log(nr);
</code></pre>

Depois podes defenir as core mais ou menos ao teu gosto.

2
  • 1
    Mais uma vez você respondendo exatamente o que eu desejava. Muito obrigado pela resposta e parabéns pelo bom desempenho! Commented 26/08/2017 às 15:38
  • 1
    @VME ótimo que pude ajudar!
    – Sergio
    Commented 26/08/2017 às 15:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .