Displaying Code in WonderCMS

There's a Trick to It

You could say that WonderCMS will treat as code anything entered on a page that looks like code. As I wanted to show a number of code fragments in the WonderCMS section of the site, I needed to find a work around for that behaviour. Eventually, with the help of ChatGPT, I came up with the solution outlined below.

Perhaps I phrased the problem poorly as, initially, ChatGPT tried to come up with a JavaScript routine that would achieve my aim. After a few of its attempts, I mentioned something that made it realise that a large part of the solution was to place any code I wanted to display within "textarea" tags.

It suggested some CSS code, which I then tweaked a little to get to appear as I wanted, and added it to my copy of style.css. The code looks like this:

.main textarea.source {
    cursor: text;
    display: block;
    width: 95%;
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 1.2em;
    padding: 0 0.2em;
    margin: 0 1em 1em;
    border: none;
    border-radius: 5px;
    background-color: var(--pagebkgnd);
}

That code alone didn't work prettily for all cases so ChatGPT then suggested a JavaScript routine that calculated an appropriate height for the textarea element. This I added to the bottom of my theme.php file.

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('textarea.source').forEach(function (box) {

        box.value = box.value.replace(/\n$/, '');

        function resize() {
            box.style.height = '0';
            box.style.height = (box.scrollHeight + 2) + 'px';
        }

        resize();
    });
});
</script>

The result can be seen on this page, and everywhere else that code fragments appear on the site. All you do to get a code fragment to appear is to wrap it in the tags below:

<textarea class="source" readonly="">
  code fragment here
</textarea>