Inserting Code Snippets

NOTE: This article is intended for faculty users at Champlain College. Some of these instructions will not work for non-Champlain users because they are dependent on how Canvas is set up at your institution. The Canvas <code> tag/code format option is available in all Canvas instances.

Formatting code in a Canvas course can be hard and frustrating.  The following are a series of techniques that this article will cover.

Three techniques are covered:

1. Code inside of a paragraph of normal text
2. Placing the code directly in Canvas (supports most languages)
3. Using Repl.it for programming language examples that can be run directly from the browser (supports most languages)

Code inside of a paragraph of normal text 

If you need code that is in the middle of a paragraph of normal text, then you should use the <code> tag. This option is now available directly in the Canvas Rich Content Editor under the “Format” menu, so there is no need to edit the html directly.

Placing the code directly in Canvas

We have integrated prism.js into our Canvas instance at Champlain College.  This allows for code snippets to be syntax highlighted and optionally have line numbers present.  This design ensures that when students copy and paste code that the line numbers are omitted from the code the students copy.

If you want to include a block of code in Canvas:

1. Switch to the html editor in Canvas, found via the </> icon to the lower right of the Rich Content Editor
2. Because your code is the content of an html document, you need to escape any special html characters (mainly the ‘<’ symbol).  This is quick and easy to do using a tool like: http://htmlencode.net/
3. Use <pre><code> tags to surround your code
4. For the <pre> tag you can optionally add class=”line-numbers”. This will add line numbers to your code and these line numbers will not be copied if students copy and paste snippets.
5. For the <code> tag you should add class=”language-python”. You should replace python with whatever language your code is written in.

Example:

<pre class="line-numbers">
   <code class="language-css">
      p { color: red }
   </code>
</pre>

Will yield:

The following language classes are supported:

• language-markup – Use for HTML, XML, etc…
• language-css
• language-clike
• language-javascript
• language-java
• language-php
• language-scss
• language-bash
• language-python
• language-sql
• language-https
• language-csharp
• language-aspnet
• language-scala
• language-haskell
• language-objectivec
• language-latex
• language-git

(If you need to format a different language, please make a support request so we can add support.)

Using Repl.it for programming language examples that can be run directly from the browser

You can embed iframes from Repl.it directly into Canvas. This allows you to have fully functional code, potentially consisting of multiple files and complex projects and have this executable and forkable directly inside of any Canvas page, assignments, etc.

The process is very simple.  From the share button in Repl.it you can choose the option to “copy embed code”. When you cut & paste this code into the html editor in Canvas, you can adjust the width to be percentage based (100% is the recommended width).  The height needs to be set in terms of pixels, generally a little trial and error will allow you to determine the appropriate height for your particular content.

You can read more about the options for embedding repl.it projects in their official documentation: https://docs.replit.com/repls/embed