@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.
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.