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

Programming Code Syntax Formatting Highlighting

Programming Code Syntax Formatting Highlighting

0 Kudos
(4)

I would like to suggest that the new RCE include the option to select a block of text and have it formatted nicely as programming code.    There is currently a CODE formatting option, but it doesn't work well, and it not aware of any specific programming languages.  

 

Specifically, I'd like for the inclusion of a feature like 
https://prismjs.com/

or 

https://highlightjs.org/

or any of a dozen other javascript based code syntax highlighters.   

Example of how the output should look include

syntax2.pngsyntax1.png

 

Teachers need to be able to post code samples that look good on the page while still being able to be copied and pasted.   

Students need to be able to submit formatted code as an assignment and that formatting needs to persist through to the teacher reviewing the code in Speedgrader.   

 

What's even more Meta, Canvas own community software has such a code formatter already built in.  🙂    Canvas needs this functionality in their own LMS ASAP.

 

kronos0.pngkronos1.png

 

9 Comments
Stef_retired
Community Team
Community Team
Status changed to: Open

@glparker 

Thanks for sharing this idea! As it moves forward for broader discussion, here are a few somewhat related ideas to which you might want to add comments and ratings if you haven't already:

Markdown support for canvas - Canvas Community 

HTML Formatter - Canvas Community 

wyelearning
Community Member

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

Screenshot 2021-05-02 at 22.40.12.png

CraigChamberlai
New Member

@wyelearning This looks good.  Do you have to be a course owner to add this?  I could not find the required settings as per your instructions.

Thanks

Craig

wyelearning
Community Member

@CraigChamberlai This has to be added to a course or a sub-account in Canvas normally this requires a teacher or administrator role in Canvas (institutions can customise the Canvas permissions).

Once added to a course it is available for everyone in that courses (students and teachers).

Once added to a sub-account it is available for all courses in that sub-account.

Matthew

bea9
New Member

Related to this, I would love the ability to have inline code formatting to denote certain words as code. In Markdown this is accomplished with `tickmarks` as you type. The best solution right now is just highlighting with color.

matthew_buckett
Community Contributor

@bea9 Canvas allows through the <code> HTML tag so you can have the same behaviour as markdown writing: <code>int i = 0;</code> in the HTML editor (clicking on < / > below the editor). I know this isn't very user friendly by it does at least allow for inline code highlighting.

There's the full list of allowed tags here: https://tr-learncanvas.s3.amazonaws.com/docs/Canvas_HTML_Editor_Allowlist.pdf

bea9
New Member

Good to know! Not very practical for ongoing discussions and project feedback, but worth noting for content pages and the like. 👍

wyelearning
Community Member

There's a couple of plugins to the rich content editor that might make it a little easier to enter inline code:

Firstly if you want to just write in Markdown there's a Markdown editor that will convert your markdown to HTML that passes Canvas's filtering - https://www.eduappcenter.com/apps/6182

Secondly you could use the Snippets tool, highlight the text in the editor you want to be wrapped in <code></code> launch the snippets tool and select "Inline Code" and click update and the selection will be wrapped in the correct tags. If you wanted you could define your own snipped that added some different styling as well to make the monospaced text stand out more. - https://www.eduappcenter.com/apps/6197

jonespm
Community Member

As mentioned in the original post, the community software (which is a separate platform from Khoros) also uses TinyMCE and has this feature. The plugin is available in the general TinyMCE release, which seems like it should be possible and relatively easy to add. But I don't know the odds of Instructure doing that.

There have been other RCE features such as the character map where more time seemed to be spent on discussion and blogging why it wouldn't be added rather than just adding the button.