How to add code snippets to your course

Authors can embed code snippets hosted elsewhere in a course.

Michele de Bes avatar
Written by Michele de Bes
Updated over a week ago

If you are wanting to demonstrate code authoring in a course, you can embed code from the following editors (or use our native code snippet):

  • Codepen

  • Gist

  • JS Fiddle

To do this select the Task bar in Create (using the + icon). Select Code to reveal the drop down menu.

Image of the Task bar menu with the Code icon selected, and a drop down menu revealed.

Code Snippet

Select Code Snippet to reveal the Code Snippet Settings box. Input your code, and select Save. Your code will be embedded into your course.

Screenshot showing Code Snippet Settings and code in a dialogue box.

Image of a code snippet saved in the body of a course.

Codepen, Gist, and JSFiddle

To embed code from Codepen, Gist, or JSFiddle, select the appropriate editor from the drop down menu. Once selected a screen will appear prompting you to add the following:

  • A field to paste your embed code.

  • The course URL for your code editor.

  • A field to enter the height of the display area for the code (maximum height is 600px, and then a scrollbar will appear).

  • An attribution field if you wish to credit the code to someone.

Screenshot of the Codepen code editor settings with four input fields as described in the bullets above.

Once you have completed the required fields, select Save to view your code task.

Did this answer your question?