HTML Formatter

[Chris_Hofer]

On the "HTML Editor" side of content pages, I would like to be able to click on a button to format (indent) the HTML code so it displays properly rather than having everything left-aligned.  For example, in a Canvas page, HTML code looks like this:

However...using a program like Adobe Dreamweaver or a website like Format HTML for Free, the code is easier to decipher...as in this example:

As an added bonus, it would be awesome if the code could also be color-coded (as in this example).  This helps me easier figure out where I might have to add code to a page if the need arises.

This idea has been developed and deployed to Canvas

For more information, please read through the Canvas Release Notes (2021-02-20) 

[erinhmcmillan]

Hi, Chris,

On Tuesday we'll have an update in the Rich Content Editor that updates the HTML editor. It won't have colors but it may let you better align the code as you'd like. Check it out next week!

Erin

[James]

@bturek That's a premium plugin (not free). At least with the new rich content editor they are using a more modern version of TinyMCE (5.3.1) so it opens the door for the plugins. I haven't looked in a while, but I want to say they were still using the old version (maybe even version 3 something) the last I checked.

Christopher's code is still the best work-around I've seen at this point.

[Stef_retired]

Comments from Instructure

The Rich Content Editor includes a pretty HTML editor in addition to the raw HTML editor. This change provides an enhanced HTML experience for users.

For more information, please read through the Canvas Release Notes (2021-02-20) - Canvas Community 

[cesbrandt]

It does have colours! I don't like the colours, but they're there! Finally, my userscript will be useless! ❤️

[bturek]

Thanks for the update, @Stef_retired!

Here's how to access the Canvas beta environment as an instructor, for us uninitiated folks.

[Stef_retired]

Comments from Instructure

The Rich Content Editor includes a pretty HTML editor in addition to the raw HTML editor. This change provides an enhanced HTML experience for users.

For more information, please read through the Canvas Release Notes (2021-02-20)