Several of our teachers teach coding classes and would love to be able to paste example code into a page and have it look formatted, indented, and color coded. Essentially they want to be able to do what we can do on this Canvas forum like this:
// display prompt box that ask for name and
// store result in a variable called who
var who = window.prompt("What is your name");
// display prompt box that ask for favorite color and
// store result in a variable called favcolor
var favcolor = window.prompt("What is your favorite color");
// write "Hello" followed by person' name to browser window
document.write("Hello " + who);
// Change background color to their favorite color
document.bgColor = favcolor;
Does anyone know of a way to do this in the RCE or maybe a place they can type code that will generate an embed that they can use on the page?
Solved! Go to Solution.
There are two free LTIs you can add to your course (or an admin could add globally, if appropriate) that allow easy embedding/creating of code snippets in the Canvas RCE:
Here is a screenshot of how your code example might look using the Code Embed LTI (which includes customizable colors, language selector, etc.)
thank you David. I sent this nice tip to our own coding instructors who use Canvas and may not know these two apps are available (I didn't). I can see either of these being great practice tools for students.
You might be interested in using GitHub gists to achieve this - a great way to bring authentic, industry standard tools into your teaching. I've just blogged about it here: Embedding a GitHub gist in Instructure Canvas – MSDLT Blog
I find this comment confusing -- Chris Hofer's suggestion is to format the HTML source of a page, while the original poster (OP) Matt Hane was asking for a way to insert code into a page. Aren't those two distinct questions?
While I like Chris Hofer's suggestion, Matt Hane's request is even more important to me, because I teach software classes and having simple ways to format code is very helpful. (For example, Markdown and Microsoft Teams automatically convert `text surrounded by backticks` into code.)
Editing the raw HTML, although inconvenient, works for simple markup. For example, putting the <code>my_variable</code> tag around a variable name renders nicely.
I've used this website before: Source code beautifier / syntax highlighter – convert code snippets to HTML « hilite.me
In addition to creating embeddable HTML code that highlights a variety of languages with options for showing line numbers, I wish it would also auto-format it so the indents were already present. You would have to go to a code beautifier program first if it already weren't properly indented.
If there were an LTI that would bring this into the RCE and auto-format that would be a win-win.
I would also love it if the DocViewer/inline previewer would render entire code files this way. I had an idea for this posted quite a while back but never got enough votes.