HTML Editor Syntax Highlighter (Updated 2022-03-09)

[cesbrandt]

Original Post

Disclaimer

This is my second blog post to the Canvas Community, but I'm going to stick with my tl;dr format.

The Situation

Who doesn't like their code to be easier to read!? Oh, you use the Rich Content Editor (RCE)? Well, why are you in this blog? I see, you thought this was to add syntax highlighting to the content of an activity. Yeah...about that...no.

I know there have been a few idea requests to add a syntax highlighter to the core of Canvas for supplying syntax highlighted code within the content of activities. While I have no doubt I could do this, I'm not going to.

So what's this blog all about? The HTML Editor is SO boring! We load ~95% of our content via the HTML Editor, having written it in third-party applications (i.e., Notepad++), because the HTML Editor in Canvas isn't particularly inspiring, nor is it easy to read.

Reason for Creating

Simply put, I did this to allow our developers to more easily read the code from within Canvas. There really isn't anything more to it.

The Solution

A userscript the "replaces" the HTML Editor with an Ace Editor (https://ace.c9.io/) and utilizes JS-Beautify to "beautify" the HTML in the editor. So, without further ado, the Q&A:

Q: What does this userscript do?
A: Simply put, it "replaces" the HTML Editor provided by Canvas with an Ace Editor.

Q: Why did you put "replaces" in quotation marks?
A: Ah, the long answer.

The userscript doesn't actually change any of the Canvas functionality. What it actually does is to hide the HTML Editor and add the Ace Editor to display in its place. When changes are made via the Ace Editor and the user clicks out of it (i.e., to see the Rich Content Editor or save), the HTML Editor is updated with the code from the Ace Editor and Canvas processes it normally.

Q: Will the syntax highlighter always be enabled?
A: It can be. The userscript adds a toggle anchor to the line immediately above the editors where the toggle between editors is. This will allow you to enable/disable the syntax highlighter.

Q: Will it remember if I had it enabled or do I have to enable it every time?
A: It will remember. The userscript uses cookies to remember the state of the toggle. This means you could enable it while working in one assignment and it will already be enabled when you open a discussion in another course.

Q: What about multiple Canvas instances? I want it to be enabled in one, but not another.
A: It will! Rather, it should! I configured the userscript to use the very first part of the domain name it's toggled on to give it a unique name for the instance. I have tested it on three different Canvas instances and it created unique toggle cookies for each Canvas production instance.

Q: You just said it was for "production" Canvas. Why can't I use it for "Test" or "Beta" instances?
A: You can. Taking the entire previous answer to give context, I said that there would be unique cookies based upon the first part of a domain name. So, if your production URL is https://abc123.instructure.com/ with a test URL of https://abc123.test.instructure.com/, your cookie will be the same between the two: abc123_Canvas_syntaxHighlighter. However, compatibility between the different instances can be an issue. The editor toggling is dependent upon the wording of certain components of the overall UI of the editor area. When this wording changes (which they seem to like to do frequently), the userscript is unable to load properly.

Q: Can I integrate this into my global JavaScript?
A: Knock yourself out, but I won't be supporting that.

Q: Can I use this in German? Japanese? Italian?
A: Yes? There are a few settings that can be adjusted at the top of the script (keep an eye out for the "DO NOT EDIT BELOW" line). Included in this area are variables for adjusting to different languages. These will need to be manually adjusted if your Canvas is not in English.

Q: Can I use this with a self-hosted instance?
A: Yes? I won't commit that it'll work, but if you update the userscript @include and @exclude values to match your actual domain, I don't see why it wouldn't. Having said that, I will not support use of this code for self-hosted instances.

Q: Will it work with the #editor_tabs for inserting links, files, and images?
A: No. To be blunt, the functionality of the #editor_tabs has always been a bit "wonky" for me, so I'm not even going to try to make this new editor work with it. You can, of course, toggle the editor on/off or switch back to the Rich Content Editor, make your inserts, then toggle back.

Q: So, it adds this to ALL editors in Canvas?
A: No. For simplicity only the first editor on a page will have the editor applied (so it won't be available to quiz questions). Furthermore, there are some editors (i.e., global announcements) that lack the HTML Editor, which the script is dependent upon.

Having said that, the userscript was designed to be as inclusive as possible. If, however, you do find pages where the editor doesn't work correctly, please let me know so I can either fix it or prevent it from loading there.

Q: Does it support the new RCE?
A: Yes.

Q: Does it support the old RCE?
A: Sorta. In the GitHub repository, there is an "old" version of the userscript that is an "honourary" version using the code that was compatible with the old RCE at the time that the new RCE was enforced. This is not supported in any capacity.

Q: Does it replace the "Pretty HTML Editor" in the new RCE?
A: No. This userscript adds an editor, it doesn't replace any. Before the "Pretty HTML Editor" was added, this userscript simply added the Ace editor as an option, it didn't replace the original HTML or RCE editors. This has not changed.

Dependencies

• Userscript Manager
  • Tampermonkey (Chrome)
  • Tampermonkey (Firefox)
  • Greasemonkey (Firefox)

How It Works

1. Load the userscript to your Userscript Manager of choice
2. Enable the userscript
3.  
   1. If you're using the "old" RCE, access the "HTML Editor" of an activity edit page
   2. If you're using the "new" RCE, access the "Switch to raw html editor" of an activity edit page
4.  
   1. If you're using the "old" RCE, click the "Enable Syntax Highlighter" anchor right next to the toggle that allowed you to access the HTML Editor
   2. If you're using the "new" RCE, click the toggle that appears next to the "Switch to rich text editor" button

Appearance (Old RCE)

BEFORE

AFTER

Appearance (New RCE)

BEFORE

AFTER

Releated Ideas/Discussion

https://community.canvaslms.com/ideas/2274

[lorewap3]

Thanks @cesbrandt ! I tested it in our beta instance and it seems to be working great! I haven't tested it in our live instance but I'm not worried about that until it's officially switched over.

I do have a quick side question, though. I'm sure there's a tech reason for this, but do you know what's causing the syntax highlighter to not be vertically adjustable? Is it a limitation of how Ace implements the editor? Just wondering if this was modifiable or at the minimum we can set a larger default line height to give us more lines. 

Thanks again! You were so fast!

Will

[cesbrandt]

@dwarden, I'm sorry to hear that. I'm afraid that without the enforcement I'm not able to troubleshoot it. I lack the authority to turn it on the Production instances we have. ^^'

@lorewap3, it's good to hear that it's working for you, at least on the Beta. Hopefully, what's on the Beta is what will be enforced, but it might not be until next weekend when the update hits.

As for the resizability of the Ace editor, it's something that's been brought up before. I know it's possible to make it user resizable, but I have not had the time to revisit the request. I added the sizing variable to the configuration section as a middleground option.

[Chris_Hofer]

Just wanted to also confirm that with the 2.3 update, I am no longer able to see the toggle switch when I go to the HTML view of Canvas content (in our "Production" environment).  I can, however, see the toggle switch in our "Beta" environment.  We switched all of our users over to the New RCE this past Friday, January 8th.

[cesbrandt]

@Chris_Hofer, thank you for the confirmation that the issue is between the environments.

Unless someone wants to volunteer to troubleshoot it for me today, I'll be able to take a look at it on Production tomorrow evening. My guess is that the editor identification methods changed. I tried to keep them as simplistic as I could, but what they were when the new RCE released was entirely broken when I pulled up the Beta yesterday.

Additionally, the bottom control bar management was reworked so the custom toggle kept getting deleted when toggling between the RCE and HTML editors. I solved this by building the toggle when switching to the HTML editor and deleting it when switching to the RCE. I don't like doing it this way, but it's the only way I could make it work. The new UI doesn't offer a friendly placement to stably add the toggle like the old UI did, but this appears to be a relatively recent change as it was stable before.

Hopefully, whatever difference there is will come into sync with the enforcement. If not, it may end up being updated next weekend, too. If these events are any indication, I may need to put a lot more effort into maintaining this. :S

If nothing else, I'll get an update (v3) out this weekend to get it working on Production without the old RCE code. Should another update be needed next weekend, well, at least I've already written the code via the Beta instances.

[MattHanes]

@cesbrandt it does appear they are working on something in the Beta that might make things different than production:

Edit: Sent the wrong link the first time Re: HTML Formatter

[cesbrandt]

@MattHanes, thanks, I wasn't notified of that post despite following the idea.

Looks like it might be a more complicated situation than I thought. 😞

[cesbrandt]

@dwarden, @lorewap3, and @Chris_Hofer, I've released v3.1 which strips out the old RCE support and fixes the Production environment loading. I've tested it on 3 different Instructure-hosted environments without issue.

Please give it a go and let me know if you have any issues. I already fixed a bug of my original release where the RCE/HTML toggle would duplicate the Ace editor, regardless of the state, on the assignments editor.

I have identified why the detection failed on Production. It was a simple matter of the Beta having a `data` attribute that wasn't on the Production instance. Accounting for that, though, I came across another problem that will require a minor update whenever they push theirs. The wording of the editor links will change, but taking that into account and the code still works on Beta.

In the next few days I'll release a legacy version with the latest version of the code for the old RCE, since it, theoretically, could be used on the self-hosted instances (I've never tested nor supported this), but it will not be maintained. I'll also update this blog post with new screenshots, but that also won't be tonight.

[lorewap3]

I updated the code to 3.1 on our live instances with the new RCE rollover and it's working! Everything looks good from this end! 

Thanks @cesbrandt for updating this so quickly and for all the effort that went into providing this great tool for us! You are a gentleman and a scholar!

Will

[cesbrandt]

So, it seems my update will only be useful for about a month. The new formatter Instructure is releasing does including syntax highlighting. Looks like they're going to be using react-codemirror2 for the editor.

Sadly, I don't like the color scheme...guess I'll need to google some themes. 😞

[Shar]

@cesbrandt Yes, Keep us in the loop when you get some themes for the Pretty HTML. 😊

Meanwhile, yesterday Tues Jan 19, my script updated to 3.1 and the HTML syntax highlighter worked. Today, Wed Jan 20, the toggle has disappeared and I cannot get into the HTML syntax highlighter.  I still need it, even just for a month (or more), for various reasons where the new RCE makes it necessary to go into the HTML.

I double-checked, and I do have the version 3.1 of the code. I use a <site>.instructure.com Canvas instance and it's also not working at my <site>.beta.instruture.com. Am I missing something or did more stuff change over night?

Cheers - Shar ⭐

[cesbrandt]

@Shar update the `editorLinksText` config so to remove "raw" from the first entry. It's not a problem with the script, it's a language detection issue. Instructure changed the language files to use a different string in the toggle label. It's what I warned would need to be changed whenever they pushed their update (why the Beta originally worked with my update and the Production didn't). Looks like they decided not to wait for the actual scheduled weekend update to push that bit.

I don't like using the language strings for this stuff, but I learned the hard way not to trust those gibberish class names they've started putting out there. Just like the font character IDs, those class names change whenever they feel like.

As for the themes...done. I could use some volunteers to test it out.

[Shar]

Hi Christopher @cesbrandt ,

I completely volunteer to test out themes for the Pretty.  But I'll probably still use your syntax highlighter so that I can use the magic of Find and Replace, and collapse div sections. 🤗

Thank-you for the tip on the editorLinksText. Removing the word raw did the trick indeed!

I'm trying to include a picture for those who need to see it.

Much appreciated for your swift response,
Cheers - Shar ⭐

[cesbrandt]

I know my version has some features that I personally think make it superior, I'm sorry to say that I have no intention of maintaining it once Instructure releases theirs. I'd rather work towards them improving theirs than having to maintain a separate one.

I find it odd that their implementation of codemirror doesn't include the find/replace functionality. It's an addon, but it seems to me like it should be a no brainer to include it. I tried just injecting the plugin, but just like with the RCE (TinyMCE), they've modified it so that third-party injection of plugins is annoying. I never got my custom plugins to properly work for the RCE and it doesn't look like I'll be able to get standard plugins to work with the "Pretty HTML Editor."

With regards to testing the theme selector, it seems that, because I'm keeping the repository private until I release it proper, I need to invite people to the GitHub repository. I sent you a private message about it.

When the new editor releases proper, I'll make another blog post dedicated to it. Until then, it's kinda just going to leech off here, though there isn't much else to say about it. ^^'

[hechla]

@cesbrandt I would be happy to test anything you got. I was so happy to find your Canvas Syntax Highlighter and installed it for all of our Instructional Designers. But the new Pretty HTML that Instructure rolled out is horrible compared to CSH.  

[Shar]

Howdy again,

Well, with the May code deploy for the editor to remember which HTML editor we're using, the keywords changed again. 

The keywords are now: Click or shift-click for the html editor.

And you'll have to update your browser script with the new text.

update the editorLinksText keywords

There's also a little message that "Sadly, the pretty HTML is not keyboard accessible. Access the raw HTML editor here."
And I gotta say, I love my keyboard shortcuts, so I'm still using the raw HTML editor (with Syntax Highlighter browser script).

Cheers - Shar ⭐

[Shar]

Greetings to anyone still following this thread and using this (super awesome helpful) script.😻

If your Syntax Highlighter is no longer working starting March 2022, you'll have to make a couple more updates and you'll be back in business.

editorLinksText update

on line 16 or thereabouts, update the text keywords.
new: ['Click or shift-click for the html editor.', 'Switch to the rich text editor']

update the text for new

jQuery update

on line 226 or near there, replace this.$ with window.$ and replace this.jQuery with window.jQuery
window.$ = window.jQuery = jQuery.noConflict(true);

update jQuery reference to window

And you can grab a clean copy of the Synatx Highlighter on github and you will have to make updates since the script was last updated January 2021 and is no longer officially updated. So if you want to make further updates and new releases, please keep up informed. 😁

I'm still using this syntax highlighter because the Ace editor this uses allows for really convenient collapsing of div sections (really anything with an open and close tag). And this editor has a nifty find and replace feature which makes updating margins, padding, whatever so much easier.

Peace and long life,
Cheers - Shar ⭐

[hechla]

Thanks @Shar . Sadly, I could never get the Syntax Highlighter working again after January 2021. I just tried some of the edits listed in the comments and it still wouldn't work. I guess I'll just keep hoping for some options in the future. 

Thanks again to @cesbrandt for your work. It was awesome while it lasted and I look forward to anything you can do to make the Pretty HTML editor better. 

[James]

Interesting, @Shar.

I don't use Christopher's script, but I've been having issues this month with QuizWiz and other people are having issues with the Rich Content Editor working in editing multiple choice HTML responses going back to January (I think).

I tracked my issue down to Canvas' implementation of Sentry and iframes in particular, which is where the RCE would be loaded. Sentry is pretty invasive, taking over every addEventListener and replacing it with their version. But something is wrong and event listeners doesn't work in iframes after the first invocation.

I wonder if your adjustment somehow loads the version of jQuery that hasn't been intercepted by Sentry and that's why it works? QuizWiz is pure JavaScript, no jQuery, so I suspect jQuery itself is not the underlying cause.

[cesbrandt]

Alright, so I had no intention of returning to this userscript after Instructure released CodeMirror as their version of it. However, in the past week I've been reached out to by a dozen different people about it having recently stopped working.

Well, as @Shar reported, there were 2 compatibility changes needed. One of which really shouldn't have been an issue to begin with, but I lazily had decided to utilize jQuery, which Instructure had also been using at the time that I originally wrote this.

Given the unexpected popularity of the userscript, I've made a "major" update, completely stripping out the jQuery and updating the editor components to their lastest versions. Additionally, I added compatibility with Instructure's use of CodeMirror, hackish though my solution may be. As with the originally released version, this one does not replace any of the native editors from Canavs, it simply adds a new option.

Considering that I rewrote it in ES6 in ~2 hours last night, I won't be surprised if I missed something, but I have tested in on multiple Canvas instances without noticing any issues.

I'm not going to promise to just it up-to-date. Frankly, I don't work in the Canvas UI anywhere near what I used to. Since I'd created this to make the editor better for myself, I don't have the same level of motivation to maintain it as I used to. Having said that, if you do have problems, you're welcome to reach out to me with them. If I find I have the time, I'll do what I can to keep it up, but, again, I make no promises.

[hechla]

OMG!! Thank you so much @cesbrandt ... it's working again!!! I can't wait to tell my Instructional Designers. I think they, too, will be very thrilled. Thank you so much. 

[Ron_Bowman]

@hechla @cesbrandt -

I have not used this script before - I came across it from the latest traffic.  I just happened to be playing around with it, and there is a slight glitch in the script.

1) I go into html view and turn syntax highlighter on.

2) click on pretty html editor link

3) click on the raw html editor link

4) Now there are 2 editor windows in the syntax highlighter view - both are active and you can modify the html code in either window

5) turning syntax highlighter off goes back to the Canvas html view but leaves the bottom syntax highlighter window present below it - and it is still active

6) you can get rid of the second window by going back to the RCE and then back to the html view

A minor detail and really does not matter other than I like visual indication that I have turned something on with a button click would be for the slider button to change to a color - I noticed the blue ring around it - plus the display changes as well.  Not going to affect my use any.

[cesbrandt]

@Ron_Bowman, could you provide some more details? I've been trying to recreate it, but I'm having no luck. With the syntax highlighter disabled when entering an edit page and the raw editor as the last used HTML editor, I'm not having any issue with following your steps. Neither Firefox nor Chrome is giving me problems. :S

[Ron_Bowman]

@cesbrandt -

Thanks for getting back with me.

I just checked again, and you magically solved my problem.  I have no idea what is going on, but I must have had some strange situation when I first tried it.  It is now working fine.  

I had to kill Chrome(I do not know why, but every now and then Chrome goes rogue when I have a lot of Canvas pages open and I have to kill it) and re-log in.

Edit: I spoke too soon.  I just did some manipulations between the views and the double screen came back.

I will have to try and recreate it easily.  Before it was just the above steps.  This time it took considerably more effort.

[Ron_Bowman]

@cesbrandt -

I was able to duplicate the issue in firefox.  I had it come up when editing an assignment

try these steps. make sure that the highlighter is off.

1) Open assignment and select edit.  You should have the regular canvas editor view

2) togggle between Pretty and raw html.  I don't remember which one I ended on.

3) turn your highlighter program on and toggle between pretty and raw html leave it so that you are seeing your highlighter script results

4) toggle the view back to RCE then back to html

5) toggle the pretty/raw html view and it appears.

I have to teach now, I will try and make a video to upload

[Ron_Bowman]

@cesbrandt -

Here is a video showing the issue in firefox.  It is the same in Chrome.  for this video as I state, I setup syntax highlighter to be off, exited out of canvas - cleared all cache and cookies for all eternity, logged back in and went to the assignment.

I hope this helps and that you are able to duplicate what is going on.
Ron

[cesbrandt]

@Ron_Bowman, I think I got it. The issue only occurred if you toggled the Ace editor on immediately after switching to the raw editor from the RCE. If you toggled the CodeMirror editor at all before the Ace editor has to load, it wouldn't occur.

The issue turned out to be a placement issue. I had placed the event listener for the CodeMirror toggle to load every time the Ace editor was enabled/disabled, regardless of the currently visible editor. This was causing multiple event listeners to be loaded to the toggle, firing the initAce function twice. Playing with it, I got it to fire up to 6 times with a single click before I figured out placement issue.

I've updated the GitHub to v3.3, which should fix that. Please let me know if you have any further problems.

[Ron_Bowman]

@cesbrandt -

I figured it was something like that. I helped Dan Baeckstrom with his extension for Canvas page folders.  he had a few issues with timing like that as well.  

Glad you were finally able to figure it out and resolve the issue.

I guess my video will just be up there for posterity sake.  I never did get more than 2 windows _if I interpreted what you were saying about 6 instances, but then again I was not trying to break it any further.

Thanks for all your work on this script.  The work that you and others do really make it easier for myself and others.  By the way, I like your version(from what little I have seen of it) better than the pretty html by Canvas - there are pros - and cons for both, but I like how you break the links up into 1 part per line