MathJax not Rendering With Angular

Question

The issue I have is this:

On my website, I pull my blog content from an external source which, the first time it's called upon to display, has to use a HTTP request to get. Also, the blog posts are written in Markdown, and I have to parse this to HTML.

I have this controller that goes out and gets the posts from github, decodes them, and parses them into HTML:

app.controller('content', function ($scope, github, html) {

    github.getAllContent().then(function (res) {
        var files = [];
        res.data.forEach(function (obj) {
            github.getFile(obj.path).then(function (res) {
                res.data.content = marked(window.atob(res.data.content));
                res.data.name = res.data.name.slice(0, res.data.name.indexOf('.'));
                files.push(res.data);
            })
        });
        $scope.files = files;
    });

    $scope.renderHtml = html.renderHtml;
});

html is this service

app.service('html', function ($sce) {
    this.renderHtml = function (string) {
        return $sce.trustAsHtml(string);
    }
});

that allows me to insert the HTML into each HTML element like this: <elem>ng-bind-html="renderHtml(info) </elem>".

Whenever I do this, however, LaTeX content isn't rendered. I have configured MathJax to recognize $ ... $ as delimiters, but no matter what happens, I can't seem to get anything to render. I have even called the MathJax.Hub.Typeset() function or set the typeset callback in the MathJax.Hub.Queue function and it doesn't work. Is this because of the markdown parser I use or how the data is encoded? Or is it just a matter of typesetting the MathJax at the right time?

In this project, I use Angular ui-router, if that has anything to do with it.

Vicky Gonsalves · Accepted Answer · 2016-02-14 06:43:49Z

1

I have used this (mathjaxBind.directive.js) directive in my project for MathJax and its working for me:

Plunker

mathjaxBind.directive.js

'use strict';
MathJax.HTML.Cookie.Set("menu", {});
MathJax.Hub.Config({
  skipStartupTypeset: true,
  messageStyle: "none",
  extensions: ["tex2jax.js", "mml2jax.js", "MathML/content-mathml.js", "MathML/mml3.js"],
  jax: ["input/MathML", "input/TeX", "output/SVG", "output/HTML-CSS", "output/NativeMML", "output/CommonHTML"],
  "HTML-CSS": {
    availableFonts: [],
    styles: {".MathJax_Preview": {visibility: "hidden"}},
    showMathMenu: false
  },
  "SVG": {
    availableFonts: [],
    styles: {".MathJax_Preview": {visibility: "hidden"}},
    showMathMenu: false
  },
  "NativeMML": {
    availableFonts: [],
    styles: {".MathJax_Preview": {visibility: "hidden"}},
    showMathMenu: false
  },
  "CommonHTML": {
    availableFonts: [],
    styles: {".MathJax_Preview": {visibility: "hidden"}},
    showMathMenu: false
  }
});
MathJax.Hub.Register.StartupHook("HTML-CSS Jax Ready", function () {
  var FONT = MathJax.OutputJax["HTML-CSS"].Font;
  FONT.loadError = function (font) {
    MathJax.Message.Set("Can't load web font TeX/" + font.directory, null, 2000);
    document.getElementById("noWebFont").style.display = "";
  };
  FONT.firefoxFontError = function (font) {
    MathJax.Message.Set("Firefox can't load web fonts from a remote host", null, 3000);
    document.getElementById("ffWebFont").style.display = "";
  };
});

(function (HUB) {

  var MINVERSION = {
    Firefox: 3.0,
    Opera: 9.52,
    MSIE: 6.0,
    Chrome: 0.3,
    Safari: 2.0,
    Konqueror: 4.0,
    Unknown: 10000.0 // always disable unknown browsers
  };

  if (!HUB.Browser.versionAtLeast(MINVERSION[HUB.Browser] || 0.0)) {
    HUB.Config({
      jax: [],                   // don't load any Jax
      extensions: [],            // don't load any extensions
      "v1.0-compatible": false   // skip warning message due to no jax
    });
    setTimeout('document.getElementById("badBrowser").style.display = ""', 0);
  }

})(MathJax.Hub);

MathJax.Hub.Register.StartupHook("End", function () {
  var HTMLCSS = MathJax.OutputJax["HTML-CSS"];
  if (HTMLCSS && HTMLCSS.imgFonts) {
    document.getElementById("imageFonts").style.display = ""
  }
});
angular.module('fsaApp')
  .directive('mathjaxBind', function () {
    return {
      restrict: "A",
      controller: ["$scope", "$element", "$attrs", function ($scope, $element, $attrs) {
        $scope.$watch($attrs.mathjaxBind, function (value) {
          //$($element).parent().find('math').wrap("<script type='math/mml'></script>");
          $element.html(value);
          MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
        });
      }]
    };
  });

Controller:

app.controller('MainCtrl', function($scope) {
  $scope.info='<script type=\"math/mml\"><math>\n<mstyle displaystyle=\"true\">\n<mtext> N </mtext>\n<msub>\n<mrow>\n<mtext> O </mtext>\n</mrow>\n<mrow>\n<mn> 2 </mn>\n</mrow>\n</msub>\n</mstyle>\n</math></script>';
  $scope.info2='<script type=\"math/mml\"><math>\n<mstyle displaystyle=\"true\">\n<mtext> C </mtext>\n<msub>\n<mrow>\n<mtext> H </mtext>\n</mrow>\n<mrow>\n<mn> 4 </mn>\n</mrow>\n</msub>\n</mstyle>\n</math></script>';        
});

Library:

 <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

in HTML:

<div mathjax-bind="info"></div>
<div mathjax-bind="info2"></div>

edited Feb 14, 2016 at 6:43

answered Feb 14, 2016 at 6:13

Vicky Gonsalves

11.8k3 gold badges39 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

apizzimenti Over a year ago

:/ this doesn't seem to be working for me. I don't know why, though. It used to render under certain conditions, but it no longer does.

Vicky Gonsalves Over a year ago

did u check the plunker example?

apizzimenti Over a year ago

Oh, I see. I checked the example and it works, it's just that the same directive implemented in my own code doesn't work.

apizzimenti Over a year ago

Yes, I understand that. I have done that, and it does not work (for me).

Peter Krautzberger Over a year ago

Note from the future: cdn.mathjax.org is nearing its end-of-life, check mathjax.org/cdn-shutting-down for migration tips.

Collectives™ on Stack Overflow

MathJax not Rendering With Angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related