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>

There is one rare situation where you can encounter a problem displaying code, It appears in the code display above. If the code you wish to display includes a closing [textarea] tag, and you enter it conventionally, it will be treated for what it is. WonderCMS then treats the actual closing tag as redundant and deletes it, leaving just the first two lines displayed.

The work around I use in this situation is to enter the initial < character of the closing [textarea] tag that is to be displayed as an entity. That's:
& l t ;
(but without spaces seen here between each character). As the page is saved the editor turns the entity into the less than symbol - and all appears as it should. However, be aware that every time the page is opened in edit mode you will need to re-enter the symbol as an entity or you'll find the tag treated as the real one again.