How to prevent Vue.js from running code within the < code > tags produced by markdown? It's a Laravel 5.5 + Vue.js 2.x project with 'andreasindal/laravel-markdown' package for markdown. The code that's Vue is trying to run is actually a Laravel Blade directive and it seems that Blade itself doesn't try to process it (since I'm getting a Vue error regarding this in the console).
{{ session('notificationType') }}
I tired modifying the Parsedown.php class (which is used by 'andreasindal/laravel-markdown') to replace all the '{' with the HTML ASCII characters. The replacement did work, but Vue still processed those.
If you do not want Vuejs to evaluate anything inside an HTML element you can use the v-pre directive as:
<code v-pre> {{ name }} </code>
In the above example vue will ignore everything inside the tags so, the name variable won't be evaluated and everything will be rendered as is.
* more on v-pre
Related
I have a blade template that has some HTML and some JS code. For both case 1 and 2 I'd like to use the same template as it's used in multiple places.
Case 1: include the template with the normal behaviour, so that the code in the template gets executed. This works with the normal behaviour of using #include('template')
Case 2: include the template without the HTML and JS actually being interpreted.
Now I could solve this by making it an x-template component, and then pass a variable to that component that will conditionally wrap the template in <xmp></xmp>.
But the problem is that I use Highlightjs, and that doesn't work if the code is in those xmp tags. It needs to be in <pre><code></code></pre>.
So I'm wondering if you can pass some parameter or do something to include a blade template without actually interpreting the code that's being included.
Update
A bit more clarification. Let's say template.blade.php has this:
<div id="test"></div>
<script>
alert('test');
</script>
In case 1 using #include('template') should alert test when the page is loaded.
In case 2 using #include('template') (but then another way I guess, that's what this question is about) I'd like it to display the code without interpreting it, like would happen when using <code>{{ '<div id="test"></div><script>alert('test');</script>' }}</code>.
I am trying to use a vue variable inside blade and image src attribute but vue gives template compiling errors.
Where is what I am trying to do
<img src="uploads/#{{authUser.profilePic}}"/>
I could separate this as a pure template but vue template loads little bit slower than a blade file.
Any help would be greatly appreciated.
Interpolation inside attributes is not available on Vue 2. Instead you use v-bind:src or the shortcut :src to bind a Javascript expression to src.
<img :src="'uploads/' + authUser.profilePic"/>
The javascript expression being string concatenation:
'uploads/' + authUser.profilePic
I am using Laravel 5.2 and for some reason the blade standard tags {{...}} are not escaping HTML as wrote in the documentation.
When I tries to write for example {{ HTML::tag('span','hello') }} I get the correct HTML and see hello in my browser. The I get same results if I write {!! HTML::tag('span','hello') !!}.
So why the {{...}} tags does not escaping the HTML tags, as they should?
you should use {{...}} for variable printing.
and {!!...!!} this for normal html. you can just write plain html without braces and it will show correctly.
I am going to use AngularJS along with Laravel, and I wanted to change Laravel tags to [[ ]] (which I think BTW is nicer since [ ] looks more like blade and is sharper :p )
Anyhow, I changed it with
Blade::setContentTags('[[', ']]'); // for variables and all things Blade
Blade::setEscapedContentTags('[[[', ']]]'); // for escaped data
How do I change the "Bracket Highlight" in Sublime now so that it still highlights my new tags??
Not directly answerting your question, but my solution to have Angular and Blade playing nice is very simple, I create a _partial every time I need some Angular and name this partial just '.php' and not '.blade.php', so if I have a form that uses Angular, I have:
{{ Form::open() }}
#include('_partials.posts.forms.create');
{{ Form::close() }}
In this case the included file would be views/_partials/posts/forms/create.php.
About Sublime, download Blade Syntax Highlighter, this file might give you a clue about how to change that for you:
https://github.com/Medalink/laravel-blade/blob/master/laravel-blade.tmLanguage
I know that you can change the default blade delimiter using
Blade::setEscapedContentTags('[[', ']]');
Blade::setContentTags('[[[', ']]]');
However I don't know where should I put it so that it only affect single blade template as opposed to putting it at app/start/global.php which affect whole application.
If you only want to use different tags for a single view, you can set the tags in the closure or controller action that will generate the view.
Route::get('/', function()
{
Blade::setEscapedContentTags('[[', ']]');
Blade::setContentTags('[[[', ']]]');
return View::make('home');
});
This could be an issue if you want to use the normal tags {{ and }} in an application layout but your custom ones in a nested view - I'm not sure what the best approach there would be.
The solution with Blade::setEscapedContentTags / Blade::setContentTags doesn't work in the latest versions of Laravel (checked at 5.6).
The recommended approach is (https://laravel.com/docs/5.6/blade#blade-and-javascript-frameworks):
Blade & JavaScript Frameworks
Since many JavaScript frameworks also use "curly" braces to indicate a
given expression should be displayed in the browser, you may use the #
symbol to inform the Blade rendering engine an expression should
remain untouched. For example:
Hello, #{{ name }}.
In this example, the #symbol will be removed by
Blade; however, {{ name }} expression will remain untouched by the
Blade engine, allowing it to instead be rendered by your JavaScript
framework.
The #verbatim Directive
If you are displaying JavaScript variables in
a large portion of your template, you may wrap the HTML in the
#verbatim directive so that you do not have to prefix each Blade echo
statement with an # symbol:
#verbatim
<div class="container">
Hello, {{ name }}.
</div>
#endverbatim
Simply use #verbatim directive.wrap your whole code in it and blade will just ignore all the curly braces.