{"id":1303,"date":"2014-06-24T11:52:12","date_gmt":"2014-06-24T18:52:12","guid":{"rendered":"http:\/\/www.laurenwood.org\/anyway\/?p=1303"},"modified":"2019-09-01T11:06:47","modified_gmt":"2019-09-01T18:06:47","slug":"mathjax-mathml-and-wordpress","status":"publish","type":"post","link":"https:\/\/www.laurenwood.org\/anyway\/2014\/06\/mathjax-mathml-and-wordpress\/","title":{"rendered":"MathJax, MathML, and WordPress"},"content":{"rendered":"<p>I\u2019ve been work\u00ading at <a href=\"http:\/\/www.dessci.com\">Design Sci\u00adence<\/a> for a couple of months now, as Seni\u00ador Product Man\u00adager con\u00adcen\u00adtrat\u00ading on the Math\u00adFlow products. So I figured I should enable Math\u00adML sup\u00adport on my blog. It\u2019s not hard, but like everything in tech there are a few nig\u00adgly details. Many of those issues are caused by Word\u00adPress\u2019s over-eager help\u00adful\u00adness, which has to be reined in on a reg\u00adu\u00adlar basis if you\u2019re doing any\u00adthing at all out of the ordin\u00adary. Like edit\u00ading your posts dir\u00adectly in <span class=\"caps\">HTML<\/span> rather than using some pseudo-WYSI\u00adWYG editor.<\/p>\n<p>The\u00ador\u00adet\u00adic\u00adally, show\u00ading Math\u00adML in a browser is easy, at least for the sort of equa\u00adtions that most people put in blog posts, even though not all browsers sup\u00adport Math\u00adML dir\u00adectly. You just use the <a href=\"http:\/\/www.mathjax.org\/\">Math\u00adJax<\/a> JavaS\u00adcript lib\u00adrary. On Word\u00adPress there is even a plu\u00adgin that adds the right script ele\u00adment, the <a href=\"http:\/\/wordpress.org\/plugins\/mathjax-latex\/\">Math\u00adJax-Latex<\/a> plu\u00adgin. You can make every page load Math\u00adJax, or use the [math\u00adjax] short\u00adcode to tell it when to&nbsp;load.<\/p>\n<p>The wrinkle comes with Word\u00adPress\u2019 tend\u00adency to \u201ccor\u00adrect\u201d the markup. When you add the Math\u00adML, Word\u00adPress sprinkles it with &lt;br\/&gt; tags. Math\u00adJax chokes on those and shows noth\u00ading. Since the tags don\u2019t show up in the edit\u00ador view, you need some way of stop\u00adping Word\u00adPress from adding them. The best way I\u2019ve found is with the <a href=\"https:\/\/wordpress.org\/plugins\/raw-html\/\">Raw <span class=\"caps\">HTML<\/span><\/a> plugin.<\/p>\n<p>But there\u2019s a wrinkle with that too. For some reas\u00adon if you use the short\u00adcode ver\u00adsion of the begin and end mark\u00aders ([raw]) the edit\u00ador decides that the <span class=\"caps\">XML<\/span> char\u00adac\u00adters between those mark\u00aders has to be turned into the char\u00adac\u00adter entit\u00adies, so for example the &lt; char\u00adac\u00adters are turned into <span class=\"amp\">&amp;<\/span>lt;. To stop that, you need to a) check all the check\u00adboxes in the Raw <span class=\"caps\">HTML<\/span> set\u00adtings on the post, and b) use the com\u00adment ver\u00adsion (&lt;\u2013 raw \u2013&gt; and &lt;\u2013 \/raw \u2013&gt;) to mark the begin\u00adning and end of the sec\u00adtion instead of the short\u00adcode version.<\/p>\n<p>Once it\u2019s done it\u2019s easy to add equa\u00adtions to your pages, so it\u2019s worth the extra few minutes to set it all&nbsp;up.<\/p>\n<p><br>\n<!-- raw --><\/p>\n<p>A couple of examples taken from the <a href=\"http:\/\/www.mathjax.org\/demos\/mathml-samples\/\">Math\u00adJax samples page<\/a><\/p>\n<div class=\"math-header\">Curl of a Vec\u00adtor&nbsp;Field<\/div>\n<p><math display=\"block\"><mrow><mover accent=\"true\"><mrow><mo>\u2207<\/mo><\/mrow><mrow><mo>\u2192<\/mo><\/mrow><\/mover><mo>\u00d7<\/mo><mover accent=\"true\"><mrow><mi>F<\/mi><\/mrow><mrow><mo>\u2192<\/mo><\/mrow><\/mover><mo>=<\/mo><mrow><mo>(<\/mo><mfrac><mrow><mo>\u2202<\/mo><msub><mrow><mi>F<\/mi><\/mrow><mrow><mi>z<\/mi><\/mrow><\/msub><\/mrow><mrow><mo>\u2202<\/mo><mi>y<\/mi><\/mrow><\/mfrac><mo>\u2212<\/mo><mfrac><mrow><mo>\u2202<\/mo><msub><mrow><mi>F<\/mi><\/mrow><mrow><mi>y<\/mi><\/mrow><\/msub><\/mrow><mrow><mo>\u2202<\/mo><mi>z<\/mi><\/mrow><\/mfrac><mo>)<\/mo><\/mrow><mstyle mathvariant=\"bold\" mathsize=\"normal\"><mrow><mi>i<\/mi><\/mrow><\/mstyle><mo>+<\/mo><mrow><mo>(<\/mo><mfrac><mrow><mo>\u2202<\/mo><msub><mrow><mi>F<\/mi><\/mrow><mrow><mi>x<\/mi><\/mrow><\/msub><\/mrow><mrow><mo>\u2202<\/mo><mi>z<\/mi><\/mrow><\/mfrac><mo>\u2212<\/mo><mfrac><mrow><mo>\u2202<\/mo><msub><mrow><mi>F<\/mi><\/mrow><mrow><mi>z<\/mi><\/mrow><\/msub><\/mrow><mrow><mo>\u2202<\/mo><mi>x<\/mi><\/mrow><\/mfrac><mo>)<\/mo><\/mrow><mstyle mathvariant=\"bold\" mathsize=\"normal\"><mrow><mi>j<\/mi><\/mrow><\/mstyle><mo>+<\/mo><mrow><mo>(<\/mo><mfrac><mrow><mo>\u2202<\/mo><msub><mrow><mi>F<\/mi><\/mrow><mrow><mi>y<\/mi><\/mrow><\/msub><\/mrow><mrow><mo>\u2202<\/mo><mi>x<\/mi><\/mrow><\/mfrac><mo>\u2212<\/mo><mfrac><mrow><mo>\u2202<\/mo><msub><mrow><mi>F<\/mi><\/mrow><mrow><mi>x<\/mi><\/mrow><\/msub><\/mrow><mrow><mo>\u2202<\/mo><mi>y<\/mi><\/mrow><\/mfrac><mo>)<\/mo><\/mrow><mstyle mathvariant=\"bold\" mathsize=\"normal\"><mrow><mi>k<\/mi><\/mrow><\/mstyle><\/mrow><\/math><\/p>\n<div class=\"math-header\">Stand\u00adard Deviation<\/div>\n<p><math display=\"block\"><mrow><mi>\u03c3<\/mi><mo>=<\/mo><msqrt><mrow><mfrac><mrow><mn>1<\/mn><\/mrow><mrow><mi>N<\/mi><\/mrow><\/mfrac><mstyle displaystyle=\"true\"><mrow><munderover><mrow><mo>\u2211<\/mo><\/mrow><mrow><mi>i<\/mi><mo>=<\/mo><mn>1<\/mn><\/mrow><mrow><mi>N<\/mi><\/mrow><\/munderover><mrow><msup><mrow><mo stretchy=\"false\">(<\/mo><msub><mrow><mi>x<\/mi><\/mrow><mrow><mi>i<\/mi><\/mrow><\/msub><mo>\u2212<\/mo><mi>\u03bc<\/mi><mo stretchy=\"false\">)<\/mo><\/mrow><mrow><mn>2<\/mn><\/mrow><\/msup><\/mrow><\/mrow><\/mstyle><\/mrow><\/msqrt><\/mrow><\/math><\/p>\n<p>and one from my thes\u00adis from way back&nbsp;when<\/p>\n<p><math id=\"Ch5.E1.m1\" display=\"block\"><mrow><msup><mi>f<\/mi><mi>\u03bb<\/mi><\/msup><mo>=<\/mo><mrow><mrow><mi>n<\/mi><mi mathvariant=\"normal\">!<\/mi><\/mrow><mo>\u2062<\/mo><mfrac><mrow><msub><mo largeop=\"true\" symmetric=\"true\">\u220f<\/mo><mrow><mi>i<\/mi><mo>&lt;<\/mo><mi>k<\/mi><\/mrow><\/msub><mrow><mo>(<\/mo><mrow><msub><mi>l<\/mi><mi>i<\/mi><\/msub><mo>-<\/mo><msub><mi>l<\/mi><mi>k<\/mi><\/msub><\/mrow><mo>)<\/mo><\/mrow><\/mrow><mrow><mrow><msub><mi>l<\/mi><mn>1<\/mn><\/msub><mi mathvariant=\"normal\">!<\/mi><\/mrow><mo>\u2062<\/mo><mrow><msub><mi>l<\/mi><mn>2<\/mn><\/msub><mi mathvariant=\"normal\">!<\/mi><\/mrow><mo>\u2062<\/mo><mi mathvariant=\"normal\">\u22ef<\/mi><mo>\u2062<\/mo><mrow><msub><mi>l<\/mi><mi>r<\/mi><\/msub><mi mathvariant=\"normal\">!<\/mi><\/mrow><\/mrow><\/mfrac><\/mrow><\/mrow><\/math><\/p>\n<p><!-- \/raw --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019ve been work\u00ading at Design Sci\u00adence for a couple of months now, as Seni\u00ador Product Man\u00adager con\u00adcen\u00adtrat\u00ading on the Math\u00adFlow products. So I figured I should enable Math\u00adML sup\u00adport on my blog. It\u2019s not hard, but like everything in tech there are a few nig\u00adgly details. Many of those issues are caused by Word\u00adPress\u2019s over-eager \u2026 <a href=\"https:\/\/www.laurenwood.org\/anyway\/2014\/06\/mathjax-mathml-and-wordpress\/\" class=\"more-link\">Con\u00adtin\u00adue read\u00ading<span class=\"screen-reader-text\"> \u201cMath\u00adJax, Math\u00adML, and WordPress\u201d<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"","activitypub_status":"","footnotes":""},"categories":[1,6,4,105],"tags":[111],"class_list":["post-1303","post","type-post","status-publish","format-standard","hentry","category-general","category-technology","category-wp-mechanics","category-xml","tag-mathml"],"_links":{"self":[{"href":"https:\/\/www.laurenwood.org\/anyway\/wp-json\/wp\/v2\/posts\/1303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.laurenwood.org\/anyway\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.laurenwood.org\/anyway\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.laurenwood.org\/anyway\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.laurenwood.org\/anyway\/wp-json\/wp\/v2\/comments?post=1303"}],"version-history":[{"count":41,"href":"https:\/\/www.laurenwood.org\/anyway\/wp-json\/wp\/v2\/posts\/1303\/revisions"}],"predecessor-version":[{"id":1344,"href":"https:\/\/www.laurenwood.org\/anyway\/wp-json\/wp\/v2\/posts\/1303\/revisions\/1344"}],"wp:attachment":[{"href":"https:\/\/www.laurenwood.org\/anyway\/wp-json\/wp\/v2\/media?parent=1303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.laurenwood.org\/anyway\/wp-json\/wp\/v2\/categories?post=1303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.laurenwood.org\/anyway\/wp-json\/wp\/v2\/tags?post=1303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}