How to show markup color code in my phpbb BBCode

Question

I have default [code] [/code] BBCode on my phpbb forum. But it does not show the color for code's markup. I want to see the exact color for every php, html, css color etc color.

I used bellows code there to create BBCode.

HTML Replacement :

<script type="text/javascript">
// select all function
function selectCode(a)
{
    // Get ID of code block
    var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];
    // Not IE and IE9+
    if (window.getSelection)
    {
        var s = window.getSelection();
        // Safari
        if (s.setBaseAndExtent)
        {
            s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
        }
        // Firefox and Opera
        else
        {
            // workaround for bug # 42885
            if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) == '<BR>')
            {
                e.innerHTML = e.innerHTML + '&nbsp;';
            }

            var r = document.createRange();
            r.selectNodeContents(e);
            s.removeAllRanges();
            s.addRange(r);
        }
    }
    // Some older browsers
    else if (document.getSelection)
    {
        var s = document.getSelection();
        var r = document.createRange();
        r.selectNodeContents(e);
        s.removeAllRanges();
        s.addRange(r);
    }
    // IE
    else if (document.selection)
    {
        var r = document.body.createTextRange();
        r.moveToElementText(e);
        r.select();
    }
}

//expand - collapse settings
function expandcollapse(a) {
    var ee = a.parentNode.parentNode.getElementsByTagName('dd')[0];
    if (ee.style.maxHeight == '200px') 
        { 
        ee.style.maxHeight = '2000px'; 
        a.innerHTML = 'collapse';
        } 
        else { 
            ee.style.maxHeight = '200px';
            a.innerHTML = 'expand';
            };
}

</script>
<![if !IE]>
<script type="text/javascript">
    function scrolltest(k) {
        var eee = k.getElementsByTagName('dd')[0];
        var old = eee.scrollTop;
        eee.scrollTop += 1;

        if (eee.scrollTop > old) {
            eee.scrollTop -= 1;
            k.getElementsByTagName('a')[1].style.visibility = "visible";
        } 
    }
</script>
<![endif]>

<div class="pre" onmouseover="scrolltest(this); return false;">
    <dt class="pre_header">
        <b>Code: </b>
        <a href="#" onclick="selectCode(this); return false;">Select all</a>
        <a style="float:right; visibility:hidden;" href="#" onclick="expandcollapse(this); return false;">expand</a>
    </dt>
    <dd style="max-height:200px; overflow:auto;">
        <code>
            {TEXT}
        </code>
    </dd>
</div>

Answer 1

If you're looking for a syntax highlighter, check out this phpbb plugin/mod:

http://sourceforge.net/projects/geshi-phpbb/

Read GeSHi for more.