[ARCHIVED] Add programming language code to pages

[michael_aars]

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.

[DeletedUser]

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. 

o

[Boekenoogen]

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

[robotcars]

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.

[michael_aars]

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

[robotcars]

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");

       }

     });

   };

 }

})();

[bdalton_sales]

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]

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