Show codes for user

Question

Hello! I have one forum and, in publications of my users, they can add codes to display them using the bbcode tag [code][/code].

I’d like to know how to make stylize the code, as it happens here in Sopt. Example: Any code I insert, it will apply colors, regardless of being php, html, javascript....

Below is an image of my code display currently:

How I wish it were:

---

My main questions are:

• How to do this
• Is there any library ready that I can use?
• This will slow/compromise page loading?

Answer 1

That’s called Syntax Highlight and there are libraries that do that. You can do that on the server or client side, preferably asynchronously.

An example, using the library Highlight.js would look like this (with code inside tags pre and 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>

Another example with 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>

Then you can sort out the core to your liking.