Okay, I have this underscore template (simplified version), rendered from _template.html.erb, in my Rails app, somewhere on the page:
<script type="text/html" id="mytemplate">
<div class="foo">
<img src="{{= my_variable }}" />
</div>
</script>
Then I render it like this, elsewhere, when required:
// change it to mustache-style because of defaults clashing with erb
_.templateSettings = {
interpolate: /\{\{\=(.+?)\}\}/g,
evaluate: /\{\{(.+?)\}\}/g
};
options = {
my_variable: '/foo/bar/baz.img'
}
compiled = _.template($("#mytemplate").html());
$(compiled(options)).appendTo("#wherever");
This, in theory should work just fine and it does, except errors like this started popping up in server logs and elsewhere, browsers 404-ing on URLs like: http://example.com/{{=%20my_variable%20}}, or http://example.com/foo/{{=%20my_variable%20}}.
Now, my hunch is that it has something to do with the fact that it's an img tag and somehow the browser tries to GET it from the page, even though it's wrapped in script tags, but I have no idea why on earth. This is one of the recommended methods by many people for embedding underscore templates into HTML. And I can't attribute it to older browsers and/or robots either because server logs show these are real people using the latest Chrome etc.
Edit: after a bit more investigating, 1. it only happens to a few people (unique IPs) 2. all of them are using the latest version of Chrome. So maybe it's an extension gone haywire?
Any ideas?
You must change the type="text/html" to something non-existent like type="x-template" (or anything really)
This normally works if the cache is cleared and all.
If nothing really does it, then you could use external templates (files that you load). But if you want to keep them inline, then escape the problematics chars (with internal JS char encoding). This will be parsed the same by JS, but won't get caught by HTML parser.
You can use this tool: http://mothereff.in/js-escapes (uncheck the "only escape non-ASCII and unprintable ASCII characters" box)
That's what it could looks like:
<script type="text/html" id="mytemplate">
<div class="foo">
\x3Cimg src="{{= my_variable }}" />
</div>
</script>
Related
This question already has answers here:
How to display raw HTML code on an HTML page
(30 answers)
Closed 8 years ago.
I'm writing a C++ Style Guide for my company in html/css/javascript. I'm quite irritated with html as it treats anything between < and > as html tag and thus processes them as well. As a result of which my code (which I put in the style guide) doesn't look as such. Here is an example:
<pre>
std::vector<std::string> get_project_names();
template<typename Printable>
void print(Printable const & item);
template<typename FwdIterable, typename Predicate>
FwdIterable find_if(FwdIterable begin, FwdIterable end, Predicate pred);
</pre>
and I want the browser to render it exactly like that, but it doesn't render so, e.g Chrome doesn't show <std::string> part, and IE 8.0 capitalize <std::string> as <STD::STRING> (and all such template codes).
I don't want any kind of interference by html engine. Is there any simple way to achieve what I want? Any polite way to tell the browser to not modify my code?
Note that replacing < with < and > with > would work, but it is cumbersome to write it everytime I write a template code. It also makes my code difficult to read in the source code of the html. So I'm looking for a simple solution.
The notion of a "polite way to to tell the browser to not modify (parse) my code" is precisely what XML's CDATA does. Nothing more, nothing less.
CDATA does not exist in HTML, so there is no way in HTML to treat <std:vector> as anything other than on opening tag for the (non-existent) std:vector element.
The normal way to do this is a server-side transformation. Now if you aren't generating your HTML server-side, and are instead writing it by hand, you can make your life just a dash easier with a client-side transformation like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<script src="http://coffeescript.org/extras/coffee-script.js"></script>
</head>
<body>
<pre><script type="text/coffeescript" >document.write "
std::vector<std::string> get_project_names();
".replace('<','<')
</script></pre>
</body>
</html>
Here I used CoffeeScript because of its multiline string capability which is coming in ES6 for regular JavaScript. It makes it easy to just drop in your code between the boilerplate lines.
Now I know full well even this solution is lacking! If your inserted code contains a " you're out of luck. And it doesn't escape ampersands.
Bottom line is that there is no CDATA, so no "simple" solution exists. A transformation, client-side or server-side, is required.
Have you tried markdown?
I've been dealing with this particular problem for years, and it's always been frustrating. I've always appreciated the simplicity and elegance of Markdown, so I did a little research to see if there was any way to use Markdown to build an HTML document.
Thing is, code samples sometimes involve HTML, yet HTML is the language we're using to write style guides and API documentation, so my thought was that if we wrote the API documentation and style guides in Markdown, we'd eliminate all of the conflicts between HTML and the syntax of other languages.
I found Strapdown.js, which is a library that allows you to create a Web page with pure Markdown. The library then compiles it to HTML and renders it on the page client side. We put together the API documentation for one of our products using this library, and we published it as a GitHub page.
Here's a small, concise example:
<!DOCTYPE html>
<html>
<title>JavaScript API</title>
<xmp theme="united" style="display:none;">
## Print the name
Print the user's name:
```javascript
function printName(name) {
alert(name);
}
```
</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>
Everything inside the <xmp> tags gets compiled to HTML.
Note: The XMP tag has been deprecated for some time as per the Mozilla HTML documentation on XMP. Thus, you may want to either hack the code to make it use PRE or CODE, or you may want to consider using the lower-level Marked library that was used to build Strapdown.js. I filed an issue with the Strapdown.js team.
For that you can use this
<pre>
std::vector<std::string> get_project_names();
template<typename Printable>
void print(Printable const & item);
template<typename FwdIterable, typename Predicate>
FwdIterable find_if(FwdIterable begin, FwdIterable end, Predicate pred);
</pre>
This would be encoded and you'll get the result that you want.
Here is the fiddle for that: http://jsfiddle.net/afzaal_ahmad_zeeshan/7B9xB/
JavaScript code
The JavaScript method of doing this would be simple, you can convert the whole code to a String variable.
As this
var string = "content here";
Then apply this,
string.replace('<','<').replace('>','>');
Convert all the characters and then have then rendered by the Browser.
http://jsfiddle.net/afzaal_ahmad_zeeshan/7B9xB/1/
For my book I used http://markup.su/highlighter/ syntax highlighter. Paste the code into it, generate highlighted code, and paste the latter into the HTML document. Worked pretty well. Here's a fiddle with your code: http://jsfiddle.net/6GTs2/.
Here's your code highlighted for HTML:
<pre style="background:#000;color:#f8f8f8">std::vector<std::string> <span style="color:#89bdff">get_project_names</span>();
<span style="color:#99cf50">template</span><<span style="color:#99cf50">typename</span> Printable>
<span style="color:#99cf50">void</span> <span style="color:#89bdff">print</span>(Printable const & item);
<span style="color:#99cf50">template</span><<span style="color:#99cf50">typename</span> FwdIterable, <span style="color:#99cf50">typename</span> Predicate>
FwdIterable <span style="color:#89bdff">find_if</span>(FwdIterable begin, FwdIterable end, Predicate pred);
</pre>
Currently I'm working on a Project with Handlebars (JS Template Engine) and I'm using eclipse for development.
The problem is, that eclipse doesn't offer syntax highlighting for my Handlebars-Templates. My Templates are enclosed in tags. Syntax highlighting in works as expected.
Screenshot:
Is it possible, that Eclipse also highlights this code (at the best with HTML Syntax Coloring)?
If you are using PHP, you can fool Eclipse by adding empty php tag:
<scrip<?php ?>t type="tmpl_handlebars" id="tmpl_places">
<article>
<h1>
...
</h1>
</article>
</script>
You would have to find a plug-in which supports that template engine. The HTML Editor provided by Eclipse uses the value of the type/language attributes to find the classes that provide syntax coloring, content assist, etc. The possibility is there, but out of the box, it only provides for JavaScript.
If you are ready do write a little bit of javascript, you can do this. I don't know the framwork(s) that you are using, so I will suppose that you have jQuery, but you can use the idea without using jQuery if you don't want to.
First, write all your tags that serve as template in divs with the "tmpl_handlebars" css class instead of scripts:
<div class="tmpl_handlebars" id="tmpl_places">
<article>
<h1>Hello, World!</h1>
<p>This is a template...</p>
</article>
</div>
Then, when your page has loaded, dynamically replace the div tags with the script tags, and transfer the id and the content of the div tags to the script.
With jQuery you just have to add this small script in your html head.
$(function() {
$(".tmpl_handlebars").each(function() {
var $this = $(this);
var children = $this.children().detach();
var id = $this.attr("id");
$this.replaceWith(
$('<script type="tmpl_handlebars"/>')
.attr("id", id)
.append(children);
);
});
});
This may work out of the box, but as I'm not a specialist of mustache and handlebars, I don't know exactly when they process the DOM to find the templates, so if you want to be perfectly safe, you should do this third step: Remove the script tags that include these libraries from the static html of your head, and instead, add them dynamically with javascript after the processing of the divs, so your dom is ready when the scripts arrive.
Before the last }); in the code the divs processing, add the following lines to add your scripts:
$("head").append('<script type="text/javascript"'
+ 'src="**LOCATION_OF_DYNAMICALLY_LOADED_FILE**"></script>'");
//etc...
Similar to #Neparkiraj's answer.
If you are using Django, you can add an empty tag to (I believe) "trick" Eclipse into just thinking the line is just "bad" html. Subsequent lines will then be highlighted with html syntax:
<scrip{{NONEXISTANTVAR}}t type="tmpl_handlebars" id="tmpl_places">
<article>
...
</article>
</script>
As the tag is empty, <script type="tmpl_handlebars" id="tmpl_places"> will be perfectly rendered in the final document. Note that, using Django also likely means this code sits in a {% verbatim %} block, so you can combine this code to get:
<scrip{% verbatim %}t type="tmpl_handlebars" id="tmpl_places">
<article>
...
</article>
</script>
{% endverbatim %}
All of this is kind of ugly, but leads to both correct HTML highlighting in eclipse and correct rendering in the document.
I've been building a HTML (email/page) composition tool in Ember.js as a way of getting my head round it, I guess it's a sort of WYSIWYG.
A user adds various objects with different values (link, text etc.), the objects can have different templates and be arranged with jQuery UI which feeds back to the controller. What the user sees on screen is actually spot on and I am currently saving and reloading clean JSON from localstorage as a method of persistence.
What I'd really like to do though, is being able to generate a clean HTML version of what the user is seeing. Either from something written into the front end application or by processing the JSON I export on the server side.
I'd like to keep as much in JS, Ember and Handlebars as possible, and Ideally not re-implement too much of my templates/code in different places.
An example of a 'row' in my rendered output is below.
.row-controls is toggled on and off by a global editor toggle.
<script id="metamorph-11-start" type="text/x-placeholder"></script>
<div id="ember507" class="ember-view template-row ui-droppable">
<ul id="ember524" class="ember-view row-controls">
<li class="dragger">drag</li>
<li class="type">type</li>
<li class="edit">edit</li>
<li class="delete">delete</li>
</ul>
<script id="metamorph-12-start" type="text/x-placeholder"></script>
<script id="metamorph-13-start" type="text/x-placeholder"></script>
<h2><a href="http://foo.com/bar" data-bindattr-34="34">
<script id="metamorph-19-start" type="text/x-placeholder"></script>
Link title text
<script id="metamorph-19-end" type="text/x-placeholder"></script>
</a></h2>
<img src="http://foo.com/image.png" data-bindattr-35="35">
<script id="metamorph-20-start" type="text/x-placeholder"></script>
Teaser/synopsis
<script id="metamorph-20-end" type="text/x-placeholder"></script>
Read more
<script id="metamorph-13-end" type="text/x-placeholder"></script>
<script id="metamorph-12-end" type="text/x-placeholder"></script>
</div>
<script id="metamorph-11-end" type="text/x-placeholder"></script>
I guess It might seem like an odd thing to be doing, with limited practical application but I'd like to finish it now I've started :) Also, I think the principles involved in any answer could probably have different application, I just haven't thought of it yet
Thanks! And thanks to the other people on here for answering my previous few questions about Ember.
EDIT
Just be clear, I'm talking about getting output like this
<h2>Link title text</h2>
<img src="http://foo.com/image.png">
Teaser/synopsis
Read more
SOLUTION EDIT
In case anyone finds this link - I've added (to my standard JS version) a check for attr within the attribute loop.
<script>
// ...
return $.each($this[0].attributes, function(index, attr) {
// this bit added
if(!attr) {
return;
}
if (attr.name.indexOf('data-bindattr') === -1) {
return;
}
// ...
</script>
It could have been an error in some other code I had going on, but jQuery was passing 'undefined' as attr in the loop. jQuery seems to want to resolve the whole each function so I couldn't debug exactly what this was. The check seems to be working for me at the moment though.
Not sure how to factor into the particular original coffeescript file I'm afraid.
ghempton from CodeBrief talks a little about it on this awesome post: http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/
Check tip 7.
Read all of them too, its worth it.
By the way, it's on coffeescript the post, if you need to get the JS version go to http://coffeescript.org/ on the Try Coffeescript tab and convert it!
I just started using Mustache and I like it so far, but this has me perplexed.
I am using the GitHub gist API to pull down my gists, and part of what I want to do is include the embedding functionality into my page. The problem is Mustache seems to not want to have anything to do with my dynamic script tag.
For example, this works fine:
<div class="gist-detail">
{{id}} <!-- This produces a valid Gist ID -->
</div>
Additionally, this works perfect:
<div class="gist-detail">
<script src='http://gist.github.com/1.js'></script> <!-- Produces the correct embed markup with Gist ID #1 -->
</div>
If I try to pull these together, something goes terribly wrong:
<div class="gist-detail">
<script src='http://gist.github.com/{{id}}.js'></script> <!-- Blows up! -->
</div>
Chrome Inspector shows this:
GET https://gist.github.com/%7B%7Bid%7D%7D.js 404 (Not Found)
... which looks like to me something is weird with escapes or whatnot, so I switch over to the raw syntax:
<div class="gist-detail">
<script src='http://gist.github.com/{{{id}}}.js'></script> <!-- Blows again! -->
</div>
And I get the same result in Inspector:
GET https://gist.github.com/%7B%7B%7Bid%7D%7D%7D.js 404 (Not Found)
How do I get the correct values to embed in the script tag?
EDIT
I am injecting the template as follows (in document.ready:
function LoadGists() {
var gistApi = "https://api.github.com/users/<myuser>/gists";
$.getJSON(gistApi, function (data) {
var html, template;
template = $('#mustache_gist').html();
html = Mustache.to_html(template, {gists: data}).replace(/^\s*/mg, '');
$('.gist').html(html);
});
}
The actually template is inside of a ruby partial, but it is wrapped in a div (not a script tag, is that a problem?) (that's hidden):
<div id="mustache_gist" style="display: none;">
{{#gists}}
<!-- see above -->
{{/gists}}
</div>
I assume a div is ok rather than a script because in either case, I'm pulling the .html(). Is this a bad assumption?
To avoid automatic escaping in Mustache use {{{token}}} instead of {{token}}.
It seems like your template is in HTML and trying to retrieve the template using html() results in a pre-URL-escaped template to be returned. Try placing your template inside a <script type="text/html"> tag instead.
When you embed your template inside an HTML element that excepts more HTML elements as children, it may get processed by the browser as HTML. Escaping may occur. By using a <script> tag with a non-script content type, you're basically telling the browser not to touch your template.
It looks like your script is getting requested before Mustache has a chance to update the src property. What you want to do is define the template in a way that it's not parsed as part of the DOM. A common approach is to define your template inside of a <textarea> tag. This will preserve formatting and prevent character escaping.
<textarea id="gist-detail-template" style="display:none">
<script src='http://gist.github.com/{{id}}.js'></script>
</textarea>
Now, to instantiate the template:
var template = $('#gist-detail-template').val();
var html = Mustache.to_html(template, yourTemplateData);
Here's an official example: http://mustache.github.com/#demo
I know that you can use a javascript: pseudo protocol for URLs in an <a> tag. However, I've noticed that Firefox and IE will both allow 'javascript:' to precede javascript code within a <script> tag. Is this valid syntax? Does it change the scoping rules?
Examples:
I've seen this many times:
<a onclick="javascript:alert('hello world!');">Hello World!</a>
But is this legal/valid syntax and does it do anything special:
<script type="text/javascript">
javascript:alert('hello world!');
</script>
Outside of the href attribute (where it is a protocol specifier), name: just creates a label (such as one might use with a continue or break).
See: Do you ever need to specify javascript: in an onclick?
You need the javascript: "protocol" when you want to put JavaScript in the href attribute of a link.
<!-- does not work -->
link
<!-- does work -->
link
<!-- also works -->
link
As far as I know (and please, if I'm wrong, someone correct me) there is no difference in scope, but there is a very important difference about this.
<!-- does not work -->
link
<!-- alerts "undefined" -->
link
<!-- works as expected, alerts "<url>#" -->
link
One thing to consider, our testers would always ding us if we did something like
<a href='javascript:openwindowmethod("url");'> stuff </a>
Rather than
<a href='url' onclick='return openwindowmethod(this.href);'> stuff </a>
The first method would only work if you click on it but not if you shift or alt clicked on it, or right clicked and went to open in a new window.
The second method would support all of that, as well as the ability to function the way it intended if the user just plain clicked the link.
The javascript: syntax can be used anywhere in a URL and executes the following string as a script. It is part of the HTML spec and AFAIK is supported by all current major browsers.