I am using MathJax to render formulas into HTML pages. I am using this HTML in the head of my document to configure and import MathJax:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS" : {
availableFonts : ["STIX"],
preferredFont : "STIX",
webFont : "STIX-Web",
imageFont : null
}
});
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=AM_HTMLorMML">
</script>
I have this formula that I would like MathJax to render:
`v = (pi w (w^2 a^2 + 2540 w a d)) / 10000000`
MathJax renders it like this:
Notice the large constants, especially 10000000, are difficult to understand without thousands separators. I would like MathJax to automatically insert thousands separators when it renders this equation. I have searched the MathJax documentation at http://docs.mathjax.org and searched using Google, but I can't find any mention of thousands separators in MathJax. I also found this StackOverflow question MathJax rendering of commas in numbers with a workaround for TeX, but the work around doesn't work for me because I am rendering the formulas into HTML pages, not into a TeX document.
How can I configure MathJax to automatically output commas as thousands separators within a formula?
Related
EDIT: You can see the issue here (look in source).
EDIT2: Interesting, it is not an issue in source. Only with the console (Firebug as well).
I have the following markup in a file called test.html:
<!DOCTYPE html>
<html>
<head>
<title>Test Harness</title>
<link href='/css/main.css' rel='stylesheet' type='text/css' />
</head>
<body>
<h3>Test Harness</h3>
</body>
</html>
But in Chrome, I see:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
"
"
<title>Test Harness</title>
<link href='/css/main.css' rel='stylesheet' type='text/css' />
<h3>Test Harness</h3>
</body>
</html>
It looks like ̢ is a zero width space, but what is causing it? I am using Sublime Text 2 with UTF-8 encoding and Google App Engine with Jinja2 (but Jinja is simply loading test.html). Any thoughts?
Thanks in advance.
It is an issue in the source. The live example that you provided starts with the following bytes (i.e., they appear before <!DOCTYPE html>): 0xE2 0x80 0x8B. This can be seen e.g. using Rex Swain’s HTTP Viewer by selecting “Hex” under “Display Format”. Also note that validating the page with the W3C Markup Validator gives information that suggests that there is something very wrong at the start of the document, especially the message “Line 1, Column 1: Non-space characters found without seeing a doctype first.”
What happens in the validator and in the Chrome tools – as well as e.g. in Firebug – is that the bytes 0xE2 0x80 0x8B are taken as character data, which implicitly starts the body element (since character data cannot validly appear in the head element or before it), implying an empty head element before it.
The solution, of course, is to remove those bytes. Browsers usually ignore them, but you should not rely on such error handling, and the bytes prevent useful HTML validation. How you remove them, and how they got there in the first place, depends on your authoring environment.
Since the page is declared (in HTTP headers) as being UTF-8 encoded, those bytes represent the ZERO WIDTH SPACE (U+200B) character. It has no visible glyph and no width, so you won’t notice anything in the visual presentation even though browsers treat it as being data at the start of the body element. The notation is a character reference for it, presumably used by browser tools to indicate the presence of a normally invisible character.
It is possible that the software that produced the HTML document was meant to insert ZERO WIDTH NO-BREAK SPACE (U+FEFF) instead. That would have been valid, since by a special convention, UTF-8 encoded data may start with this character, also known as byte order mark (BOM) when appearing at the start of data. Using U+200B instead of U+FEFF sounds like an error that software is unlikely to make, but human beings may be mistaken that way if they think of the Unicode names of the characters.
I understand that there is a bug in SharePoint 2013 where the HTML editor adds these characters into your content.
I've been dealing with this for a bit and this is the solution I am using which seems to be working. I added this javascript into a file referenced by my masterpage.
var elements = ["h1","h2","h3","h4","p","strong","label","span","a"];
function targetZWS(){
for (var i = 0; i < elements.length; i++) {
jQuery(elements[i]).each(function() {
removeZWS(this);
});
}
}
function removeZWS(target) {
jQuery(target).html(jQuery(target).html().replace(/\u200B/g,''));
}
/*load functions*/
$(document).ready(function() {
_spBodyOnLoadFunctionNames.push("targetZWS");
});
Links I looked into investigating this:
https://social.msdn.microsoft.com/Forums/sharepoint/en-US/23804eed-8f00-4b07-bc63-7662311a35a4/why-does-sharepoint-put-in-character-code-8203-in-a-richtext-field?forum=sharepointdevelopment
https://social.technet.microsoft.com/Forums/office/en-US/e87a82f0-1ab5-4aa7-bb7f-27403a7f46de/finding-8203-unicode-characters-in-my-source-code?forum=sharepointgeneral
http://www.sharepointpals.com/post/Removing-8203-in-RichTextHTML-field-Sharepoint
Try this script. It works for me
$( document ).ready(function() {
var abc = document.body.innerHTML;
var a = String(abc).replace(/\u200B/g,'');
document.body.innerHTML = a;
});
I have experienced this in a major project I was working on.
The trick is to just:
copy the whole code into notepad.
save it as a text file.
close the file. open it again and copy your code back into your IDE
environment.
and its voilà, it's gone.!
I was able to remove these in Sublime by selecting the characters surrounding it and copy/pasting into Find and Replace.
In my case, symbol "" did not appear in the code editor MS Code and was visible only in the tab Elements Chrome. It helped to delete the tag after which this symbol appeared and the reprint of this tag was handwritten again, apparently this symbol clung to the ctrl+c / ctrl+v while transferring the code.
This “8203;” HTML character is a no width break control.
It can easily find in the Google Chrome Browser inspect elements section. And When you try to remove it from your code, most of the Major IDE not showing to me...(Maybe by my preference).
I found the new text editor Brackets download it and open my code in the editor. It shows the character with red dots. Just remove it check everything is working well.
I found this solution from a blog. What is “8203” HTML character? Why is being injected into my HTML?
Thank You for saving me hours.
I cannot find where it's being injected on my page. I'll investigate it more later, but for now, I just threw this in my page so I can keep working.
$(function(){
$('body').contents().eq(0).each(function(){
if(this.nodeName.toString()=='#text' && this.data.trim().charCodeAt(0)==8203){
$(this).remove();
}
});
});
I'm using MathJax in a hand-written web page (which is unfortunately not online yet, so I cannot point you to the whole source code).
I embed MathJax in the page as follows, which is simply copy/pasted from the official documentation:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {
webFont: "TeX"
}
});
</script>
<script
type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML.js">
</script>
After that, MathJax seems to work well on every formula I tried, but I cannot get it to render the \TeX and \LaTeX commands to obtain the TeX and LaTeX logos. Everything on the web makes it look like these two commands are supported by MathJax, and I remember of having used them with MathJax in a wordpress blog years ago, so I think there must be some extension or option missing.
So why are those commands not working and what can I do to fix them? Or are they not supported?
MathJax only processes the math on the page, not other text-mode macros. So if you want MathJax to process the \TeX or \LaTeX macros, try using
$\rm\TeX$ or $\rm\LaTeX$
in your page instead.
EDIT:
Here is an example. Run the code snippet to see it work.
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
\(\rm\TeX\) and \(\rm\LaTeX\)
I have some MathJax on my webpage and would like nothing to appear until the MathJax has finished processing my equations: no raw LaTeX and no loading progress indicator.
Is there a way to accomplish this with MathJax configuration settings?
Hey if you still need an answer, try the following.
If you call MathJax.Hub.Config(), pass the parameter preview: "none" to the tex2jax object in the config. Like so:
MathJax.Hub.Config({
tex2jax:
{
preview: "none"
}
});
This will not show any raw tex commands that MathJax will pick up. It will allow to you still display other elements in your markup so your page doesn't look blank as the browser renders it.
Hope this helps.
I have recently started a blog, in which I talk about programming, reading, science, and math. Now, for the programming part, I have installed SyntaxHighlighter, but I am rather confused with what I should use for math. I'm thinking about using MathJax, since I'm used to it and it's pretty good. The issue is, MathJax will interfere with other stuff. For example, it can interfere with any PHP code (which has lots of dollar signs) that I use on a programming post.
Now I want to keep the inline/block dollar signs, but I don't want it to blow up other stuff. I was thinking about associating MathJax with a certain CSS class, so that I can enclose all sections which use math extensively with those tags. By this, I mean that I can still type normally within those divs (without having it math-ified), but I can use the dollar signs and get math code. Outside the divs, any dollar signs will be left alone.
Does anyone know a configuration option that lets me do this? I know JS, but I can't find any options in the documentation. Thought I'd ask here before plowing through the code.
add class="tex2jax_ignore" to your document <body> tag, and then use class="tex2jax_process" on the containers for the parts of your page where you want to include mathematics. As others have pointed out, you can configure the class names to use for these features. E.g.
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'],['\\(','\\)']],
processClass: "mathjax",
ignoreClass: "no-mathjax"
}
});
</script>
Then your page would be
<html>
<head>
...
</head>
<body class="no-mathjax">
...
<div class="mathjax">
... (math goes here) ...
</div>
...
</body>
</html>
Hope that helps.
Davide
Credit: #MarkS.Everitt
http://www.mathjax.org/docs/1.1/options/tex2jax.html
There is a configuration option, processClass: "tex2jax_process"
The final configuration becomes:
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],'
ignoreClass: "[a-zA-Z1-9]*",
processClass: "math"
}
});
The existing answers are IMO not real solutions because they involve modifying your HTML. Sometimes this isn't even possible, but even when it is, who wants to dirty their markup with meaningless CSS classes just to get MathJax working?
Insert the following tag before the <script> tag that imports MathJax:
<script type="text/x-mathjax-config">
MathJax.Hub.Config(
{
elements: mathElements
}
);
</script>
where mathElements contains a list of DOM elements to be processed, for example something like var mathElements = document.querySelectorAll("article").
If MathJax can export formula as image, I can use to insert it to a webpage easily. Unfortunately, current MathJax don't support to export image! :(
Is there a simple way to create a embeded code to show formula just like Twitter above? If you have, could you show me some sample codes? Thanks!
< href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="my">Tweet
< script type="text/javascript" src="//platform.twitter.com/widgets.js">
See my response to this question on the MathJax user's forum.
MathJax does not have image creation capabilities, and I don't know of a way to
make that possible from Javascript (a quick web search suggests it is not readily doable).
If you are looking to convert TeX to images, there are plenty of tools for doing that
already. You could, for example, use TeX with dvipng, or one of the tools designed for
that like the LaTeX Equation Editor or Laeqed applications. There are a number of
on-line tools for doing this as well.
This question is already kinda old. But was searching for something like this myself. Apparently there are some Tex Rendering Services Available.
Take a look at this Answer:
https://meta.stackexchange.com/questions/53436/implement-an-api-call-to-display-latex-as-inline-image
Try this
<html>
<head>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<body>
$$e = mc^2$$
</body>
</html>
http://jsfiddle.net/16h1hjot