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

David Gibson at Blackboard has produced an introduction for integrating MathJax in the new Blackboard editor.

For historic value, here’s our original tutorial for the older Blackboard editor.

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

otheritem 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

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?

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

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.

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.

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.

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” “

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?

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

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?

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.

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

Please ask such questions on our User Group.

Pingback: 为Blackboard Learn添加数学支持

A demo or implementation of mathjax…

Tutorial with demo