cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Advocate
Community Advocate

Pasting Code Into A Page

Jump to solution

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?

20 Replies
Highlighted

It doesn't look like the Code Embed LTI is available in the eduappcenter anymore. 

0 Kudos
Highlighted

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. 

0 Kudos
Highlighted

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.

0 Kudos
Highlighted

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.

0 Kudos
Highlighted

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.) 

0 Kudos
Highlighted
Surveyor

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 

Highlighted

dlyons@instructure.com

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.

Highlighted
Community Advocate
Community Advocate

Yes! Thank you!

Highlighted

This is a great solution! Thanks for posting about these dlyons@instructure.com​.

Highlighted
Instructure
Instructure

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.)

Screenshot 2015-09-11 09.09.20.png