Programming Code Syntax Formatting Highlighting

0 Likes
(5)

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

 

10 Comments
Stef_retired
Instructure Alumni
Instructure Alumni
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 Participant

@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
Community Novice

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

@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
Community 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
Community Member

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

wyelearning
Community Participant

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 Participant

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. 

ProductPanda
Instructure
Instructure
Status changed to: Archived
Comments from Instructure

As part of the new Ideas & Themes process, all ideas in Idea Conversations were reviewed by the Product Team. Any Idea that was associated with an identified theme was moved to the new Idea & Themes space. Any Idea that was not part of the move is being marked as Archived. This will preserve the history of the conversations while also letting Community members know that Instructure will not explore the request at this time.