To help me keep things consistent, I created a page just for housing snippets of code I regularly use so I could copy and paste it. For the code itself, I put the code onto the page, then highlight and change the font from "Paragraph" to "Preformatted" so it stands out on the page. I actually set multiple pages aside in a separate course blank (easier for my workflow to manage) for various design elements. I have page with specific color codes, another with preformatted code, another for specific things I do that are not in the Canvas editing menu...you get the idea.

Here is an example of what the "preformatted" option looks like using a sample I use that makes the horizontal rule option in the editing menu thicker and a different color:

<hr style="border-top: 2px solid #ee7623;"/>

At least in terms of helping keep things consistent, this is a solution I found works for me. If you are having issues with the button itself, can you share the code you are using and what has been the problem? That will help us better assist you.