The Instructure Community will enter a read-only state on November 22, 2025 as we prepare to migrate to our new Community platform in early December. Read our blog post for more info about this change.
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:
<HTML>
<HEAD>
<TITLE> Hello World in Javascript </TITLE>
</HEAD>
<BODY>
<h2>Example 1</h2>
<script language="Javascript">
// Hello in Javascript
// 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;
</script>
</BODY>
</HTML>
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.
Hi Matt,
Would W3Schools Try it Yourself be a possibility: W3Schools Online Web Tutorials using this Whitelist as a reference?
https://s3.amazonaws.com/tr-learncanvas/docs/Canvas_HTML_Whitelist.pdf
Joe
I'm looking for something they could actually embed into their Canvas page.
Which I already voted for! I wish I could vote for it a million times.
Me too!
Love this - I just voted for it too!
Another vote up!
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.)
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.
@themidiman wrote:If there were an LTI that would bring this into the RCE and auto-format that would be a win-win.
There is a LTI in the edu-app store that allows you to paste in code and have it syntax highlighted: https://www.eduappcenter.com/apps/6199
It allows you to paste in code and detects the language, syntax highlights it and outputs HTML that Canvas allows through it's filtering:
Have I misread your question? If so, ignore my answer.
When your use the "Edit" feature in any Canvas area that includes an RCE (Pages, Syllabus Description, Discussion, Assignment instructions, and Quiz questions) there is always an HTML Editor in the background. By switching to the HTML Editor, you can paste code on a page to accomplish both formatting and content creation including embedding. There are some limitations of the tags permitted, and executable Java scripting is stripped out by the background global Canvas code; but you can still accomplish some fairly amazing things.
Check out: What is the Rich Content Editor?
Also, we have a Canvas Hacks Demo Course that we can enroll you in with many tips, tricks and techniques for using code in Canvas. Shoot me an email if you want to be enrolled in this.
I hope this helps.
Yes, I must not be very good at explaining what I'm looking for. @Chris_Hofer 's idea is exactly what I'm looking to be able to do for our coding teachers so they can paste example code onto a page that is marked up and formatted instead of just plain text.
Thanks for the clarification, @MattHanes .
Yes, several of us are looking for a built-in code formatter!
I find this comment confusing, too for the same reasons stated above. Chris Hofer's idea seems to be quite different to me than what you are suggesting here.
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.
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.)
This is a great solution! Thanks for posting about these @dlyons .
Yes! Thank you!
@dlyons
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.
It doesn't look like the Code Embed LTI is available in the eduappcenter anymore.
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
Community helpTo interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign inTo interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in
This discussion post is outdated and has been archived. Please use the Community question forums and official documentation for the most current and accurate information.