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

Add programming language code to pages

Trying to add formatted and colorized programming language code to pages in Canvas.  Anyone know of a good way to do that?   Everything I find online uses both js and CSS to do that.  Is there an LTI for such a thing?  I heard from Canvas support that Github LTI is no more.

Pasting Code Into A Page  - LTIs in here no worky no more

Thanks.

7 Replies
Anonymous
Not applicable

I just found this: 

http://hilite.me/

Maybe not the prettiest thing, but it seemed to work for using a Python file as an example and showed up fine in the Canvas page. 

Edit: You may need to stick to the light themes on this tool. My Canvas instance at least applies an #f5f5f5 background color to all <pre> tags, unless you have the ability to override this in your instance's CSS.

And there's also this one: https://tohtml.com  Doesn't seem to have the pre background issue that the other one does. 

Pytho

Boekenoogen
Community Contributor

In the Themes, you can upload custom CSS and JS to a sub-account. It will work.

robotcars
Community Champion

I'd love to see an LTI for this too.

Is this something you will control or students will use? What languages are you trying to support?

I posted an idea in the Canvashacks Classroom as a quick work around, but it didn't pick up any momentum. I understand why. :smileygrin:

One solution might be embedding external services and widgets in HTML files uploaded to Canvas.  I'm tagging laurakgibbs‌ because she has some experience in this and I haven't tried.

 Twitter4Canvas: Spring Cleaning Complete! 

https://community.canvaslms.com/people/laurakgibbs/blog/2018/04/30/random-quotes-widget-from-goodrea... 

I think there have been a few feature requests, but they didn't get any momentum either.

robotcars
Community Champion

Caution. Tangent ahead...

Most Rich Text Editors for the web are pretty friendly to preformatted code. Take for example Visual Studio Code, which is built on top of Electron, which is basically a browser. When you copy code from the IDE, and paste it somewhere like Jive or Gmail, it keeps most of the formatting (Jive got rid of indents), Gmail does not.

This won't work in Canvas.

This snippet was just sent to me via Gmail.

// by smithb_ccsd
(
function () {
 // hide all other roles except for the role passed in ("Staff Admin")
 function hideRoles(role) {
   let i = 0, optionLength=0;
   let roleSelect = document.getElementById('admin_role_id');
   optionLength = roleSelect.length;
   for (i=0; i<optionLength; i++) {
     if(roleSelect[i].innerHTML !== role) {
       roleSelect[i].style.display = 'none';
     } else {
       roleSelect.selectedIndex = i;
     }
   }
 }
 // start sequence when user clicks on Admin tab,
 // and confirm user is on settings page.
 if(document.getElementById("tab-users-link")) {
   document.getElementById("tab-users-link").onclick = function() {
     ccsd.util.onPage(/\/accounts\/\d+\/settings/, function() {
       if(!(ccsd.util.hasAnyRole("root_admin"))) {
         hideRoles("Staff Admin");
       }
     });
   };
 }
})();

Mainly C++, Java, C, Python for text colorization and formatting.

bdalton_sales
Instructure
Instructure

There is an LTI called 'code embed' that appears directly in the RCE. If you do a Google search for it it will turn up.  It used to be in the eduapp Center but is no longer so not sure how well maintained it is.  Regardless I believe the source is available on github

maguire
Community Champion

You can use the construction <pre><code class="language-python"> xxx </code></pre> if you have a javascript such as  Prism (https://prismjs.com/) loaded for your site. See for example: 

Canvas even supports ligatures and diagraphs such as those found on the page:

https://canvas.kth.se/courses/11/pages/some-examples-of-ligatures-and-digraphs