cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
dawilson1
Community Member

Format a code block into Canvas.

Jump to solution

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

314527_Screen Shot 2019-06-04 at 10.36.06 AM.png

314528_Screen Shot 2019-06-04 at 10.35.50 AM.png

Is there an easy way to do this?

Thanks.

Dawn

Tags (1)
3 Solutions

Accepted Solutions
kona
Community Coach
Community Coach

 @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

View solution in original post

0 Kudos
pflickin
Community Member

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

View solution in original post

sueharlan
Community Participant

 @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!

View solution in original post

0 Kudos
9 Replies
kona
Community Coach
Community Coach

 @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

View solution in original post

0 Kudos
pflickin
Community Member

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

View solution in original post

James
Community Champion

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
Community Participant

 @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!

View solution in original post

0 Kudos
James
Community Champion

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
Community Participant

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

dextersd
Community Member

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
Community Participant

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

wyelearning_0-1630746309985.png

 

 

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,