I'm implementing Google strctured data using Ember and adding some dynamic values
<script type="application/ld+json">
[{
"#context": "{{my-ember-hbs}}",
...
The rendered html is:
<script type="application/ld+json">
[{
"#context": " // ember adds new line before and after
rendered-value-string
",
...
According the the Handlebars docs you can eliminate white space with a tilde ~.
<script type="application/ld+json">
[{
"#context": "{{~my-ember-hbs~}}",
...
{{my-ember-hbs}} may also have white space internally that you would need to account for.
Related
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>
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 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.
(This question is related to this one)
I have a web2py application which I want to extend with some ember.js code. The delimiters of the templating systems in web2py and ember.js conflict (both are {{ and }}). Since my application has no ember.js legacy, I would like to write the ember.js code using a different delimiter. Is this possible?
The template engine use by ember.js is Handlebars.js, and I don't think you can change the delimiter.
I've seen the other question, and perhaps an other answer could be found here : Handlebars.js in Django templates
In web2py: response.delimiters = ('[[',']]')
If you don't want to change any delimiters (on web2py or in handlebars) you can do it by saving the handlebars template in an external file like people.hbs in the
web2py /static/ folder for example
{{#each people}}
<div class="person">
<h2>{{first_name}} {{last_name}}</h2>
</div>
{{/each}}
And in the view import that file using jQuery load() function.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/master/dist/handlebars.js"></script>
<div id="list"></div>
<script id="people-template" type="text/x-handlebars-template"></script>
<script type="text/javascript">
$('#people-template').load('/static/people.hbs', function() {
var template = Handlebars.compile($("#people-template").html());
var data = {
people: [
{ first_name: "Alan", last_name: "Johnson" },
{ first_name: "Allison", last_name: "House" },
]
};
$('#list').html(template(data));
});
</script>
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>