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
Chris_Hofer
Community Coach
Community Coach

I think that's exactly why I submitted this Feature Idea.  I would love to be able to see properly formatted HTML code right on the page (HTML view) without having to work in some other editor first, copy/paste the code back into the HTML side of the RCE...taking the "middle man" out of the equation.

dlyons
Instructure Alumni
Instructure Alumni

I misunderstood this feature request; I was thinking you wanted to be able to share code as content on the page, and you meant you want the HTML view to be formatted for you as the creator. I get it now. 🙂

Chris_Hofer
Community Coach
Community Coach

ok...yeah.  Sorry if the feature idea wasn't clear.  Yes, as I am building a page in a Canvas course or making edits to the page in question, it would be so beneficial for us to be able to see properly formatted HTML.

csalazar
Instructure Alumni
Instructure Alumni

This would be a great enhancement for the many teachers and instructional designers that edit the HTML to take full advantage of customizations to the look and feel of pages. Our ability to deliver this in the next six months would depend on us finding a tool that could be integrated into TinyMCE.

I will start doing some research into our options and will update the thread with what I find.

Thank you,

Cosme

kona
Community Champion

Thanks for the update!

hensonj
Community Novice

our ability to "take full advantage of customizations to the look and feel of pages" is hindered much more by the ultra restrictive valid elements list for tinymce (as well as canvas's own scrubbing code) that removes globally accepted tags from the code. please see this feature idea for more information:

TINY MCE

James

Chris_Hofer
Community Coach
Community Coach

Thank you, Deactivated user​!  Seems like I've created a lot of interest with this, so I hope it is something that will eventually become a reality in Canvas!!!

kpthomps
Community Novice

I agree that the ability to add HTML comments in the HTML editor view of Pages is really important; along with maintaining the whitespace/indentation of the markup code. Color coding the tags and attributes would be icing on the cake. Hope this moves forward!

willmccrary
Community Novice

Resurrecting the thread to say that a more full-featured HTML editor would be super useful.  Just having something like color-coding and tab stops would be wonderful.

peterakers
Community Novice

I'd be interested in an update on where this is at? As others have said it would be a welcome enhancement