How can I auto render katex without having to use $$? - javascript

I've been struggling to understand how to render Katex without having to use $$ before and after the math expression. Katex on github says I should use this:
<script>
renderMathInElement(document.body);
</script>
But I still need to use $$ for each line of code. How can I render the whole page as katex? Thank you!

Here's a simple example. If you paste this code in an HTML file and then open that file in a browser, it should render, and with no occurrences of $$ anywhere to be found, so hopefully you can then tweak it to whatever you need.
Not sure why, but I needed to use \\ wherever I found \ on the Katex function support page, so if \\ doesn't work for you, try switching it to \.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
</head>
<body>
<span id="formula">f(x)</span>
<script>
katex.render("\\int_0^1{f(x)}", formula);
</script>
</body>
</html>

Related

HTML/JavaScript quoting bug in all major browsers?

Assume, you want to shown an alert with the string content of <!-- Comment --> <script type="text/javascript"></script> in JavaScript on a HTML page. You can do that with the following code:
<!DOCTYPE html>
<html>
<head>
<title>Quoting</title>
</head>
<body>
<script type="text/javascript">
alert('<!-- Comment --> <script type="text/javascript"></script\u003E');
</script>
</body>
</html>
Note here the quoted > character in the </script> part of the text. This uses a JavaScript Unicode escape to prevent the HTML parser from interpreting this part of the string literal as the end of the script tag. The code above works perfectly in FF, Chrome, IE.
Now try to apply the > quoting also to the end of the comment within the string literal. This should change nothing, because the XML comment syntax should not be interpreted within script tags in HTML (and obviously is not interpreted, because the comment syntax was shown in the alert):
<!DOCTYPE html>
<html>
<head>
<title>Quoting</title>
</head>
<body>
<script type="text/javascript">
alert('<!-- Comment --\u003E <script type="text/javascript"></script\u003E');
</script>
</body>
</html>
Interestingly, this code breaks - the alert is not printed when the page loads. The problem can be reproduced at least in FF, Chrome and IE. Am I missing something in the specs, or is that a "browser-independent" bug in the HTML parser of all major browsers?
The DOM inspector shows the following:
It looks like the rest of the document is interpreted as part of the script in this case.
Any ideas?
This is not a bug.
The first < puts the parser into Script data less-than sign state then the ! puts it in script data escape start state and so on.
Replacing the > that ended the HTML comment with an escape sequence means it doesn't come out of the "dealing with a comment" state until it hits the end of the HTML document.
It is a historical artefact of the hack early HTML used to allow inline scripts without the JS source code showing up on the page for browsers which didn't support the <script> element.

Wordpress: how to use javascript variables into html body

I'm really new in Wordpress, Javascript and HTML so I know this question is really basic, but I wasn't able to find it solved anywhere.
I want to create some variables in javascript and then display them in my page which is created in Wordpress.
Reading other posts I've found I need to insert a javascript code that at the end stores my variable this way (dummy version):
<script type="javascript">
document.getElementById('test').innerHTML = 'hello';
</script>
And then on the text block I want to display my variable to be displayed I should add this code:
<body>
<p id="test"></p>
</body>
However I've tried adding the javascript in the header (Tatsu header) and also tried adding it in the text block (HTML version) in different combinations and it never worked. Tried adding the script block before and after the body block, and also tried having it inside, before and after the display line.
If I try the following it works:
<body>
<p>hello</p>
</body>
So I guess my problem is that I'm not setting the variable properly.
Can anyone help? Apologies if this is already solved somewhere, spent some hours and wasn't able to find it.
Thank you in advance.
Your problem is the type of which you're using here:
<script type="javascript">
I noticed this whilst constructing an example of this problem.
javascript is not a correct mime type.
It should be text/javascript as per https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
Please note this is not a complete list. Such as application/javascript also being valid. Please also see https://www.iana.org/assignments/media-types/media-types.xhtml
Working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p id="test">
This shouldn't show up
</p>
<script type="text/javascript">
console.log("####### JAVASCRIPT IS RUNNING ######")
document.getElementById('test').innerHTML = 'hello';
</script>
</body>
</html>

6 javascript tasks assigned to me by my lecturer

I am a complete beginner to javascript. I am also new to this website. I am asking for help to complete an assignment. I have been trying for more than 4 hours by looking at lecture material and online for a solution. It is causing me a lot of unnecessary stress. Before javascript we only used CSS and Html. I was given 6 javascript tasks to manipulate the html file (taskc.html) already given to me.
The tasks are as follows
Make a statement to change contents of h1 from "Welcome" to "Text"
2nd statement should make an new alert window when the page loads that delivers a message explaining what the page is about
3rd statement should change the title to "text"
4th statement should log the contents (innerHTML) of the first paragraph element in the console.
5th statement should hide the contents of the second paragraph when the page loads
6th statement should change the contents of the header to have a new colour of your choice
Here is that html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
</body>
</html>
Because the actual coding im meant to add is meant to be in the .js file I was given. so I figured I had to link the js file in the html file so I added
<script type="text/javascript" src="taskc.js"></script>
With that out of the way I went to the lecture notes and I thought I would simply need to modify some of the code given to me there like
document.getElementById('demo').innerHTML = 'Hello World!';
When I put this code in brackets I got the error (document is not defined)
I modified it to match the requirements for task 1
here it is
document.getElementById('header').innerHTML = 'text';
I was confused because I didn't know what this error meant and of course Errors and how to fix them are never explained so I had to lookup how to resolve the error.
I found that to fix it I have to declare it as a variable so I ended up doing this.
var document = 'taskc.html';
When I did this for document, alert and console all the errors went away, but when I did a live preview only statement 1 was working
If anyone could help me fix this I would really appreciate because I don't understand enough javascript to be able to complete this in a reasonable amount of time.
So first: Please use Javascript functions to keep your code tidy and clean.
Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
<script type="text/javascript" src="taskc.js">test();</script>
</body>
</html>
function test(){
alert("This is a test!");
}
Always implement scripts that are document referenced at the bottom of your html.
If you use JQuery you can use following code to check document is loaded:
$(document).ready(function(){
//foo bar
});

Javascript Runtime error: $ is undefined

I have added script in my Default.aspx page. I am getting following error.
$ is defined by jQuery, which you probably haven't referenced. A simple way to get it is to add one of the CDN urls to your template HTML:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
You need to include jQuery: http://learn.jquery.com/about-jquery/how-jquery-works/
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
**<script src="jquery.js"></script>**
</head>
<body>
...
</body>
</html>
I had the same problem, but did have a correct reference to jQuery.
I solved it by referencing jQuery before any other scripts. In your case, it would look like this:
<script src= "scripts/jquery-ui.js" />
<script src= "scripts/JavaScript_scroll.js" />
Hope this helps anyone else with a similar issue.
I had the Same Problem as that $ is Unidentified, After a long struggle, I come to know that there is some thing HTML coder error in Master Page, So it worked fine when i include the Jquery files directly in Content page
(For others who may face the same problem as OP's)
I had the same problem, but the reason was that I was trying to load my jQuery script before loading the jQuery library itself. In other words, make sure that you first add this line:
<script src="Scripts/jquery-{version}.min.js"></script>
before adding
<script src="Scripts/JavaSript_scroll.js"></script>

Missing } in XML Expression

I am trying to change our site to load a Header through jquery using the .load() function but to do so I need to set the Title of the page.
From another StackFlow question it was suggested to do something as simple as
$(document).ready(function() {
document.title ='Name Changed to Protect the Innocent';
});
When i do this I get the firebug error
Missing } in XML Expression for that line in the script
I am sure there is probably an easy solution but it is certainly escaping me.
I've just tested this out here, please see if you have created your html document in the same way. Code as below.
<html>
<head>
<title>Old Title</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
document.title ='Name Changed to Protect the Innocent';
});
</script>
</body>
</html>
I found what the problem was. This script was in the middle of another script block which was causing the error.
Thanks for all the help.

Categories