Sample code containing expression like {{ $title }} cause blank page in Laravel - html

I built a blog in Laravel to post some programming tutorials, but I faced a problem; when I have some expression (sample code) like below
#foreach($items as $item)
<div>{{ $item->name }}</div>
#endforeach
or if I have Angular sample code
<div *ngFor="let item of items">{{ item.name }}</div>
the above sample codes cause a blank page,
in the console, there is no error, but in the development tool element tab body tag is empty. look at this link https://coffeequery.com/posts/loop-in-angular I looked everywhere to find a solution but couldn't.
I think the browser trying to evaluate this expression, what should I do to tell the browser to ignore it?
thanks.

The problem is in the following code:
<code><div *ngFor="let item of items">#{{item.name}}</div></code>
Your Vue.js instance tries to evaluate the curly brackets and silently throws an error, which results in displaying empty #app element. I suggest using v-text attribute instead:
<code v-text="'<div *ngFor="let item of items">{{item.name}}</div>'"></code>

Related

How to save and show data submitted from texterea editor (tinymce)?

I am developing a website which contain a post submission. When I save the data from texterea, I noticed that the data is in html format rather than plain text. So, what is the best way to show the data in an article format? I am using tinymce editor.
I'm using laravel, thus I just simply use
auth()->user()->posts()->create([
'article' => $data['article'],
]);
To call, I use {{$data->article}}. Please noted that, I only specifically show how I save only textera input.
This is my output
Output
This is database
Database image
This is expected ouput, without html tag.
Expected output
Try this:
{ !! $data->article !! }
Blade statements {{ }} are sent to htmlspecialcharacters() to prevent XSS attacks. If you do not want your html to be escaped you have to use this syntax -> {!! !!}
https://laravel.com/docs/8.x/blade#displaying-unescaped-data
You can display html content by many ways in laravel. Here are some examples
Method 1:
#php
echo $data->article;
#endphp
Method 2:
{{ !! $data->article !! }}
Method 3:
{{ !! htmlspecialchars_decode($data->article) !! }}
OR
{{ !! html_entity_decode($data->article) !! }}
Update: Simply use <?php echo $post_data->article;?> will do the job. Can anyone explain the reason?
Output

How to make PhpStorm interpret custom delimiters?

I use Ractive templates in my Symfony application.
As my Ractive templates are in .twig files, I cannot use curly braces around my Ractive values, so I use Ractive's custom delimiters
For example, <p>{{text}}</p> becomes <p>[[text]]</p>.
It works perfectly, but my problem is that PhpStorm doesn't recognize the brackets as template values, which causes several annoying consequences:
There is no syntax coloration, the indentation is messed up, and there are warnings where there shouldn't be.
How can I make PhpStorm interpret my double brackets as template values ?
Edit: example of code:
<script type="text">
$(function () {
var a = new Analytics();
a.site = '{{ site.id }}'; {# Twig #}
a.run();
});
</script>
{# Below is ractive #}
<table class="table">
<tr class="general">
<th></th>
[[#each columns: i]]
[[#if stats]]
<th>[[trans('column.' + columns[i])]]</th>
[[/if]]
[[/each]]
</tr>
[[> totalLine]]
[[#each templates: t]]
[[> templateLine]]
[[/each]]
</table>
This is one example of an XY problem.
Your real problem (the "X problem") is Ractive syntax, specifically the {{ }}, is being treated as Twig by the parser. This can be solved by wrapping the Ractive template around a verbatim section to prevent Twig from treating that Ractive template like Twig.
The "Y problem" stems from your attempt to work around the "X problem". That is, IDE syntax highlighting when using custom delimiters.
Why the {{ }} syntax-highlighting on Ractive templates appear to work is because Twig has syntax that involves {{ }}. However, the highlighting knows nothing about Ractive at all. It just happens that both languages use {{ }} in a similar fashion that the syntax highlighter thinks it's Twig... and styles like Twig.
Also, most, if not all IDEs, only support single-language highlighting. Since your file is being treated as a Twig template, it gets Twig highlighting. Should multi-language syntax-highlighting be supported is determined by your IDEs vendor and there's nothing you can do about it (unless you make your own plugin of course).
I had the same question related to VueJS and Twig curly brackets.
The only solution I found is to autocomplete [[ construction with tab button so it appears as [[ _ ]].

Django passing HTML objects into template as plain text

This feels like a really silly issue, but I'm confused by the behavior of django-zinnia, a blog creation module.
When I test enter a plain text post, it appends each sentence with html < p > tags the browser doesn't read as html.
Example, if I enter this into the database (no html):
The entry from the db renders on page itself like this as if the < p > markup was plain text:
Within Zinnia, these html tags are being generated as part of the {{ object_content }} object in _entry_detail_base.html
<div class="entry-content">
{{ object_content }}
</div>
I've looked through the entry.py models within Zinnia and I'm having trouble identifying where these tags are coming from or how they're being passed in in a way the browser doesn't interpret them for what they are (html). Is there a filter I can apply that might solve this? thanks
That's the default behavior for Django templates. Use {{ object_content|safe }} or {% autoescape off %} {{ object_content }} {% endautoescape %} (for multiple variables) to prevent html entities from being escaped.
Note that using the safe filter doesn't automatically mean the output is not escaped if you use another filter after it.
Check the Zinnia's source code: https://github.com/Fantomas42/django-blog-zinnia/blob/master/zinnia/templates/zinnia/_entry_detail_base.html
It's using |safe template tag:
<div class="entry-content">
{{ object_content|safe }}
</div>

Google Prettify with Lex tag Parser Code

It appears Google Prettify doesn't like lex parser tags. I've added the following to a blog post that uses prettify to format code:
<!-- Content -->
<div id="content" class="grid_8 suffix_1">
{{ widgets:area slug="above-body" }}
{{ template:body }}
</div>
The two lines of lex code (in between the {{ }}) disappear in the post. If I change them to single brackets, they look OK. I assume prettify uses a similar sort of tagging syntax, which would explain this. Is there a way around it?
You don't link to your blog post and it seems to prettify just fine on this page, so I can't really diagnose the problem, but if you want to file a bug with your HTML at http://code.google.com/p/google-code-prettify/issues/list I'll take a look.

Liquid turn string into url link

I have the following code in a liquid template:
{{ sample.url }}
Coming from jinja2 I was hoping for something like this:
{{ sample.url|urlize }}
Does this exist in liquid?
I've seen the liquid documentation and couldnt find any reference to that, but as the documentation sayed you can write your own filter to do that.
Take a look here.