I am reading file from s3 in rails. I display the contents of a file in a div. I would like to display exactly what is in the file. The issue I am running into is if the file has html in it, I want it to display the code. For example:
<div>test</div>
should not be displayed as
# what I get when I try .html_safe
test
or
# what I am getting now
<div>text</div>
My current code in my view is (slim.html):
.col-md-8#pr_parsed_text_wrapper
pre.pre-scrollable.prettyprint.linenums
-#file_preview.each_with_index do |l, index|
span.text_line class="line#{index}" #{l + "\n"}
Other things I have tried:
The h method.
The raw method.
The html_safe method.
Using = and == instead of #{}.
Related
I have a webpage containing a text editor(tinymce), which does nice formatting to the text and then stores it in the database. The server retrieves this formatted text from database and sends it to a webpage (ejs template). But HTML tags are not considered and plain text is rendered on the webpage.
<p style="text-align=center;">Hello,World</p>
This p tag is stored in database and while rendering it on webpage, it is rendered as plain text, without p tag functionality. How can I render HTML content sent by server?
Just use the syntax <%- your value %>
for example:
your_value = <p style="text-align=center;">Hello,World</p>
if you render the value like this:
<%= your_value %>
You will get the output as text. But if you render it like this:
<%- your_value %>
you will get only "Hello,World".
you can preserve the indentation by using the pre HTML tags. So wrap the code that you want to display online using the (< pre>pre html tags), some more documentaion on that here:
https://devpractical.com/display-html-tags-as-plain-text/
That title might be a little confusing but I don't know how to put it otherwise. I have some JSON encoded data in a .json-file:
{"foo":"bar", "bar":"foo", "far":"boo"}
and some HTML content in a .html-file:
<h1>I'm a Title</h1>
<p>Lorem Ipsum</p>
<br>
<img src="./media/foo.png">
There is a jQuery script that takes the data from both files ($.getJSON() and $(#div).load()) and creates a page with some predefined head, uses the html as content and the json data to create some buttons (key=destination & value=name) on there.
Because the project has many of these pages I would love to have only one file that holds both my HTML content AND the JSON data so I had all I needed for one page would be a single file access. So the question really is: How can I store both JSON and HTML data in one file so jQuery can access, distinguish and process it?
This is part of an electron application but I'm not sure if that even matters for that question.
The content of the json file assuming it is a json object can be assigned to a javascript variable in the html document in a script tag.
Then to refer to, for example foo, you use theJsonObject.foo;
With the following javascript snipet you can see inthe browser's console the name of each property an the value.
How you mix this in your current code depends on how you are writting it. But make sure the variable is declared before you use it.
for (let prop in theJsonObject) {
console.log( prop + ": " + theJsonObject[prop] );
};
<html>
<head>
....
<script>
var theJsonObject = {"foo":"bar", "bar":"foo", "far":"boo"};
</script>
</head>
<body>
....
</body>
</html>
I have an Angular 6 application where a component is used to display a message on the page. Some of the messages contain hyperlinks embedded in them (in HTML markup). However, when the messages are displayed on the page, they are getting displayed in plain text (hyperlinks are not rendered, but the markup is displayed to the user instead).
You can visit Stackblitz # https://stackblitz.com/edit/angular-jj5nms for a sample application that I created to explain the issue.
Expected message display:
Click here.
Actual message display:
Click <a href='http://www.google.com'>here</a>
If you want to render HTML a then you need to bind to the innerHTML property of an element, for example:
<p [innerHTML]=“message | async”></p>
Where message is your observable from the service.
Using handlebars to render message is just rendering plain text, binding to innerHTML and using the async will render your html content
You can use innerHTML
In your component:
linkHtml = "Click <a href='http://www.google.com'>here</a>"
In your template:
<div [innerHTML]="linkHtml"></div>
You can use like that:
in your .ts file :
dummyLinkText: string = "Click <a href='https://www.google.com'>here</a>";
and in your .html file:
<div [innerHTML]="dummyLinkText | translate"></div>
I want to embed my gists (gist.github) in my blogger blog. But as explained in this question dynamic views directly don't support javascript.
From the moski's(as mentioned in the answer) blog its possible to embed a gist.
What if I want to only embed only one file of my gist?
For example:
<script src="https://gist.github.com/3975635.js?file=regcomp.c"></script>
Looking at moski's blog, his description and gist snippets (gistLoader.js and gistBlogger.js), I can suppose that to reach your goal you have to edit that code a little bit.
Currently, when you add
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
at the bottom of your posts, what this script does is looking for this other code you added into your blog
<div class="gistLoad" data-id="GistID" id="gist-GistID">Loading ....</div>
retrieves the data-id attribute, and injects the required code to load the script with src set to
'https://gist.github.com/' + id + '.js'
Now, if I correctly figured out what the code does, editing the second moski's HTML code in this way:
<div class="gistLoad" data-id="GistID" data-file="GistFile" id="gist-GistID">Loading ....</div>
and the function in moski's gistBlogger.js in order to retrieve (when defined) the new data-file attribute, you can generate a new src to inject, like that:
'https://gist.github.com/' + id + '.js?file=' + file
It should works.
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