2 Solutions
World's leading screen capture + recorder from Snagit + Screencast by Techsmith. Capture, edit and share professional-quality content seamlessly.
@stigler ,
There is no short, easy way to do this.
That said, here are some things you might consider.
Embed the page (user level)
If the web page is housed on a secure server (https vs http), you can embed the page into Canvas through an iframe. It's not native to Canvas, but you can do all those things that Canvas' security model won't let you do like including the JavaScript necessary to render the LaTeX.
This approach doesn't do what you asked (have Canvas render it).
Add external JavaScript to process (admin level)
There currently is no support within Canvas for recognizing LaTeX triggers like $ or \[ \] and converting what is inside of it on the fly. To do so would require that your Canvas admin add custom JavaScript to invoke MathJax or KaTeX. That can have some accessibility issues, but I sure do like the ability to zoom with MathJax better than what I get out of Canvas' equation editor.
The custom JavaScript needs done at an account or sub-account level, you cannot add it at the course level and it may not work well with mobile apps. There have been several lengthy discussions and some feature requests about changing the way that math is handled with Canvas.
Your included library would be rendering it, not Canvas, but it would be similar.
Convert it to Canvas form
It is possible to take (most of) the equations on a page and convert them to Canvas format if you or someone you know has some programming skills. The Equation Editor returns an image that is built off of the LaTeX that went into it.
For example, let's say that I wanted to create the fundamental theorem of calculus and had this equation
What I typed into the advanced view was this
\frac{d}{dx}\left[\int_a^xf(t)dt\right]=f(x)What Canvas inserted as HTML was this (line breaks are mine):
<img
class="equation_image"
title="\frac{d}{dx}\left[\int_a^xf(t)dt\right]=f(x)"
src="/equation_images/%255Cfrac%257Bd%257D%257Bdx%257D%255Cleft%255B%255Cint_a%255Exf(t)dt%255Cright%255D%253Df(x)"
alt="LaTeX: \frac{d}{dx}\left[\int_a^xf(t)dt\right]=f(x)"
data-equation-content="\frac{d}{dx}\left[\int_a^xf(t)dt\right]=f(x)"
/>It should be fairly obvious? where all but the src attribute on line 4 came from. The "/equation_images/" portion is clear, its the rest of it that is confusing.
Since that src is really a URI, it has to be encoded. It turns out that it's double URI encoded (URI encoding of the URI encoding). There's a note in the source code that says it's stored in the database double escaped. If it wasn't, then a / in the equation would be unescaped once and treated as part of the path rather than part of the equation.
In JavaScript, this is done with the encodeURIComponent function. Note that I had to double escape the \ to get it to work.
var latex='\\frac{d}{dx}\\left[\\int_a^xf(t)dt\\right]=f(x)';
var single=encodeURIComponent(latex);
var double=encodeURIComponent(single);
console.log('LaTeX : ' + latex);
console.log('Single: ' + single);
console.log('Double: ' + double);Other languages have support for URI encoding, but they are normally greedier than the JavaScript version. By that, I mean they tend to encode all reserved characters like the ( and ). The JavaScript encodeURIComponent does not adhere strictly to the RFC3986 standard in that it does not escape these characters while most of the other implementations will.
A-Z a-z 0-9 - _ . ! ~ * ' ( )
The standard would also say to escape ! * ' ( ). But there is a note that says you don't have to escape them if they won't be used as delimiters, so we're okay. It just means that whatever implementation we find in a library will probably go ahead and escape them. However, the support for regular expressions and the ease of use (over command line JavaScript) may mean that you want to use a different language
Note that for PERL, which has excellent text processing and regular expression support, there is the URI::Escape::XS module that supports encodeURIComponent. Here is some PERL code to do the conversion.
use URI::Escape::XS;
my $latex = '\frac{d}{dx}\left[\int_a^xf(t)dt\right]=f(x)';
my $single = encodeURIComponent($latex);
my $double = encodeURIComponent($single);
print "$latex\n";
print "$single\n";
print "$double\n";
Ahh -- we're almost there now. We need a way to recognize the LaTeX delimiters, pull out the inside, and convert it. Consider this block. Here's I'm taking a paragraph that contains two LaTeX values:
<p>Consider a function $f$ whose domain is $(-\infty,\infty)$</p>
I'm going to convert it to Canvas format, using a subroutine I called canvexify (you could rename it to cantexify or cantex or latex2canvas if you like). In this case, it only looks for items with a single $ delimiter.
#!/usr/bin/perl
use strict;
use diagnostics;
use warnings;
use URI::Escape::XS;
my $t = q|<p>Consider a function $f$ whose domain is $(-\infty,\infty)$</p>|;
$t =~ s{\$(.*?)\$}{canvexify($1)}xmsge;
print "$t\n";
sub canvexify {
my $tex = shift || return '';
my $src = encodeURIComponent( encodeURIComponent($tex) );
my $img =
q{<img class="equation_image" title="%s" src="/equation_images/%s" alt="LaTeX: %s" data-equation-content="%s" />};
my $t = sprintf( $img, $tex, $src, $tex, $tex );
return $t;
}The code is relatively simple and doesn't trap for things like newlines within the LaTeX code (it will work if they're present, but not remove them, so the title attribute contains a newline). If there was a quote in the code, you may need to do something special -- luckily, we don't use double quotes in LaTeX, but use two apostrophes instead.
When you run the code, you get this (I manually added the line breaks:
<p>
Consider a function
<img class="equation_image" title="f" src="/equation_images/f" alt="LaTeX: f" data-equation-content="f" />
whose domain is
<img class="equation_image" title="(-\infty,\infty)" src="/equation_images/(-%255Cinfty%252C%255Cinfty)" alt="LaTeX: (-\infty,\infty)" data-equation-content="(-\infty,\infty)" />
</p>
You could take and paste that into Canvas in the HTML editor view. When I do that and then save it, I get this in Canvas
Now that we know it's working, you could create a function that invokes it so it looked cleaner. You could replace lines 10 and 11 of the code with this:
print latex2canvas($t) . "\n";
sub latex2canvas {
my $t = shift;
$t =~ s{\$(.*?)\$}{canvexify($1)}xmsge;
return $t;
}
Now the task is to modify the code to read the input from a file so that you don't have to hard-code it into the program itself. That gets a little bit more complicated since you don't want to copy/paste the entire document, you only need the portion within the <body> </body> elements.
There may be someone out there who has already written a solution, I just threw this code together while writing this response so you could get a sense of what would be involved.
Hi @stigler
Great solution with that Upmath!
I'm going to toss my old-school solution in the ring as well... I usually make pictures of LaTeX or other non-native HTML font stuffs, and put those in where they belong in the Canvas page/quiz.
The beauty of this solution is that I can also include alt text. And if I name my images cleverly enough, I can swap them out easy enough from the files section if the instructor makes a change or there was an error I did not catch.
Oh and if it's on a quiz, don't worry I do not give away the answer with the alt text. I call it something like QuizImage01 (in the alt-text and filename) and so forth. 
Cheers - Shar
Most probably related to the same topic. I find the preview of the advanced equation editor to be extremely slow but even more disturbing I created three very equation-heavy pages lately only to find out today that these equations only render as long as I am in editor mode. Once I save the page the equations are blank:
Same observation for Firefox, Chrome and Opera.
Other pages with equations within the same course project work just fine.
The problem appears to be caused by equations which are inside <p></p> environments, e.g. short inline equations are currently not rendered at all on the final page - however they appear to be fine in the editor.
Hi Uwe Zimmermann,
What happens when you PUBLISH your pages?
I just tried your \alpha\beta\gamma example and it worked for me, but I also published my pages.
Cheers - Shar
Thank You Wow! Thanks for sharing that trick.
You showed it in the video, but people may not have picked up on it. You may get an warning unless you go into the editor once ahead of time and switch to Advanced View. You can cancel exit (as you did), but Canvas remembers that you're in advanced view.
Here's what I got with a nonsensical expression I tried before switching.
That's slightly funny. It says it cannot be rendered in Basic View, yet the link says "Switch View to Basic," which means that I'm already in advanced view.
If I click on the "Switch View to Basic", it renders the content, and the link remains "Switch View to Basic."
World's leading screen capture + recorder from Snagit + Screencast by Techsmith. Capture, edit and share professional-quality content seamlessly.
This discussion post is outdated and has been archived. Please use the Community question forums and official documentation for the most current and accurate information.