Hi there, @KellyElliott ...
This one really has me stumped. From your screenshots, it looks like you are using the brackets correctly. I just tried copying/pasting in the example "Roses are red, violets are blue" text again, and it worked just as it should. I even looked at the HTML this time (since you had also posted your HTML view), and my code looks like this:
<p><span>Roses are [color1], violets are [color2]</span></p>
Other than the "span" text, your HTML is pretty much the same.
Have you tried reaching out to Canvas tech support to see if they have any suggestions for you? That's what I would suggest next. If you contact tech support, please let us know what you find out. Thanks!