I want to write web with n2o and rebar3.
but I get the page something wrong ,code is here.
index.erl
-module(index).
-compile(export_all).
-include_lib("n2o/include/wf.hrl").
-include_lib("nitro/include/nitro.hrl").
main() -> #dtl{file="prod",app=web, ext="dtl", bindings=[{body,body()} ]}.
body() ->
[ #span { id=display }, #br{},
#span { body="Login: " }, #textbox{id=user,autofocus=true}, #br{},
#span { body="Join/Create Feed: " }, #textbox{id=pass},
#button { id=loginButton, body="Login",postback=login,source=[user,pass]} ].
prod.dtl
<html >
<head>
<title>{{title}}</title>
</head>
<body>
{{body}}
</body>
</html>
I get the result :
<html >
<head>
<title></title>
</head>
<body>
<span id="display"></span><br/><span>Login: </span><input id="user" type="text" autofocus="true"/><br/><span>Join/Create Feed: </span><input id="pass" type="text"/><button id="loginButton" type="button">Login</button>
</body>
</html>
how can i get get '<' not '<'
erlydtl enabled auto escaping of the values inside {{}} in this commit (also see #80 and #120). If you're using a version that includes this commit (from the page it looks like 0.9.0 or later), you'll have to manually mark the value as safe.
Instead of:
{{ body }}
do:
{{ body | safe }}
Note: You should be aware of the risks of marking an untrusted string as safe: https://en.wikipedia.org/wiki/Cross-site_scripting.
Related
<!DOCTYPE html>
<html>
<head>
<title>MathJax MathML Test Page</title>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/mml-chtml.js">
</script>
</head>
<body>
<p>
<math overflow="scroll"><mfrac><msup><msub><mi mathvariant="-italic">Q</mi><mrow><msub><mi mathvariant="italic">T</mi><mi mathvariant="italic">i</mi></msub><mo mathvariant="italic">max</mo></mrow></msub><mn mathvariant="normal">0.75</mn></msup><msup><mi mathvariant="italic">β</mi><mn mathvariant="normal">0.75</mn></msup></mfrac><mo>≤</mo><mn mathvariant="normal">5</mn><mo>×</mo><msub><mi mathvariant="italic">AEL</mi><msub><mi mathvariant="italic">T</mi><mi mathvariant="italic">i</mi></msub></msub><mo>×</mo><msup><msub><mi mathvariant="italic">Q</mi><msub><mi mathvariant="italic">T</mi><mi mathvariant="italic">m</mi></msub></msub><mrow><mo>−</mo><mn mathvariant="normal">0.25</mn></mrow></msup><mo></mo></math>
</p>
</body>
</html>
Getting parsing error with new CDN https://cdn.jsdelivr.net/npm/mathjax#3/es5/mml-chtml.js
Here is a configuration you can use to post-filter the MathML to fix the invalid -italic math variant value.
MathJax = {
startup: {
ready() {
MathJax.startup.defaultReady();
MathJax.startup.input[0].postFilters.add(({data}) => {
data.walkTree(node => {
if (node.attributes) {
if (node.attributes.get('mathvariant') === '-italic') {
node.attributes.set('mathvariant', 'italic');
}
}
});
});
}
}
}
Place this in a <script> tag just before the script that loads mml-html.js.
i used mathjax in HTML page , it works. but a problem related to fontsize exist.
<html>
<head>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<title> mathsjax</title>
</head>
<body>
\(x={72^2-{\sqrt{53^2}}\over 25}\)
$$x={72^2-{\sqrt{53^2}}\over 25}$$
</body>
</html>
why in the first syntax[(x={72^2-{\sqrt{53^2}}\over 25})] , fontsize is very small. and what to do to increase its size.
In addition, what is the difference between the two syntax's
\(x={72^2-{\sqrt{53^2}}\over 25}\) .........1
$$x={72^2-{\sqrt{53^2}}\over 25}$$ .........2
You should use \( for inline math, and \[ as equivalent of $$.
<html>
<head>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<title> mathsjax</title>
</head>
<body>
This is part of the line: \(x={72^2-{\sqrt{53^2}}\over 25}\). Those are not:
\[x={72^2-{\sqrt{53^2}}\over 25}\]
$$x={72^2-{\sqrt{53^2}}\over 25}$$
</body>
</html>
EDIT
If it isn't enough you can also add \large or \huge.
In his comments OP says he is using HTML ckeditor, I suppose with the Mathematical Formulas widget. You can locate the demo of that widget in page linked and modify its source adding the following code:
<p><span class="math-tex">\( x={72^2-{\sqrt{53^2}}\over 25}\)</span></p>
<p><span class="math-tex">\[ x={72^2-{\sqrt{53^2}}\over 25}\]</span></p>
<p><span class="math-tex">\[ \large { x={72^2-{\sqrt{53^2}}\over 25} } \]</span></p>
<p><span class="math-tex">\[ \huge { x={72^2-{\sqrt{53^2}}\over 25} } \]</span></p>
This should be the result:
You can use {\displaystyle{...}} to force an expression or subexpression to use the sizes and spacing that would be used for a displayed equation. For fractions in particular, if you have the AMSmath extension loaded, you can use \dfrac{}{} in place of \frac{}{} to get a fraction in display style.
I am using handelbars as my templating engine and I am curious to whether I could edit the main handlebars file. What I can do at the moment is something like this:
main.handlebars:
<html>
<head>
</head>
<body>
<div id='headerBox></div>
<div id='contents'>{{{body}}}</div><!--all contents goes here-->
</body>
When I use this method I will could create templates e.g. home.handlebars etc.
But what If I wanted to change something dynamically in the main.handlebars? For example in my website, I would love to have a login form so I would like to have something like this in the main.handelbars:
<html>
<head>
</head>
<body>
<div id='headerBox>{{If logged in print name, if not print sign up}}</div>
<div id='contents'>{{{body}}}</div><!--all contents goes here-->
</body>
</html>
TLDR, how to I change something dynamically in the main handlebars skeleton.
Thanks!
You'll want to write a Handlebars Helper function. Since you didn't include anything about how you're verifying login, I'll write a little demo.
In your template file:
<div id='headerBox'>{{header}}</div>
Handlerbars.registerHelper('header', function() {
if (loggedIn) {
return //however you're getting a username
} else {
return Sign Up
}
});
I have a xxx component, which when used with the riot-tag attribute and a standard HTML5 tag, works correctly: <article riot-tag="xxx"></article>. However when I use the riot-tag attribute inside of a loop, the tag is empty: <article each="{xxxTags}" riot-tag="{xxx}"></article>. Is using riot-tag in a loop possible at all? How can I make it work?
Additional explanation:
I have to generate several different, albeit similar components one by one. So I have an array to store them:
var xxxTags = [{tag: 'xxx'}, {tag: 'yyy'}, {tag: 'zzz'}];
Putting any of the textareas one by one manually for all of: xxx, yyy, zzz works fine and generates the respective components. However when I try to do it with each, they end up empty (no children) in chrome devtools, BUT otherwise identical to the ones put manually.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<my-tag></my-tag>
<!-- inlined tag definition -->
<script type="riot/tag">
<my-tag>
/*Standard, manual addition of different components (works)*/
<xxx></xxx>
<yyy></yyy>
<zzz></zzz>
/*Standard addition of same components in a loop (works)*/
<div each={myTags}>{tag}</div>
<br>
/*Addition of different components with "riot-tag" manually (works)*/
<div riot-tag="xxx"></div>
<div riot-tag="yyy"></div>
<div riot-tag="zzz"></div>
/*Addition of different components with "riot-tag" in a loop (DOESN'T WORK should look like the example above)*/
<div each={myTags} riot-tag="{tag}"></div>
this.myTags = [{tag: 'xxx'}, {tag: 'yyy'}, {tag: 'zzz'}];
</my-tag>
<xxx>
<p>X content</p>
</xxx>
<yyy>
<p>Y content</p>
</yyy>
<zzz>
<p>Z content</p>
</zzz>
</script>
<!-- include riot.js and the compiler -->
<script src="//cdn.jsdelivr.net/g/riot#2.2(riot.min.js+compiler.min.js)"></script>
<!-- mount normally -->
<script>
riot.mount('*');
</script>
</body>
</html>
Okay, looks, like the tags with riot-tag attribute are not mounted when generated with an each-loop (still looks like a bug?). For the above-mentioned code, adding this does the job:
this.on('mount', function() {
for(var i = 0; i < this.myTags.length; i++) riot.mount(this.myTags[i].tag);
});
I am rendering a view that combines a g.include invocation and a sitemesh layout.
The view would be something like this:
myview.gsp
<html>
<head>
<meta name="layout" content="checkout" />
</head>
<body>...
within the body there is an invocation to:
g.include(controller:"mycontroller", action:"myaction")
The problem is the sitemesh layout is never applied. If I remove the include invocation things work just fine.
I haven't found references to this problem in the site yet.
Has anyone found a workaround to this issue or a tip, will be much appreciated!
Thanks
-Pablo Duranti
My index file is like underlying:
<html>
<head>
<title>App Store For Publish, Download Android Apps</title>
<meta name="layout" content="main" />
<parameter name="sideBarSetting" value="main"/>
</head>
<body>
<g:if test="${flash.message}">
<div class="message">${flash.message}</div>
</g:if>
<g:announcements/>
<g:include controller="cache" action="showFeatured"/>
<g:include controller="cache" action="latestProducts"/>
<div class="push"></div>
<g:include controller="cache" action="mostPopular"/>
<div class="push"></div>
<g:include controller="cache" action="allCategories"/>
</body>
It works in Grails 1.0, 1.2.2 and now 1.3.7.
In each of actions you try to include, you can not render the view, but render the template instead. The template file can ONLY has fragments of HTML, it can NOT include the head, meta for layout, etc.
In my cache controller
def latestProducts = {
cache shared:true, validFor: 300
def htmlCacheManager = HtmlCacheManager.getInstance()
def key = 'latestProducts'
def content = htmlCacheManager.getHtmlContent(key)
if (!content) {
def products = productService.get5LatestProducts(params)
if (products){
content = g.render(template:'/common/product/productLatestListTemplate', model:['productInstanceList' : products, 'type':'latest'])
htmlCacheManager.store(key, content, Boolean.TRUE)
} else {
log.debug('No latest product found')
}
}
render content ?: ''
}
The template file:
<div class="list">
<fieldset>
<legend><g:message code="product.latest"/> <g:link action="feed" controller="product" params="['type':type]" target="_blank"><img src="${resource(dir:'images', file:'feed-icon.gif')}" height='16' width='16' alt="Feeds"/></g:link></legend>
<g:each in="${productInstanceList}" var="product">
<div class="product">
<g:render template="/common/product/productSingleListTemplate" model="['product':product]" />
</div>
</g:each>
</fieldset>
</div>