Code Embed

Welcome to Code Embed!

Code Embed is a tool that lets you embed a code editor in an LMS such as Canvas, Blackboard, or Moodle.

Install

The tool can be installed as an LTI application in your LMS of choice. Code Embed has only been thoroughly tested in Canvas, but it should work in any LMS that implements the LTI standard.

Canvas

  1. Navigate to the Settings panel for a course that you administer
  2. Enter the Apps section of the Settings panel
  3. Find Code Embed in the list of External Apps (you may type "Code Embed" in the filter field) and click on it
  4. Click Add Tool and you should be all set!

Alternatively, to configure the tool manually, perform the first two steps above and then:

  1. Click View App Configurations
  2. Click Add New App
  3. Enter whatever you would like for the Name, Consumer Key, and Shared Secret (any key/secret is accepted by Code Embed)
  4. Select "By URL" for the Configuration Type
  5. For the Configuration URL, enter "https://code-embed-lti.herokuapp.com/tool_config.xml"
  6. Click Submit!

Other LMS

Please let us know if you have tried Code Embed in a different LMS with or without success. We would love to hear any feedback you may have regarding other environments.

Use

Canvas

Code Embed may be used in Canvas in two main ways: via an editor button and via resource selection.

Editor Button

To use Code Embed in Pages, Assignments, Quizzes, or any other feature that utilizes the rich content editor, you may use Code Embed's editor button. Note that Code Embed cannot at this time be used for students to submit their own code. It can only display code that it is initally configured to display (like sample code). Allowing students to submit code for assignments and quizzes would be awesome, but it's a feature we haven't gotten to yet, which is why we'd love your help!

After installing Code Embed, simply enter edit mode for any resource that uses the rich content editor and:

  1. Click the Code Embed editor button (Code Embed icon) in the toolbar
  2. Enter the code you would like displayed in the code editor
  3. Select the language for your code (or select Text for plain text)
  4. Set the theme, font size, and other settings as you see fit, keeping in mind that you won't be able to change these later
  5. Click Embed this code!
  6. A placeholder will appear in the rich content editor where your embedded code will appear. You may resize the placeholder as needed to set the size of the code editor.
  7. Click Save Changes and you should be all set! (Note that there is a bug in Canvas where the embedded code will not appear after clicking Save Changes. Simply refresh your browser and it will appear.)

Resource Selection

Resource selection allows you to use Code Embed in Canvas features such as Modules. We won't cover the exact steps for this as it's not a popular use case, but it is pretty straightforward to do.

Homework Submission

Coming soon! It may work now, but it needs more testing. We'll post instructions here as soon as it's available.

Other LMS

You should be able to use Code Embed in its most basic form as a standard LTI tool in any LMS that supports LTI. Again, please let us know if you have tried this as we haven't tested it out yet.

Contribute

Code Embed is open source! We would love your help to improve it and add more functionality. If you are interested in contributing or just have some cool ideas, please fork us on GitHub or get in touch with us! If you found a bug, please file an issue on GitHub and we'll do our best to fix it.

Contact

Hi there! I'm Jake Stoeffler, the author of Code Embed. Whether you need help with Code Embed or just want to say hi, I'd love to hear from you! Feel free to get in touch using any of the following outlets:

Thanks for stopping by!