It is very easy to use MathJax with most web platforms. Thanks to the MathJax CDN service, you do not have to install any files – just adding a code snippet to the HTML header is all that you need to do to set up MathJax. You can then include LaTeX and MathML in your posts and let MathJax display beautifully rendered equations to your readers.
This page contains video tutorials showing you how to use MathJax in Tumblr and Blackboard. While some of the specifics in these videos only apply to these environments, the approach is very general and should help you to set up MathJax in other web environments as well. The key action is to add a line of code, telling your page to use the MathJax CDN, to either the HTML header or as inline HTML in your web document.
Tumblr
Watch the “How to use MathJax in Tumblr” video at 480p for the best viewing experience:
Summarizing the main steps:
- Click the Customize button in the upper right corner
- Select Theme
- Click Use Custom HTML
- Go to the end of the header environment, which you can do by searching for the
</head>tag - Insert some blank lines just above the
</head>tag - Copy the MathJax code snippet from “Using MathJax in Web Platforms” in the MathJax documentation, and paste it into the HTML header on Tumblr
- Click Save + Close
Open up the blog again – you’re all set!
Blackboard
Watch the “How to use MathJax in Blackboard” video at 480p for the best viewing experience:
Summarizing the main steps:
- Create a content element of choice, such as a learning module or an assignment, within the Blackboard environment. We have tested that MathJax works with individual items, learning modules, assignment, lesson plans, syllabi (including lessons), tests and blogs.
- Disable the default Blackboard visual text editor by flicking the switch in the upper-right corner to “off”, and select “HTML” input mode (rather than “Smart Text” or “Plain Text”) from the list of input options right underneath the editor’s input text field.
- Copy the MathJax code snippet pointing to the MathJax CDN from “Getting Started with MathJax” in the MathJax documentation, and paste it into the Blackboard editor.
- Include your mathematics in standard LaTeX notation, using the
\(…\)delimiters for inline expressions and\[…\]for paragraph equations. (These delimiters can be customized). - Give a name to your content element, and click Submit.
- Switch off Edit Mode.
You should now see MathJax come into action and render your LaTeX expressions as beautifully typeset mathematics.
Pingback: Mackenab.com » Blog Archive » Mathjax Installed…
very smart!!
Great short tutorial. But just to add to it, we found that with large blocks of text containing MathJax and particularly when displaying HTML pages containing lots of MathJax mark-up result in a “double-scrollbar” problem. The inline content frame displaying the content has one scroll bar and the parent browser another scrollbar.
This occurs because upon displaying the content in the inline frame, there is a javascript call to a function to calculate the required size for the content thus avoiding the inner scrollbar. However, MathJax kicks in its own rendering after this calculation has taken place and typically increases the page length thus triggering inner scrollbars.
The workaround is to add another call to the Blackboard that calculates the page size once all the MathJax rendering has completed. To do this, place the following BEFORE the javascript link to the MathJax libraries:
MathJax.Hub.Queue(function () {
parent.page.setIframeHeight();
});
The “parent.page.setIframeHeight()” call is to a Blackboard specific function and therefore is reliant on Blackboard not changing this function name in future years. I’ll put my head on the block here and suggest that this is unlikely.
Putting the tag in a blackboard syllabus doesn’t work on our system (LS 9.1) since syllabus content items are dynamically generated by javascript code that fires when the page is loaded, and hence there’s no script tag on the page when it needs to be. There’s a fairly simple workaround. The syllabus appears in a content area or folder. If any other item in that same folder has a tag, then the tag in the syllabus itself is superfluous and the tex code in the syllabus is formatted when the onload event occurs.
An issue that I’m not sure of: it will become common to have multiple copies on the same page (e.g. one per quiz question) of the script tag and possibly of scripts containing Mathjax.Hub.Config. Is there any serious performance penalty in having multiple scripts loading the CDN resources? Is everything idempotent?
What about built-in BlackBoard forum?
Probably the best way would be to include on the source level – but this is not available to instructors.
Despite the fact that this page contains
http://cdn.mathjax.org/mathjax/1.1-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full
Safari 5.05 and FireFox 6.0 display an error
Probably timing problem
I do not think this tutorial is valid with the new version of Blackboard. That is, the method described no longer works.
Hi,
We have successfully integrated MathJax to our web demonstration located at:
http://webdemo.visionobjects.com/equation.html?locale=default
As you can see, all you need to do is write out a mathematical formula and our recognition engine will render this to its equivalent MathJax expression.
If you wish to learn more about our MyScript Equation SDK, you can contact us through our website using the ‘Contact Us’ page.
@Fernando:
Very cool! I’m impressed with the quality of the recognition given my very poor handwriting on screen with my trackpad mouse. Can I add you to the “MathJax In Use” page?
Davide
Hi Davide,
Thank you for your positive feedback. Of course I’d be more than happy to see our webdemos linked from more places such as ‘MathJax in Use’ so please proceed.
Kind regards
Fernando