Format a code block into Canvas.

[dawilson1]

I wanted to format a code block and inline code onto a Canvas page. See the examples below.

Is there an easy way to do this?

Thanks.

Dawn

[kona · Accepted solution]

 @dawilson1 , greetings! Due to the technical nature of this question, I'm going to share this with the Canvas Developers‌ group in the community. Hopefully, they'll be able to help!

Kona

[pflickin · Accepted solution]

With canvas, you can go to edit the HTML of a page. From there you can use <code> and <pre> tags to create coding snippets. For an inline just use <code>Some Code</code> or block use <pre><code>line of code</code></pre>. This won't give you the styling but it will get the idea of code across. 

There are also websites which will generate code blocks with styling. 

Reference: 

https://stackoverflow.com/questions/4611591/code-vs-pre-vs-samp-for-inline-and-block-code-snippets

[kona · Accepted solution]

 @dawilson1 , greetings! Due to the technical nature of this question, I'm going to share this with the Canvas Developers‌ group in the community. Hopefully, they'll be able to help!

Kona

[pflickin · Accepted solution]

With canvas, you can go to edit the HTML of a page. From there you can use <code> and <pre> tags to create coding snippets. For an inline just use <code>Some Code</code> or block use <pre><code>line of code</code></pre>. This won't give you the styling but it will get the idea of code across. 

There are also websites which will generate code blocks with styling. 

Reference: 

https://stackoverflow.com/questions/4611591/code-vs-pre-vs-samp-for-inline-and-block-code-snippets

[James]

To build off what  @pflickin  said ...

You can invoke the preformatted and code elements without going to HTML mode.

Preformatted is available from the same drop select field as paragraph and the headings.

For the code element, press Alt+F9 within the Rich Content Editor to display the menu. Then go to Format and choose code.

Canvas does not natively support syntax highlighting. You'll have to work with a Canvas Admin to load one of the libraries for this through the Custom Global JavaScript. It then gets loaded for everyone, not just the people in your class, so the Canvas Admin may not be willing to do this.

When you take the code that from the website Peter mentioned, be aware that much of it will be stripped out since it's unsupported by the Canvas HTML Whitelist. Enough of it works to mimic the syntax highlighting. But this approach is usable even if you can't get the Canvas Admin to add a syntax highlighter to Canvas.

[sueharlan · Accepted solution]

 @James - Any advice or experience having students paste programming code into a Canvas quiz text box while using Respondus lock down browser (which strips the formatting)? Is there a way to add a basic text editor to the RCE? Thanks!

[James]

I don't use lockdown browser or have students submit code through Canvas, so I don't have any experience with this specifically.

The preformatted tag would be the obvious suggestion, but if you change the style to preformatted, then when you paste, it strips all the spacing. What I've done with some success is to turn on the preformatted from the style dropdown, then switch to the HTML editor and paste the code inside the pre element. Then it retains the spacing.

I still do not know if this will work with lockdown browser or not.

[sueharlan]

Thanks for the suggestion. I'll give it a try!

[dextersd]

Hello--reviving this thread as I'm having some related issues using <pre> and <code>. Specifically, when I use these in the text of an Assignment, the result is beautifully formatted. But, when I view the Assignment as Test Student (or when one of my students views it), the formatting is substantially lost. Most alarming, code that should be presented across several lines is presented on a single line, even though the <pre> tag should preserve line breaks.

Interestingly, this does not happen with Pages (the formatting is fine for both instructor and student).

My suspicion is that something in the JavaScript/AJAX code that presents an Assignment to a student is stripping out all linebreaks, so that the content of the <pre> element is 'corrupted' by the time it's rendered as HTML. (My local Canvas gurus think this a reasonable suspicion, though none of us are certain.)

I'm very new to Canvas, though, so I hope I'm missing something! Can anyone offer guidance and/or a workaround? Thank you!

[wyelearning]

@dawilson1 We have a syntax highlighting plugin for the Canvas Rich Text Editor that allows you to paste in code, select the theme and have a syntax highlighted version of the code inserted into the rich text area. If you are interested there are instructions on setting it up in your Canvas installation on: https://www.wyelearning.com/support/code-highlight/

The output is fully self contained and embedded in the page in Canvas so there are no external dependencies. This is an example of how a snippet of code can look when embedded in the page and there are lots of themes to choose from.

[luisluis108]

Thank you so much @wyelearning , this is amazingly useful as our class will be seeing lots of code in their different modules.

Hope you are great,

Best,