[ARCHIVED] [ARCHIVED] language highlighting

[maguire]

Locally we have been using prism.js (prismjs.com/) for language highlighting (for example, setting <code> examples for a specific programming language). However, one of our administrators feels this may be a cause for poor performance when rendering pages. Additionally, there are problems when using this with chrome (as the prism.js javascript is not being trigger reliably), although it works well with firefox.

What are other sites using for language highlighting?

[Robbie_Grant]

 @maguire ,

We are giving the Instructional Designers area a little bit of love and just want to check in with you.  This will also bring this question new attention. 

I apologize for your questions sitting in the community so long without a response.  It looks like you have stumped the Canvas Community.

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

Robbie

[maguire]

Odd that in over a year no one has answered this question.

[Robbie_Grant]

 @maguire ,

This is a community of end users that may or may not have any experience with what you are asking.  The Canvas Coaches in the Community try to provide a response to every question that comes in every group, but sometimes some slip through or we don't have the experience or knowledge to answer the question.  This is one reason we are going back and looking and very old unanswered questions.  maybe by this time someone else has gained the needed experience to answer your question, or maybe someone is experiencing the same issue.  This is the power of a community driven public support system.  I am also going to share this question with the Canvas Developers‌ and Canvas Admins‌ groups to see if anyone there has more technical insight into your issue.  The more eyes the better!

Hope to get you an answer,

Robbie

[dgray]

As a SysAdmin, I too would have grave concern over loading that block of JS for everybody, particularly given how few times it would be used compared to total page loads. Might be a different situation if the PrismJS were added only to a specific sub-account's theme, with the CS classes in that sub-account, but that doesn't sound like the situation in this case.

My faculty (at least, the ones who've discussed the matter with me) tend to either link to external web pages with code blocks highlighted, link to files formatted the way they want, or in one case create the formatted code blocks externally and integrate them into Pages using iframes.

Probably not the answer you're hoping for, but that's what we have been doing.

[maguire]

Thanks  @dgray , the solution we adopted was to choose a subset of the most popular languages and they are being loaded. As an engineering school, we have a lot of people through the university that have code examples.

[dgray]

That's an elegant solution. (Also not something that would have occurred to me; I have a "one size fits all" mentality when it comes to deployments like that.)

[maguire]

I suspect that given the use of bundles, caching, and other techniques that choosing the full set or subset might not actually make that big a difference in the long run. For an interesting page as background for this see: Addy Osmani, "JavaScript Start-up Optimization" JavaScript Start-up Optimization  |  Web Fundamentals  |  Google Developers.

I have not done measurements of this, but a quick look with the chrome inspector at one of the pages shows the prism.css and prims.js files coming from the local disk cache or memory cache (depending upon how long it has been since I access a page that includes them). The time from disk cache for the prism.css file was 5ms. Total time to get a page with LaTeX as code and images of matrices about 1.13 s, interestingly it took about 228 ms to get the matrix equation as svg. My test was with the page: notes-20160811-equations: LaTeX inside : Chip sandbox