I'm using cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML-full
When MathJax tries to render $$2^2^x$$, it shows 2^2^x instead of error "Double exponent: use braces to clarify"
What configuration should I use in order to show the error?
Use
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: {
noErrors: {disabled: true}
}
});
</script>
just before the script that loads MathJax.js itself. That will display the error messages instead of the original TeX code.
Related
This seems to be the easiest thing to do, but it's just not working. In a normal browser the .html and .js files works perfectly, but in the Chrome/Firefox extension the onClick function is not performing what it's supposed to do.
.js file:
function hellYeah(text) {
document.getElementById("text-holder").innerHTML = text;
}
.html file:
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">
ha
</div>
<br />
<a onClick=hellYeah("xxx")>
hyhy
</a>
</body>
</html>
So basically once the user clicks "hyhy", "ha" should change into "xxx". And again - it works perfectly in the browser but does not work in the extension. Do you know why? Just in case I'm attaching the manifest.json below as well.
manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"http://api.flickr.com/"
]
}
Chrome Extensions don't allow you to have inline JavaScript (documentation).
The same goes for Firefox WebExtensions (documentation).
You are going to have to do something similar to this:
Assign an ID to the link (<a onClick=hellYeah("xxx")> becomes <a id="link">), and use addEventListener to bind the event. Put the following in your popup.js file:
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
hellYeah('xxx');
});
});
popup.js should be loaded as a separate script file:
<script src="popup.js"></script>
Reason
This does not work, because Chrome forbids any kind of inline code in extensions via Content Security Policy.
Inline JavaScript will not be executed. This restriction bans both inline <script> blocks and inline event handlers (e.g. <button onclick="...">).
How to detect
If this is indeed the problem, Chrome would produce the following error in the console:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
To access a popup's JavaScript console (which is useful for debug in general), right-click your extension's button and select "Inspect popup" from the context menu.
More information on debugging a popup is available here.
How to fix
One needs to remove all inline JavaScript. There is a guide in Chrome documentation.
Suppose the original looks like:
<a onclick="handler()">Click this</a> <!-- Bad -->
One needs to remove the onclick attribute and give the element a unique id:
<a id="click-this">Click this</a> <!-- Fixed -->
And then attach the listener from a script (which must be in a .js file, suppose popup.js):
// Pure JS:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("click-this").addEventListener("click", handler);
});
// The handler also must go in a .js file
function handler() {
/* ... */
}
Note the wrapping in a DOMContentLoaded event. This ensures that the element exists at the time of execution. Now add the script tag, for instance in the <head> of the document:
<script src="popup.js"></script>
Alternative if you're using jQuery:
// jQuery
$(document).ready(function() {
$("#click-this").click(handler);
});
Relaxing the policy
Q: The error mentions ways to allow inline code. I don't want to / can't change my code, how do I enable inline scripts?
A: Despite what the error says, you cannot enable inline script:
There is no mechanism for relaxing the restriction against executing inline JavaScript. In particular, setting a script policy that includes 'unsafe-inline' will have no effect.
Update: Since Chrome 46, it's possible to whitelist specific inline code blocks:
As of Chrome 46, inline scripts can be whitelisted by specifying the base64-encoded hash of the source code in the policy. This hash must be prefixed by the used hash algorithm (sha256, sha384 or sha512). See Hash usage for <script> elements for an example.
However, I do not readily see a reason to use this, and it will not enable inline attributes like onclick="code".
I had the same problem, and didn´t want to rewrite the code, so I wrote a function to modify the code and create the inline declarated events:
function compile(qSel){
var matches = [];
var match = null;
var c = 0;
var html = $(qSel).html();
var pattern = /(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/mg;
while (match = pattern.exec(html)) {
var arr = [];
for (i in match) {
if (!isNaN(i)) {
arr.push(match[i]);
}
}
matches.push(arr);
}
var items_with_events = [];
var compiledHtml = html;
for ( var i in matches ){
var item_with_event = {
custom_id : "my_app_identifier_"+i,
code : matches[i][5],
on : matches[i][3],
};
items_with_events.push(item_with_event);
compiledHtml = compiledHtml.replace(/(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/m, "<$2 custom_id='"+item_with_event.custom_id+"' $7 $8");
}
$(qSel).html(compiledHtml);
for ( var i in items_with_events ){
$("[custom_id='"+items_with_events[i].custom_id+"']").bind(items_with_events[i].on, function(){
eval(items_with_events[i].code);
});
}
}
$(document).ready(function(){
compile('#content');
})
This should remove all inline events from the selected node, and recreate them with jquery instead.
I decide to publish my example that I used in my case. I tried to replace content in div using a script. My problem was that Chrome did not recognized / did not run that script.
In more detail What I wanted to do: To click on a link, and that link to "read" an external html file, that it will be loaded in a div section.
I found out that by placing the script before the DIV with ID that
was called, the script did not work.
If the script was in another DIV, also it does not work
The script must be coded using document.addEventListener('DOMContentLoaded', function() as it was told
<body>
<a id=id_page href ="#loving" onclick="load_services()"> loving </a>
<script>
// This script MUST BE under the "ID" that is calling
// Do not transfer it to a differ DIV than the caller "ID"
document.getElementById("id_page").addEventListener("click", function(){
document.getElementById("mainbody").innerHTML = '<object data="Services.html" class="loving_css_edit"; ></object>'; });
</script>
</body>
<div id="mainbody" class="main_body">
"here is loaded the external html file when the loving link will
be clicked. "
</div>
As already mentioned, Chrome Extensions don't allow to have inline JavaScript due to security reasons so you can try this workaround as well.
HTML file
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">ha</div><br />
<a class="clickableBtn">
hyhy
</a>
</body>
</html>
<!doctype html>
popup.js
window.onclick = function(event) {
var target = event.target ;
if(target.matches('.clickableBtn')) {
var clickedEle = document.activeElement.id ;
var ele = document.getElementById(clickedEle);
alert(ele.text);
}
}
Or if you are having a Jquery file included then
window.onclick = function(event) {
var target = event.target ;
if(target.matches('.clickableBtn')) {
alert($(target).text());
}
}
I am trying to convert a asciidoc file containing math expression to html using AsciidoctorJ, but have been unsuccessful so far.
This is the math.asciidoc that i am trying to convert.
= My Diabolical Mathmatical Opus
Jamie Moriarty
sample1
asciimath:[sqrt(4) = 2]
stem:[sqrt(4) = 2]
I am using the below configuration in Asciidoc
Attributes attributes = AttributesBuilder.attributes()
.math("asciimath")
.get();
Options options = OptionsBuilder.options()
.attributes(attributes)
.docType("article")
.safe(SafeMode.SERVER)
.backend("html5")
.get();
asciidoctor.convert(asciiDoc, options);
The output always shows something like this:
sample1
\$sqrt(4) = 2\$
\$sqrt(4) = 2\$
In the above generated HTML output, how do we render the mathematical equations?
Asciidoctor support asciimath and latexmath syntax and the output produced by asciimath can be rendered on browser using http://asciimath.org js library (other asciimath libraries can also be used).
Asciidoctorj uses \$ as the delimiter for asciimath markup, so we need to configure MathJax using the following configuration:
<html>
<head>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
asciimath2jax: {
delimiters: [['\\$','\\$'], ['`','`']]
}
});
</script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
...
</head>
//rest of html
</html>
After we include the above code snippet in <head> section of html, asciimath rendering shall work fine.
We can refer to this section of Asciidoctor documents for activating support of asciimath inside asciidocs: https://asciidoctor.org/docs/user-manual/#activating-stem-support
I have set the delimiters for displayMath to \[(...\] and $$..$$ as follow
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ["$$","$$"], ["\\[","\\]"] ],
processEscapes: true,
}
});
</script>
The problem is that when using \[(...\] delimiters, the equation is centered. However, when using $$...$$ it is not but is in a new line. Using Any other delimiters is fine.
Inspecting the code I found that MathJax is not generating the css class "MathJax_Display" when using $$...$$.
To explain more, when I put an equation between \[...\], I get something like this
\[x^2+2x+1=0\] (This will be centered in a new line)
However when I put equation between $$...$$, I get something like this
$$x^2+2x+1=0$$ (This will be in anew line but not centered)
Any suggestions to be able to use $$...$$?
I'm trying to get the buttons extension to work, but I keep getting errors when attempting to initialize the table.
included files:
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="assets/js/pdfmake.min.js"></script>
<script src="assets/js/vfs_fonts.js"></script>
<script src="assets/js/jszip.js"></script>
I have tried including these as well, but I also get errors that I assume are cascading from the original problem. I have commented them out at the moment:
https://cdn.datatables.net/buttons/1.0.3/js/buttons.print.min.js
https://cdn.datatables.net/buttons/1.0.3/js/buttons.flash.min.js
https://cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js
Using method 1 to create the table:
$("#generic-list-table").DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
]
} );
I get the following error in buttons.min.js:
a.init is not a function
When using the second method:
var table = $('#generic-list-table').DataTable();
new $.fn.dataTable.Buttons( table, {
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
]
} );
I get this error:
this.c.dom.container is undefined
I'm copying the examples exactly. I'm at a loss as to what I'm supposed to be doing differently.
I used the example code (https://www.datatables.net/extensions/buttons/examples/initialisation/simple.html) and download all the related references to work local and it works well.
Check this link to download the example with local files.
This is the code to initiallise
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
I was experiencing the same issue but i finally figured it out. You have to load the required files in a correct order.
See if this order sorts your issue
<script src="/js/jquery-2.1.1.js"></script>
<script src="/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="/js/plugins/dataTables/dataTables.tableTools.min.js"></script>
<script src="/js/export_data/pdfmake.min.js"></script>
<script src="/js/export_data/dataTables.buttons.min.js"></script>
<script src="/js/export_data/buttons.flash.min.js"></script>
<script src="/js/export_data/vfs_fonts.js"></script>
<script src="/js/export_data/jszip.min.js"></script>
<script src="/js/export_data/buttons.html5.min.js"></script>
Mine worked with this order. It appears like some files use variables in others.
In your case, you will need to have
<script src="assets/js/pdfmake.min.js"></script>
Before
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
Jquery first, pdfmake follows then the others.
check reference in master page and data table page...may be your reference file available in both..remove from one of them is solve problem for me
I'm trying to get JavaScript to render on my page using Jade (http://jade-lang.com/)
My project is in NodeJS with Express, eveything is working correctly until I want to write some inline JavaScript in the head. Even taking the examples from the Jade docs I can't get it to work what am I missing?
Jade template
!!! 5
html(lang="en")
head
title "Test"
script(type='text/javascript')
if (10 == 10) {
alert("working")
}
body
Resulting rendered HTML in browser
<!DOCTYPE html>
<html lang="en">
<head>
<title>"Test"</title>
<script type="text/javascript">
<if>(10 == 10) {<alert working></alert></if>}
</script>
</head>
<body>
</body>
</html>
Somethings definitely a miss here any ideas?
simply use a 'script' tag with a dot after.
script.
var users = !{JSON.stringify(users).replace(/<\//g, "<\\/")}
https://github.com/pugjs/pug/blob/master/packages/pug/examples/dynamicscript.pug
The :javascript filter was removed in version 7.0
The docs says you should use a script tag now, followed by a . char and no preceding space.
Example:
script.
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
will be compiled to
<script>
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
</script>
Use script tag with the type specified, simply include it before the dot:
script(type="text/javascript").
if (10 == 10) {
alert("working");
}
This will compile to:
<script type="text/javascript">
if (10 == 10) {
alert("working");
}
</script>
No use script tag only.
Solution with |:
script
| if (10 == 10) {
| alert("working")
| }
Or with a .:
script.
if (10 == 10) {
alert("working")
}
THIRD VERSION OF MY ANSWER:
Here's a multiple line example of inline Jade Javascript. I don't think you can write it without using a -. This is a flash message example that I use in a partial. Hope this helps!
-if(typeof(info) !== 'undefined')
-if (info)
- if(info.length){
ul
-info.forEach(function(info){
li= info
-})
-}
Is the code you're trying to get to compile the code in your question?
If so, you don't need two things: first, you don't need to declare that it's Javascript/a script, you can just started coding after typing -; second, after you type -if you don't need to type the { or } either. That's what makes Jade pretty sweet.
--------------ORIGINAL ANSWER BELOW ---------------
Try prepending if with -:
-if(10 == 10)
//do whatever you want here as long as it's indented two spaces from
the `-` above
There are also tons of Jade examples at:
https://github.com/visionmedia/jade/blob/master/examples/
script(nonce="some-nonce").
console.log("test");
//- Workaround
<script nonce="some-nonce">console.log("test");</script>
For multi-line content jade normally uses a "|", however:
Tags that accept only text such as
script, style, and textarea do not
need the leading | character
This said, i cannot reproduce the problem you are having. When i paste that code in a jade template, it produces the right output and prompts me with an alert on page-load.
Use the :javascript filter. This will generate a script tag and escape the script contents as CDATA:
!!! 5
html(lang="en")
head
title "Test"
:javascript
if (10 == 10) {
alert("working")
}
body