Skip to main content
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

Authors can demonstrate code authoring in a course by using our native Code snippet or embedding code from:

  • Codepen

  • Gist

  • JS Fiddle

To add code, when you are editing a page, select the + then Code to see the options.

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

How to add a Code snippet

Select Code Snippet, add 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.

How to embed code from Codepen, Gist, or JSFiddle

To embed code from Codepen, Gist, or JSFiddle, select your chosen editor.

Once selected, a screen will appear prompting you to add the following:

  • Your copied embed code.

  • Source URL for your code editor.

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

  • Attribution to credit the author/owner of the code.

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

Save to view your code.

Did this answer your question?