Code Highlighting in Canvas

Although Canvas at WSE does not support native code highlighting tools or plugins, you can still display formatted code by using an external code-to-HTML converter. This allows you to add visually enhanced code blocks in a variety of programming languages directly into your Canvas pages.

Screenshot of a code highlighting tool showing Python code input, generated HTML output, and a preview with syntax highlighting.

How to Add Code to Canvas Using HTML

  1. Convert Your Code
    Use a code-to-HTML converter to transform your code snippet into HTML. There are many free tools online that support syntax highlighting for various programming languages.
  2. Open the Canvas Page
    Log in to Canvas and navigate to the page where you want to add your formatted code. Click Edit to modify the content.
  3. Access the HTML Editor
    In the rich content editor, click the </> icon to switch to the HTML editor.
    Canvas text editor toolbar showing word count, accessibility checker, HTML editor button, and full screen toggle.
  4. Paste the HTML
    Paste the converted HTML code into the HTML editor. Click Save (or Save & Publish) to update the page.
    Canvas page editor showing HTML code for a Python example. The title field is filled in, the HTML editor is active, and options like visibility, publish date, and Save or Save & Publish buttons are visible.

Once saved, your code block should appear with proper formatting and syntax highlighting, giving it a cleaner and more readable look.

Canvas page titled Python Example displaying a formatted and syntax-highlighted Python code block with constants, calculations, and print statements.

Was this article helpful?
0 out of 0 found this helpful