I'm making a personal homepage with Django. I am using django-markdownx for the content of article model. In addition, Katex has been implemented to the project with lines of JS in the Django template HTML to render Latex.
What I'm having a hard time is applying this Katex JS code to the Django admin page. How can I implement the JS code below to specific elements of the Django admin page? I don't want the script to be applied to all elements of the admin page, because editing text boxes should show raw Latex code, but only the preview part should render Latex parts as equations.
Here are django-markdownx, and Katex references:
https://neutronx.github.io/django-markdownx/
https://katex.org/docs/api.html
This is a JS code block that I'm using for Latex rendering.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.css"
integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq"
crossorigin="anonymous"
/>
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script
defer
src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/katex.min.js"
integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz"
crossorigin="anonymous"
></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script
defer
src="https://cdn.jsdelivr.net/npm/katex#0.11.1/dist/contrib/auto-render.min.js"
integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI"
crossorigin="anonymous"
onload="renderMathInElement(document.body);"
></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
delimiters: [
{ left: "$$", right: "$$", display: true },
{ left: "\\[", right: "\\]", display: true },
{ left: "$", right: "$", display: false },
{ left: "\\(", right: "\\)", display: false }
]
});
});
</script>
Related
I have my app using gmaps4rails working for a while after Google moved to GIT.
Here is what I am using in the application.htm.erb
<script src="https://maps.google.com/maps/api/js?v=3.23&libraries=geometry;&key=AIzaSyAncOJnAgKEjrv2PY__Z0gYy3zJyTznUQ0" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker-compiled.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox_packed.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer_packed.js" type="text/javascript"></script>
And in the Gemfile I have these lines
gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
In the application.js I have this line
//= require gmaps/google
Here is the page supposed to render the map.
<div class="row-fluid">
<div id="map" style='width: 100%; height: 500px; border: 1px solid black;'></div>
</div>
<script type="text/javascript">
buildMap (<%=raw #hash.to_json %>);
</script>
And the associated coffee script is
class RichMarkerBuilder extends Gmaps.Google.Builders.Marker #inherit from builtin builder
#override create_marker method
create_marker: ->
options = _.extend #marker_options(), #rich_marker_options()
#serviceObject = new RichMarker options #assign marker to #serviceObject
rich_marker_options: ->
marker = document.createElement("div")
marker.setAttribute 'class', 'marker_container'
marker.innerHTML = #args.title
_.extend(#marker_options(), { content: marker })
infobox: (boxText)->
content: boxText
pixelOffset: new google.maps.Size(-140, 0)
boxStyle:
width: "400px"
# override method
create_infowindow: ->
return null unless _.isString #args.infowindow
boxText = document.createElement("div")
boxText.setAttribute("class", 'marker_info_box') #to customize
boxText.innerHTML = #args.infowindow
#infowindow = new InfoBox(#infobox(boxText))
#buildMap = (markers)->
handler = Gmaps.build 'Google', { builders: { Marker: RichMarkerBuilder} } #dependency injection
#then standard use
handler.buildMap { provider: {}, internal: {id: 'map'} }, ->
markers = handler.addMarkers(markers)
handler.bounds.extendWith(markers)
handler.fitMapToBounds()
None of this code was recently changed (in the last week or so).
I only executed a bundle update today that upgraded the gems jbuilder from 2.4.1 to 2.5.0 and autoprefixer from 6.3.6.1 to 6.3.6.2.
The app was working having the map rendered until now when the map is not shown anymore.
I reverted these two gems to the previous versions but still no map rendered.
Don't know how to make it working again?
I just changed the order of the scripts to be loaded and now the map is rendered again, here is the code:
<script src="//maps.google.com/maps/api/js?v=3.23&libraries=geometry;&key=AIzaSyAncOJnAgKEjrv2PY__Z0gYy3zJyTznUQ0" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker-compiled.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox_packed.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer_packed.js" type="text/javascript"></script>
Problem solved.
I try to display week numbers but nothing happens
I put weeknumber in the javascript file
$(document).ready(function() {
$('#calendar').fullCalendar({
weekNumbers: true,
height:400,
header: {
left: 'prev,next today, save',
center: 'title',
right: 'month,agendaWeek,agendaDay,agendaFourDay'
},
'defaultView': 'month',
editable: true,
.....
what is this problem ?
Did you import necessary CSS and js for it ?
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
moreover
weekNumbers:
If set to true, week numbers will be displayed in a separate left column in the month/basic views as well as at the top-left corner of the agenda views. See Available views
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'm using the new sightly language in AEM6 to render my components using templates, in my component there is a video that uses the JWPlayer plugin which needs the following code to initalise the video:
<div id='playerpwSIOjcRZrCa'></div>
<script type='text/javascript'>
jwplayer('playerpwSIOjcRZrCa').setup({
file: '//www.youtube.com/watch?v=123456',
title: 'Video title',
width: '100%',
aspectratio: '16:9'
});
</script>
But I want to make the Youtube variable dynamic so the user can change the id within the author so have got the following template passing in the videoPath (youtube id):
<template data-sly-template.player="${# videoPath}">
Video Id: ${videoPath}
<script src="//jwpsrv.com/library/HjcD1BZoEeS7ByIAC0MJiQ.js"></script>
<div id='playerpwSIOjcRZrCa'></div>
<script type='text/javascript'>
jwplayer('playerpwSIOjcRZrCa').setup({
file: '//www.youtube.com/watch?v=' ${videoPath},
title: 'Video title',
width: '100%',
aspectratio: '16:9'
});
</script>
</template>
The problem I'm having is the ${videoPath} in the tags is not rendering the id where as the one at the top of the template is.
Is there a way in solving this using the sightly templates?
Sightly contains out-of-the-box XSS protection. It detects that you are trying to inject videoPath variable inside the <script> tag and requires to specify the context, so it can escape special characters. In this case it should be scriptString context:
<script type='text/javascript'>
jwplayer('playerpwSIOjcRZrCa').setup({
file: '//www.youtube.com/watch?v=${videoPath # context="scriptString"}',
title: 'Video title',
width: '100%',
aspectratio: '16:9'
});
</script>
More info can be found in the Adobe docs.
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>