I would like to know how to configure Mathjax in Django in a Q&A system where Questions and Answers will be based on LaTeX format.
I have tried to add:
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
into the html template where the questions and answers will be displayed to no avail.
Thanks.
If the page's content is dynamically created, you will need to call MathJax after the content has been loaded. See the documentation for details. The main idea is that you have to include
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
in the javascript that is executed after the content is in place.
fOR Dynamic content here's is the working solution. I used AsciiMath Input as the input format in mathjax that incorporates ASCIIMathML.
In the base.html add the following scripts:
<script>
MathJax = {
loader: {load: ['input/asciimath', 'output/chtml']}
}
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/startup.js"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml.js">
and remember to enclose the dynamic text by back-ticks”, i.e., `...` So in the django-admin you can simply enter sqrt(50) as ` sqrt(50) ` or ` x^2 ` and the dynamic content which is passed from view to the template, in the template you surround {{e1}} by back-ticks
` {{ e1 }} `
instead of
{{ e1 }} where e1 is the dynamic content. So if e1 which was earlier displayed in plain text as 2*sqrt(2) will now be displyed as 2√2.
For more details: http://docs.mathjax.org/en/latest/input/asciimath.html#asciimath-support
see https://docs.mathjax.org/en/latest/web/configuration.html. For the demo indicated here to work you should also add ['\(', '\)'] to inlineMath:
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-svg.js">
</script>
Related
How do you set dynamic content passed from view to template to use mathjax or Latex. To be more precise in the terminal if 2*sqrt(2) would be displayed as 2√2 by pprint function. But in the django template it outputs as 2*sqrt(2) and not 2√2?
Finally figured out in case anyone else runs into the same problem here's is the working solution. I used AsciiMath Input as the input format in mathjax that incorporates ASCIIMathML.
In the base.html add the following scripts:
<script>
MathJax = {
loader: {load: ['input/asciimath', 'output/chtml']}
}
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/startup.js"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml.js">
and remember to enclose the dynamic text by back-ticks”, i.e., `...` So in the django-admin you can simply enter sqrt(50) as ` sqrt(50) ` or ` x^2 ` and the dynamic content which is passed from view to the template, in the template you surround {{e1}} by back-ticks
` {{ e1 }} ` instead of
{{ e1 }}
where e1 is the dynamic content. So if e1 which was earlier displayed in plain text as 2*sqrt(2) will now be displyed as 2√2.
For more details: http://docs.mathjax.org/en/latest/input/asciimath.html#asciimath-support
I would like to load MathJax in my base template with:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript"
src="{% static "js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" %}">
</script>
However in the rendered template the URL is returned as:
/static/js/MathJax/MathJax.js%3Fconfig%3DTeX-AMS-MML_HTMLorMML
and MathJax doesn't work.
If I hard-code the URL as src="/static/js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" it works. How can I prevent Django/Mezzanine from escaping the ? and = characters? Is there an alternative approach?
[The reason I want to use a local MathJax is for development when I'm away from an internet connection; I use a CDN in production.]
I would try moving the config parameter outside the static reference and see if that helps:
<script type="text/javascript"
src="{% static "js/MathJax/MathJax.js" %}?config=TeX-AMS-MML_HTMLorMML">
</script>
I don't know Django or Mezzanine, but if the static is what is encoding the URL characters, moving them outside might prevent that.
I'm creating content in my pages with some javascript. I'm creating my divs and adding scripts. So, content is pulled into page via javascript.
I'm also using django-tinymce package in my admin site. I'm typing and saving my HTML code via HTML button on tinymce. Everything works fine in template. But, when i want to edit that content, my divs are replaced with an empty div in Tinymce HTML view.
Here is my original html code:
<div site-widget="bulletin">
<bulletin-navigator></bulletin-navigator>
<bulletin-filter-container></bulletin-filter-container>
<bulletin-event-list-container></bulletin-event-list-container>
</div>
<script type="text/javascript" src="http://192.168.30.42:10000/assets/js/common.js"></script>
<script type="text/javascript" src="http://192.168.30.42:10000/assets/js/bulletin.js"></script>
After saving this html code, when i press HTML button on tinymce again i see the following html code:
<div> </div>
<script type="text/javascript" src="http://192.168.30.42:10000/assets/js/common.js"></script>
<script type="text/javascript" src="http://192.168.30.42:10000/assets/js/bulletin.js"></script>
my tincmce config is like this in settings.py file:
TINYMCE_DEFAULT_CONFIG = {
'plugins': "table,paste,searchreplace",
'theme': "advanced",
'cleanup_on_startup': True,
'custom_undo_redo_levels': 10,
'skin' : "o2k7",
'width' : "100%",
'height' : "600px",
'extended_valid_elements': 'div|bulletin-navigator|bulletin-filter-container|bulletin-event-list-container'
}
It looks like TinyMCE is kindly filtering out any tags it does not recognize. It is being overly helpful...
You may need to define 'custom_elements' in TinyMCE - http://www.tinymce.com/wiki.php/Configuration:custom_elements
Spend some time Here and configure it to fit your specific needs.
I am using d3js in a django web app. I have a static js script that contains a function to render a visualization given some data (passed in the context) and a selection (e.g. histogram(data,selection)). Why would d3 ignore the passed selection and directly append to the body?
This is a simplified version of my code.
Template:
{% load staticfiles %}
<script type="text/javascript" src="{% static 'd3.js' %}"></script>
<script src="{% static 'myd3vis.js' %}"></script>
<body>
<div class="vis"></div>
...
</body>
<script type="text/javascript">
mselection = d3.select(".visualization")
data = {{data|safe}}
histogram(data,selection)
</script>
In myd3vis.js file I define the histogram(data,selection) function, which contains something like this:
svg = console.append("svg").attr({"class":"visualization",
"width": 100,
"height":200})
...
When the template loads, the visualization svg is always appended to the body, instead of being appended to the <div class="vis"> element. Any idea why this would happen?
In most browsers’ JavaScript environments, console is a global object unrelated to the DOM – it provides debugging functions (e.g. console.log())… unless you’re clobbering it with a d3 DOM selection elsewhere, console.append() is unlikely to behave the way you seem to think it will.
Replace console with a bona-fide d3 selection, like:
var svg = d3.select('div.vis').attr(…); // et cetera
and inspect this object, to ensure your DOM logic is sound.
In my play framework app, I have a main.html, which at the very bottom includes this javascript tag:
<script>
$(function() {
// add js here
#{scripts /}
});
</script>
Now I would like to be able to add arbitrary javascript from other templates, which is then collected and added to the function body, so for example in view1.html, I'd like to add the function doCharts() to be called on jQuery's DOMReady:
#{append: 'scripts'}
doCharts();
#{/append}
This should then produce this output:
<script>
$(function() {
// add js here
doCharts();
});
</script>
Is this possible?
Yes this is possible
In your main file, after your script tag put
#{get 'moreScripts' /}
and in your other html files use
#{set 'moreScripts'}
<script type="text/javascript">
// put your script here
</script>
#{/set}
if you want to put another script in the same page you can put a get into the set like this
#{set 'moreScripts'}
#{get 'moreScripts' /}
<script type="text/javascript">
// put your script here
</script>
#{/set}