Use in Web Platforms

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…

  • acheng

    very smart!!

  • Stuart Anderson

    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.

  • JQ Johnson

    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?

  • Victor Ivrii

    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.

  • Victor Ivrii

    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

    MathJax no longer loads a default configuration file; you must specify such files explicitly. …

    Probably timing problem

  • Sony

    I do not think this tutorial is valid with the new version of Blackboard. That is, the method described no longer works.

  • http://webdemo.visionobjects.com/equation.html?locale=default Fernando Rynne

    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.

  • Davide Cervone

    @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

  • http://webdemo.visionobjects.com/equation.html?locale=default Fernando Rynne

    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

  • http://np-hard.tumblr.com wicked wukong

    If I read the blog directly it is awesome but when I subscribe to a feed with Mathjax (which most of my subscriptions have :) google reader strips away JS so no mathjax. Any ideas how I can make it work in google reader or any reader which supports Mathjax which I can use?

  • Peter Krautzberger

    Since RSS and atom do not support javscript, this cannot be solved server side. Some users have reported that a greasemonkey script can work.

  • Marie Vitulli

    MathJaX doesn’t seem to work in a Blackboard Discussion Board.
    I was able to post an announcement using MathJaX but not a thread
    in a Discussion Board. Too bad because on a Mac the WebEQ and MathML
    editors in our current version of Blackboard are useless.

  • Peter Krautzberger

    Thanks for your comment, Marie. We do not have any control over Blackboard’s Discussion Board, so you might want to file a bug report with Blackboard.

  • http://coker.edu Paul Dostert

    Has anyone had trouble getting this working within questions (a Create/Edit Numeric Answer Question ) in Blackboard 9.1? I tried a simple test (which worked in the information section):

    \[
    \frac{1}{2}
    \]

    Where I’m in out of the special edit mode and have selected HTML formatting. I submit this as my question. Then if I go back to re-edit the question, Blackboard changed the HTML to:

    \[ \frac{1}{2} \]

    which clearly does not display correctly.

  • http://coker.edu Paul Dostert

    Well… of course your forum displayed everything correctly in my question! So it took the “good” formatting of the fraction and got rid of the script potion, replacing it with ” div class=”vtbegenerated” “

  • Peter Krautzberger

    Hi Paul. For technical questions, the MathJax User Group is the better place to ask. Maybe you could post more details about the Blackboard problems there?

  • Niels Walet

    Have to agree with this one–the discussion board is a heap of various pieces of open and closed source javascript; looking at this in detail it filters the scripts straight out when you the threads are assembled. My feeling is this is a “feature” and not a bug, and is how BB expects this to work. Sigh! Will have to use there ancient version of WebEQ instead….

  • Dan

    Hi! I put the code into the html just like you said. however, when I write notes in tex, they don’t seem to compile all the time. I have to refresh the page several times to get it to work. do you know what could be the matter?

  • mathjax

    Please give us more details (i.e. a link) over at the MathJax User Group — it is the right place to get support from the community.

  • iwan

    why my mathjax in tumblr cannot start new line? see last line http://inyoot.tumblr.com/post/44720523451/mathjax

  • mathjax

    Please ask such questions on our User Group.

  • Pingback: 为Blackboard Learn添加数学支持