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) 

[cesbrandt]

For those that hadn't seen, I've posted a blog for a userscript to add an Ace Editor as an optional replacement to the HTML Editor. It's far from perfect and doesn't support all instances of the content editor, but I think most will be satisfied with what it does offer.

Like my previous userscript, I'll provide support for it until Instructure has released an official version in the UI.

[dli1]

This is such a no brainer.  I would add that when the cursor is at a given position on the rich text view of a page and the HTML view is selected, the cursor should appear at the same point in the HTML view as the rich text.  At present it simply goes to the end of the stack.  This makes editing complex HTML code even more difficult when using tabs and tables on a page.  Basically, since Canvas is designed with so many "default actions" users are required to accomplish goals at the HTML level.  Why make unnecessary tasks even more difficult with an HTML editor from the Dark Ages?

[jschofield]

This would be very helpful for trouble shooting issues related to content add by those that only use the Rich text editor.  And easily update content using the HTML editor rather then rich text.

[Steven_S]

I'm new to html.  Simple things like pasting in a video using codes copied from youtube are no problem, and I even learned to add in codes to stop ads and adjust the size of the video.  But now I've started trying to make my pages more functional for my students, and adding features like tabs (or editing tables or both together) seemed to require so much more understanding.  The example in this post makes it clear that it doesn't need to be quite as difficult as it seemed to me.  I would think that the teams making these changes would have fixed the html view for their own sake a long time ago!

I was thinking maybe some of you would agree with me that some features should transition out of exclusively html editing into the rich text editor.  Anyway, please check out my new idea and let me know what you think

 https://community.canvaslms.com/ideas/14492-tabs-in-content-pages-and-syllabus 

[jschofield]

Hi Steven

I would limit the use of tabs and buttons as they do not display right in mobile view or in the canvas app.

[Steven_S]

I would hope that any built in options provided by canvas would be designed to have a functional mobile display.  Tabs for computers, might be set to display as accordions for mobile (by someone more knowledgeable than me.)  Or better yet, the divisions programmed into the page could have a "view as" option for students: Tabs, Accordions, Cards that expand up to viewable size, Cards that slide from a stack on the left to a stack on the right (or top to bottom)... I'm sure there are other possibilities too.  The mobile "view as" list could simply be limited to the options that work in mobile.  My point is that some version of this should be a part of the rich text editor and designed to be a part of canvas.

Thanks for the warning about mobile view, though! I tested the tabs and everything shows up on one page with the tabs as a clickable table of contents at the top.  It's not ideal, but it's better than everyone always seeing a 3 mile long syllabus.  It feels wrong to make the computer view less functional just because the mobile view does not yet have the same function.

[mwolfenstein]

I have to admit that I'm deeply torn on this feature request. On the one hand having essentially a lightweight IDE built-in to the editor would be fantastic. At the same time, as someone who has worked on software development teams, this strikes me as a non-trivial feature for the Canvas environment, and that there are a lot of other features that are desperately in need of attention. For instance, one thing I saw noted in this thread was mention of autosave in the RCE. This is a feature that would reach every student and teacher user across a huge range of different activities in Canvas. Similarly, the discussion forums have been needing some serious love and attention for a long time now. Basically, this strikes me as a nice-to-have feature that would be a big quality of life improvement for both beginning and advanced developers working with HTML in Canvas, but in the meantime it is possible to grab a free IDE like Atom or Netbeans, get those capabilities, and somewhere down the road when some of the more urgent features have been managed, we can hopefully see something like this in Canvas.

Just my 2¢'s

[olliebrown]

I added my own idea that is tangentially related to this one: 

It was archived and I was instructed to post my idea here as a comment instead.  I very much support the editor syntax highlighting and beautification described in this idea.  It is not hard (again, Pygments combined with a plugin like Beautify are robust, off-the-shelf solutions that could enable this and browser text editors like Ace already support this) but would require some extensive testing and Q/A.

My idea is to support including code within pages and quiz questions as properly formatted blocks with syntax highlighting.  Mine is static code part of larger content (potentially even just inline as a 'phrase' element in the HTML content).  This is something that would benefit both instructors and students and would not require as extensive of testing as it would be a change to static content, not the dynamic editor.

------

Other Idea: https://community.canvaslms.com/ideas/15503-static-source-code-formatting 

[bturek]

I add my vote to the this is sorely needed pile.

I'm not familiar with what's going into the New Rich Content Editor, but is there anyone (@James, perhaps) who knows if this syntax highlighting would be made possible by the new RCE?

Thanks in advance!

[bturek]

@James, you had previously mentioned a lack of plugins for the RCE (TinyMCE) that would allow formatting/highlighting. I looked just today and it appears that there is a plugin for that now. Here's an example, just click the <>

@Renee_Carney, could you update us as to where HTML formatting is on the Canvas team's radar?

Thanks!