HTML Formatter

on Jul 16, 2015

Comment • 48

Open for Voting

Score246

+238 more

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 was considered when developing our product plan for Q4 2019 and is not expected to influence development within Canvas at this time.
This idea will remain open for vote.
If this idea is in the top 10% by vote next cycle it will be reconsidered.

Read more about the feature idea process:
Adaptation: Feature Idea Process Changes
How does the feature idea process work in the Canvas Community?
What is the feature development process for Canvas?

48 Comments

Beth Young Jul 16, 2015 11:31 AM
A formatted, color-coded html view would also help those of us faculty who are only slightly proficient in html, but who need to make minor changes in the html view. It's a lot easier to look at the formatted html and figure out which parts to leave alone.
Like • Show 16 Likes16
Actions
Kelley L. Meeusen Jul 16, 2015 11:32 AM
I would vote for this. As a beginning coder, I would be better able to read and parse the scripts if indents were in place.
Like • Show 12 Likes12
Actions
Canvas Admin Jul 16, 2015 11:49 AM
This definitely has my vote when it opens up!
Like • Show 8 Likes8
Actions
John Buell Aug 5, 2015 12:00 PM
Great idea. I am thinking that there are any number of open source 3rd party HTML editors that could be integrated with Canvas to fulfill this ask.
Like • Show 6 Likes6
Actions
Alistair Cullum Aug 21, 2015 8:24 AM
I think Instructure still uses the third-party editor TinyMCE for Canvas's Rich Text boxes. If so, any feature requests will depend on what TinyMCE offers or might be convinced to offer, or on Instructure switching vendors.

When I find myself doing editing that's a little beyond what I can do in the Canvas HTML editor I usually copy the material to a different HTML editor and then copy back when I'm done. But that's not ideal if you want to be able to monitor the live view as you go.
Like • Show 7 Likes7
Actions
- hensonj @ Alistair Cullum on Aug 26, 2015 10:49 AM
  Yes Alistair Cullum, its tinymce. We finally got canvas to update to the "new" editor just before moving to the new community, but even still we don't have a full featured copy. We're missing things ranging from print and preview to extensions that enable external CSS to be loaded. While I understand that these are not things that your average user will encounter daily, or perhaps ever, using basic valid HTML and CSS are essential to creating truly innovative and engaging content. I like to think we're all big kids here and can handle the ability to use every bit of functionality we can get our hands on, so why remove these? Anyone not interested can stick to copy and paste, or as instructors commonly do, call me and ask if I can copy and paste for them.
  
  Chris Hofer, great idea! I looked around at tinymce's documentation again and dont see any obvious way to do this but who knows! I personally do all my edits in Dreamweaver, paste them into the editor and see how much gets destroyed by the laughably small number of valid elements. Which also leads me to this...
  
  For anyone here voting or commenting on this I would like to shine some light on another great resource (for which there was a feature request that has since been relegated to the great and magical feature request graveyard) its aim was to expand the ability of those who dare to use HTML mode, by expanding the number of valid elements accepted by tinymce. This single step, of uploading an expanded valid elements list (a txt file) would allow the editor to act in a manner that would allow any of the amazing things you can do in web design to be used IN canvas. No workarounds, no bs. Just think of the possibilities! CSS3 transitions, <video> elements, dare I suggest <script> tags!!!!!!!!. Anyway, here are the relevant links.
  
  TinyMCE - Allow admins to add additional allowed tags
  Please join our fellow Canvas users in making Canvas more awesome
  
  You cant vote any more, but you can comment, and we can tell Canvas with BOTH of these feature requests that people who travel bravely into the HTML editor, like traveling to the deep end of a shallow pool, are people too!
  Like • Show 7 Likes7
  Actions
  - James Jones @ hensonj on Aug 26, 2015 11:43 AM
    James R Henson,
    
    Regarding adding tags to TinyMCE, it's not as easy as you make it out to be (just add a text file). The sanitizing is hard-coded into a gem used: canvas-lms/canvas_sanitize.rb
    
    This means that even if you enable it in TinyMCE that it won't get stored into the page by Canvas. I noticed it when trying to bypass the editor by creating content using the API.
    
    However, it may be possible to get the formatting done by injecting Javascript onto the page. I've written a couple of blog posts this week about it and the HTML formatting was on my radar, but I decided to go to bed at 3:00 this morning since I had to teach.
    Like • Show 5 Likes5
    Actions
    - hensonj @ James Jones on Aug 26, 2015 11:54 AM
      I hadn't noticed the redundancy there, thanks for pointing that out!
      Like • Show 2 Likes2
      Actions
josh.emmitt@auckland.ac.nz Aug 31, 2015 3:28 AM
This would also be good if it meant you could leave a html comment tag. Especially when you are trying to make a html page and share with with people who don't know html.
Like • Show 8 Likes8
Actions
- Kevin Thompson @ josh.emmitt@auckland.ac.nz on Feb 5, 2016 2:25 PM
  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!
  Like • Show 4 Likes4
  Actions
David Lyons Sep 11, 2015 9:14 AM
There is a discussion related to this where I pointed folks to some free LTIs you can install today to work with code in the RCE. Please see it here: Re: Pasting Code Into A Page
Like • Show 7 Likes7
Actions
- chofer@morainepark.edu @ David Lyons on Sep 16, 2015 3:16 PM
  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.
  Like • Show 3 Likes3
  Actions
  - David Lyons @ chofer@morainepark.edu on Sep 16, 2015 4:00 PM
    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. :-)
    Like • Show 4 Likes4
    Actions
    - chofer@morainepark.edu @ David Lyons on Sep 16, 2015 7:51 PM
      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.
      Like • Show 4 Likes4
      Actions
csalazar Oct 29, 2015 1:43 AM
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
Like • Show 7 Likes7
Actions
- Kona Jones @ csalazar on Oct 29, 2015 5:05 AM
  Thanks for the update!
  Like • Show 3 Likes3
  Actions
- hensonj @ csalazar on Oct 29, 2015 7:19 AM
  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
  Like • Show 4 Likes4
  Actions
- chofer@morainepark.edu @ csalazar on Oct 29, 2015 7:38 AM
  Thank you, Cosme! 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!!!
  Like • Show 4 Likes4
  Actions
Will McCrary Mar 2, 2016 1:56 PM
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.
Like • Show 6 Likes6
Actions
Peter Akers Mar 17, 2016 7:58 PM
I'd be interested in an update on where this is at? As others have said it would be a welcome enhancement
Like • Show 3 Likes3
Actions
allison@instructure.com Mar 22, 2016 6:46 PM
I was just looking at the Tiny MCE 4.2 upgrade and didn't see any indentation or formatting helpers there. I've asked our awesome engineers to look for alternative approaches that would work well with Tiny. I'll comment on this thread when I hear back!
Like • Show 6 Likes6
Actions
- Kelley L. Meeusen @ allison@instructure.com on Mar 23, 2016 8:16 AM
  Great Allison!
  
  I know that when you are on the scent of something, you won't loose the trail!
  
  Let us know.
  
  KLM
  Like • Show 5 Likes5
  Actions
- James Jones @ allison@instructure.com on Mar 23, 2016 9:36 AM
  What you're finding matches what I found when I looked at those last month. I investigated finding a way to allow users to add their own add-ins to TinyMCE and found that many useful ones (like source code formatting) have been deprecated over the years or there just isn't a plugin for it.
  Like • Show 5 Likes5
  Actions
Will McCrary Mar 25, 2016 12:34 PM
I have a related idea going in another thread. It's a relatively small thing, but it wastes a surprising amount of time:

Preserve the cursor position when switching between the HTML editor and the Rich Content Editor

Basically: When I'm doing some intensive editing in a course, it can be a pain to have to hunt down my original position in the HTML editor whenever I switch over to the Rich Content Editor. The cursor seems to jump around to random places without rhyme or reason when I go back and forth. It would be great if the cursor location in both editors could be tied together, so there's no question where you are in a long document.

Have a look if this drives you as crazy as it does me!

Will
Like • Show 4 Likes4
Actions
- hensonj @ Will McCrary on Apr 14, 2016 10:15 AM
  workaround:
  type a series of one letter like"sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss".
  its easy to see in the html editor. Just delete it when your done.
  
  James
  Like • Show 4 Likes4
  Actions
  - John Reisner @ hensonj on Sep 5, 2018 2:06 PM
    I've only been using Canvas for a few months, but I've had to employ this workaround a handful of times.
    It's a nice trick, insofar and tricks and hacks go, but what I would give for more neatly formatted HTML in lieu of my quintuple X's.
    Like • Show 1 Like1
    Actions
- Kelley L. Meeusen @ Will McCrary on Apr 14, 2016 1:03 PM
  I usually hit enter a bunch of times, then when I go to the HTML Editor I can find four five or more lines of non-breaking spaces. Then, of course, I just delete them.
  Like • Show 4 Likes4
  Actions
- Ron Marx @ Will McCrary on Jun 23, 2016 6:28 AM
  An iteration of reverse function DOES work when toggling back and forth from the HTML editor. The cursor position in the HTML-E is preserved when the RTE is toggled to see the effects of the code change. Creating a cursor position in the RTE might be useful, especially when using Kennethware or CIDI Labs Design Tools—then the part inspector would be in the precise, relevant position.
  Keep your eyes open for a commenting suggestion from me. Developers need that!
  Cheers,
  iRon_Mrx
  Like • Show 3 Likes3
  Actions
Xavier Cotto May 25, 2016 2:19 PM
Notepad++ will be a perfect option for this HTML editor
Like • Show 4 Likes4
Actions
Ron Marx Jun 23, 2016 6:50 AM
Fleshing out the HTML editor to function more like a basic editing tool (like the seminal BBEdit or Jonathan Deutch's HyperEdit--for us Mac users), would be great and I won't look a gift horse in the mouth if Instructure wants to incorporate the full functionality of a lightweight editing tool. Maybe, however, we need a baby step toward best practice coding which is sorely lacking in Canvas: HTML commenting!
I've been searching for an idea suggestion related to this: revising the Canvas HTML code editor to allow comments using standard HTML comment tag: 
Comments written like this are current stripped out of the HTML when the RTE is toggled and the element is saved, WHY? I don't have a degree in software engineering, but I know enough to realize and appreciate the utility of being able to comment code, especially in an open source environment!
I was surprised to notice this when I got started with Canvas, and even more surprised that it hasn't been suggested here in CC. Rest assured, I'll be adding an idea suggestion for this feature very soon.
Cheers,
iRon_Mrx
Like • Show 3 Likes3
Actions
- hensonj @ Ron Marx on Jun 23, 2016 7:26 AM
  Ron Marx
  "Comments written like this are current stripped out of the HTML when the RTE is toggled and the element is saved, WHY? I don't have a degree in software engineering, but I know enough to realize and appreciate the utility of being able to comment code, especially in an open source environment!"
  
  There are two reasons this is happening...
  The first is TinyMCE's white list. It is incredibly restrictive, as is the second reason; Canvas's own "scrubbing" code which removes any tags or characters it deems unacceptable.
  These make it incredibly difficult to create engaging content. I personally am a fan not of linking a bunch of boring documents to a page but making the pages themselves interactive and displaying the content directly there. It's frustrating to deal with the restrictions placed on us and the inability to change it. That being said, self-hosted instances CAN make the necessary changes but instances hosted by canvas cannot due to the way canvas uses these files per a group of hosted instances (or so I'm told) and not on a school by school basis.
  James
  Like • Show 4 Likes4
  Actions
  - Ron Marx @ hensonj on Jun 23, 2016 8:01 AM
    Thank you, James, I take your comments as a resounding AGREE.
    None of us who develop/design courses are fans of linking to static "boring" documents because we know that experience as students ourselves. Our solutions engineer sent me a copy of the Canvas HTML Editor Whitelist a while back, but because it doesn't have an exclusion list (of what we can't do), standard features like this missing one are harder to identify from the get-go. Maybe the list was composed in the fashion it was was to avoid or delay feature requests like this one!
    I'm not sure what a TinyMCE is, but I'm going to look it up now. And I'm going to see what has to be added to the css file of our Canvas to preserve comments since the only ones who will be commenting won't abuse the feature.
    Thanks for chiming in!
    iRon_Mrx
    Like • Show 3 Likes3
    Actions
    - hensonj @ Ron Marx on Jun 23, 2016 8:17 AM
      If the TinyMCE HTML editor worked like the codepen editor.... think of the infinite possibilities!!!
      Like • Show 4 Likes4
      Actions
mcsmith@instructure.com Jul 12, 2016 10:17 AM
Thank you for all your thoughts around this. We are planning on doing some polishing to the rich content editor which include word count, auto-save, and reworking the UI. Based on our analysis these features had a wider impact on our user base. Since this feature will not be developed over the next 6 months it will be archived. Keep in mind that all feature ideas that are archived are tracked and stored on our end so we can surface them for possible future development.
Like • Show 5 Likes5
Actions
- hensonj @ mcsmith@instructure.com on Jul 12, 2016 10:21 AM
  If possible PLEASE consider breaking it out to the sub account level so that we may create our own white-lists. Currently this prevents us from easily creating truly engaging content.
  
  Thank you,
  James
  Like • Show 4 Likes4
  Actions
  - Ron Marx @ hensonj on Jul 12, 2016 6:08 PM
    Although this idea for HTML formatting has been shelved for the time being, don't forget to VOTE UP on the idea that promotes Instructure to whitelist commenting in HTML at:
    Enable Commenting in the HTML Editor
    Like • Show 4 Likes4
    Actions
Renee Carney Oct 28, 2016 9:43 PM
Idea is currently in Product Radar Learn more about this stage...
Like • Show 3 Likes3
Actions
John Boekenoogen May 30, 2018 2:58 PM
Even if Instructure could have https://www.10bestdesign.com/dirtymarkup/ somehow added to the system it would be nice for us programers.
Like • Show 1 Like1
Actions
John Reisner Sep 5, 2018 2:03 PM
I don't know why this has been languishing on the vine for three years. It is sorely needed in this LMS.

I am a newcomer to Canvas (migrating from Blackboard); the ugly HTML code buried in the editor is one of the few painful, headache-inducing facets of using Canvas. It shouldn't take 5 minutes or more to make minor edits, but that's not uncommon when the Rich Text Editor isn't giving a true WYSIWYG picture and you need to muddle through the HTML weeds.
Like • Show 0 Likes0
Actions
Renee Carney Sep 5, 2018 2:20 PM
The Radar idea stage has been removed from the Feature Idea Process. You can read more about why in the blog post Adaptation: Feature Idea Process Changes.

This change will only impact the stage sort of this idea and will not change how it is voted on or how it is considered during prioritization activities. This change will streamline the list of ideas 'open for voting', making it easier for you to see the true top voted ideas in one sort, here.
Like • Show 1 Like1
Actions
cesbrandt Sep 17, 2018 12:27 PM
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.
Like • Show 5 Likes5
Actions
David Iaquinta Jan 21, 2019 12:44 PM
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?
Like • Show 2 Likes2
Actions
- Steven Schwamenfeld @ David Iaquinta on Jul 10, 2019 6:07 PM
  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
  Tabs in content pages and syllabus
  Like • Show 0 Likes0
  Actions
  - Jack Schofield @ Steven Schwamenfeld on Jul 11, 2019 6:31 AM
    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.
    Like • Show 1 Like1
    Actions
    - Steven Schwamenfeld @ Jack Schofield on Jul 11, 2019 8:41 AM
      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.
      Like • Show 0 Likes0
      Actions
Jack Schofield Jun 18, 2019 8:57 AM
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.
Like • Show 2 Likes2
Actions
Moses Wolfenstein Jul 25, 2019 4:22 PM
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
Like • Show 2 Likes2
Actions
Seth Berrier Nov 26, 2019 11:49 AM
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: Proper Formatting and Display of Source Code
Like • Show 1 Like1
Actions

HTML Formatter

Related Content

Recommended Content

Incoming Links