I am developing Typo3 websites using Fluidtypo3.
Now as fluid has its own syntax with custom elements like:
<flux:field.inline.fal name="image" label="Image" allowedExtensions="gif,jpg,jpeg,png" maxItems="1" />
I am running into a conflict, when I want to work with jade, because when I convert this html into jade it looks like:
flux:field.inline.fal(name="image" label="Image" allowedExtensions="gif,jpg,jpeg,png" maxItems="1")
which will be converted by jade to:
<flux:field name="image" label="Image" allowedExtensions="gif,jpg,jpeg,png" maxItems="1" class="inline fal"></flux:field>
As you can see jade parses the dots from flux:field.inline.fal as classes.
My question is, if I it's possible to extend jade to ignore all dots on specific elements like: flux:*. If not, then it's possible to escape that dots, so that they will be appended to the elements decleration.
Thanks for your help!
I found a solution for my problem:
#{'flux:field.inline.fal'}
will be converted to:
<flux:field.inline.fal>
And if you want to add classes just put them after the closing bracket:
#{'flux:field.inline.fal'}.myClass
I hope that will help anyone who runs into the same problem.
Related
This question is probably really stupid but i really searched a lot for it, but I may be using the wrong keywords.
I have a String with <hr> and I want Angular to display a horizontal line.
The HTML is converted to <hr> and therefore displayed as text <hr> on the page.
How can I achieve this that the HTML tags are not converted by angular?
I have done this in Angular 6 with TS and there it was no problem, is there a pipe or something else, which I have to use?
Binding to [innerHtml] should do that.
<div [innerHtml]="fieldInComponentClassWithHtml"
You need to use SafeInnerHtmlDirective
https://pub.dev/documentation/angular/latest/angular.security/SafeInnerHtmlDirective-class.html
I have some static html documents, and I want to convert them into Jade. I tried html2jade in npm, everything is OK except this: the <pre> elements in html convert empty, can someone help me?
The html code looks like this:
<pre><code><p>Hello</p><span>Hello Again</span></code></pre>
The result is:
pre.
You can write that a couple different ways in Jade. Here are two different methods. The first takes advantage of Jade's automatic escaping while the second uses HTML entities instead.
Automatic escaping:
pre
code= '<p>Hello</p><span>Hello Again</span>'
HTML entities:
pre
code <p>Hello</p><span>Hello Again</span>
I keep seeing this in an html code Im looking at. Apparently its Jquery tags to add html templates.
{{#Foo}}
<div> bla bla </div>
I guess class Foo??
and
{{^Foo}}
<div> bla bla </div>
What is ^ for??
Now I know what it does, it stores HTML element in variable Foo, then these HTML elements get added later on. but I don't know how it works or why its # and ^ or anything more about what's going on here...
thank you for any help.
Im using html + javascript codes.
It's actually not jQuery Template (as you suggest), but Mustache used here. This syntax...
{{#Foo}}
...something
{{/Foo}}
{{^Foo}}
...something
{{/Foo}}
... is used to cover both cases:
when Foo collection is not empty, it will be templated with inner block of {{#Foo}} normal section:
when Foo collection is empty, the template of so-called inverted section (set within {{^Foo}}) will be used instead:
Example from the documentation:
{{#repo}}
<b>{{name}}</b>
{{/repo}}
{{^repo}}
No repos :(
{{/repo}}
It's actually quite useful: we often need to provide a separate template for 'no items' case. Usually it's done with something like {{#if... }} ... {{#else}} blocks, but this injects logic in templates. Mustache provides an alternative - and quite elegant, may I say - approach to this.
My friend.. you've got lot more to learn about Handlebars first.
Check these links:
http://handlebarsjs.com/block_helpers.html
http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers
http://www.raymondcamden.com/index.cfm/2012/4/19/Demo-of-Handlebars-and-why-you-should-consider-a-templating-engine
This doesn't look like jQuery syntax.
This does however look like most templating engines' syntax, such as underscore.js, handlebars, or twig.
This is neither HTML nor jQuery. It's used by template engines or other scripts to do some work based on codes they are able to recognize in the source code of the document (for example beginning and ending with double curly braces in your case).
I'm trying to implement a markup system in my Rails application using the bb-ruby gem. Currently I'm working on something similar to how Stackoverflow handles it's code markdown and I ran into some difficulty.
Essentially I want the user-entered text:
[code]<h1>Headline</h1>[/code]
To spit out the code in plain-text, perhaps in a pre and code tag block. Passing that string of text to my code parser will wrap the code in a pre and code block but the HTML also gets rendered. I pass the string to my code parser like so:
sanitize(text.bbcode_to_html(formats, false).html_safe)
Of course, if I remove the .html_safe helper from the call my view will spit out:
<pre><code><br /> <h1>Hello World</h1><br /> </code></pre>
Obviously that's not the desired result. So my question is, how can I accomplish plain-text code only within the pre + code tags while maintaining the html_safe helper method?
I know this is an old question but you can try using the strip_tags after the bbcode_to_html one.
Every time I write my HTML in Jade, I am getting extra whitespace added after each element's value.
For example, I will have a line like this in my Jade Template:
label(for="keyword") Keyword
And when it's rendered, the source will look like this:
<label for="keyword_1">Keyword
</label>
Ran into some problems with that extra whitespace messing w/ my CSS. Plus, it just doesn't look as tidy :)
Anyone know how I can prevent it from being inserted?
Check the update at the bottom
I assume you're using express - check your app settings.
app.set('view options', { pretty: false })
If you have jade rendering in pretty mode (pretty: true) then it will arrange your generated source (tags) with nested indention. Turning pretty printing off should resolve your problem (though make sure you don't have trailing space, as pointed out by #alessioalex).
If you have a reason requiring you to output pretty formatting (client spec, in my case) then you can try some other things. I had a similar issue with occurring with the textarea tag; frustrating because the whitespace is actually injected into the content of the form. The way I got around this was to embed a the literal html with the closing tag:
<textarea name="someField"></textarea>
The docs can give you some more details (search for html in this case). There is open issue #341 on github which suggests an approach like this one for scalate, but it doesn't currently work in jade (as of version 0.19.0) .
HTH
Update
Ok - subtle and cool... there is a better way to keep the sexy output from pretty: true and avoid spacing inside of a tag (my textarea example)... I just tried appending a . to the end of the tag (see code) and it Just Worked™ :-)
form(name='frmname', method='POST')
textarea(name='someField').
Renders:
<form name="frmname" method="POST">
<textarea name="someField"></textarea>
</form>
Beauty!
Why does this work? Because jade treats the . suffix on the tag as an indicator that the tag will contain a text block (only), and then no text block is provided, so it defaults to '', an empty string.