HTML Formatter

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:

76120_UnformattedHTML.jpgUnformattedHTML.jpg

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:

76391_formattedHTML.jpgformattedHTML.jpg

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) 

61 Comments
erinhmcmillan
Instructure Alumni
Instructure Alumni

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
Community Champion

@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
Instructure Alumni
Instructure Alumni
Status changed to: On Beta
 
Stef_retired
Instructure Alumni
Instructure Alumni
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
Community Champion

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

bturek
Community Participant

Thanks for the update@Stef_retired!

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

Stef_retired
Instructure Alumni
Instructure Alumni
Status changed to: Completed
 
Stef_retired
Instructure Alumni
Instructure Alumni
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)

KristinL
Community Team
Community Team
Status changed to: New
 
KristinL
Community Team
Community Team
Status changed to: Added to Theme