Highlight.js not workng on Laravel 5.3 Target Page - laravel

I am developing a Blog with Laravel 5.3. In the Add Post Page, I use CKEDITOR with Code Snippet Plugin. In this area Everything is OK. Code added in the textarea field by plugin is also become highlighted.
In the Target Page I added:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css">
In the Header section of the page.
and
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
In the footer section of the page.
The page received the following html code from the Database.
<p>The place for Laravel Blade Template.</p>
<pre>
<code class="language-html"><div><h1>
This is a Header</h1></div></code></pre>
<p> </p>
which is showing like this.
<p>The place for Laravel Blade Template.</p> <pre>
<code class="language-html"><div><h1>This is a Header</h1></div></code>
</pre> <p> </p>
So the code section is not highlighted.
How can I do that. What's my wrong? I need Help.

The problem is, that the whole HTML code is escaped, so it won't be interpreted by the browser.
What you want is that only the content between <code class="language-html">...</code> is escaped, so that the Browser renders the code container correctly and that highlight.js can hook into the DOM object.

In Laravel 5 to output non escaped HTML you must use {!! !!}
An example of this:
{!!$myDatabaseHtml!!}

Related

Broken html script - does Incapsula change the html tags positions?

I am using Magento2 with fpc, varnish, redis and Incapsula, and I am facing a very strange behaviour for a broken html content. I have a phtml file containing some php followed by javascript as follows:
<div class="some-class">
<!--html -->
</div>
<script>
//...
$element.wrap('<div class="red"></div>');
//..
</script>
In a parent template (also phtml file), this file is being included using php include (yes this is how a Magento core module including it without using blocks) as:
<?php include 'path/to/file.phtml'; ?>
The problem is that on the page source I am getting the following unexpected html:
<div class="some-class">
<!--html -->
</div>
<script>
//...
$element.wrap('<div class="red"></script></div>');
//..broken content here due to the moved script tag
Notice the moved ending tag ..
I know that this scenario can happen due to several issues, but I am suspecting Incapsula because its being used by the only environment where the issue occurs
Please suggest possible scenarios related to caching, any help or idea is appreciated.
Thanks
Try to use this way to echo other phtml in phtml.
<?php
echo $block->getLayout()
->createBlock("Magento\Framework\View\Element\Template")
->setTemplate("Your_Module::file.phtml")
->toHtml();
?>

How Load asset only once laravel 5.3?

How Load asset only once. if i open dashboard, all asset will be load and then i open other page, not load asset second time..
how to make load asset only once in blade template?
ex:
template.blade.php
#yield('css')
#yield('js')
dashboard.blade.php
#section('css')
//some code here
#endsection
group.blade.php
#section('css')
//some code here
#endsection
any help me?
thanks
That's not how the HTTP protocol works. The HTTP protocol is stateless, meaning it does not remember that a user visited the dashboard before they visited group.
The only assurance you have is that when a user visits the dashboard the CSS of the dashboard will be cached so subsequent requests for them will load them from the cache and not from the webserver.
However you must assume that a user could visit group first so all required CSS for group must be included in the group template, even if that means that means you'll be replicating some CSS for each page.
If you really want to load each asset only once then you should use a JavaScript library like jquery mobile to specify different sections that are loaded via AJAX. However the how and why is way too broad a question to cover here.
Why you loading asset with #yield? Just load it on your layouts.
For example app.blade.php which in layouts folder.
app.blade.php
<html>
<head>
<link rel="stylesheets" href="{{asset('css/style.css')}}"/>
<title>title goes here</title>
</head>
<body>
#yield('content')
<script src="{{asset('js/jquery.js')}}"></script>
</body>
</html>
Then load layout on any view for example dashboard
dashboard.blade.php
#extends('layouts.app) //it loads all template data from layouts(app.blade.php)
#section('content')
content for dashboard
#endsection

Firefox requesting content inside HTML5 template before activation

I was debugging my web app using DevTools when I noticed that Firefox is requesting url defined in src attribute of an img that is located inside a HTML5 template tag, while Chrome doesn't.
I'm using the last version (50.0).
Is this a bug?
Example below:
<template id="object-img">
<div class='object-container'>
<div>
<img src="cacaca.jpg" class="img-responsive" alt="imagem" />
</div>
</div>
</template>
It's a kind of optimization from Firefox.
The image is requested only the first time if it is not already in the browser's history / cache. Subsequent reload of the page won't trigger the request again.
The problem is that the image inside the <template> is requested before the following but normal images in the rendered DOM, which could be counterproductive in some situations. A solution is to put the <template> after the other images.
Note: the template specifications state that the elements in the template are not rendered, but they are parsed. They say nothing about preloading of referenced resources.

CKEditor editable content in IFrame

Is it possible to run ckeditor on an IFrame so that can encapsulate a full html page? I have tried various methods but nothing seems to work.
What I am looking for is to have a ckeditor wrapper page say Editor.htm which contains an editable IFrame linked to my real html page say test.htm. Something line:
Editor.htm
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.ckeditor.com/4.5.10/standard-all/ckeditor.js"></script>
</head>
<body>
<iframe contenteditable="true" src="test.htm" id="editor1" name="editor1"></iframe>
</body>
</html>
You can set ckeditor to use "fullPage" mode, allowing you to edit everything from the opening tag to the closing tag. See the official sample here.
You will still need to get the content into the editor (e.g. the html page you want to edit) and save the result on the server, but this is something specific to your site, language, platform etc.

using ZURB Foundation with laravel

I am new to laravel so I am not sure how this can be achieved. I am using ZURB Foundation and trying to create a button in the page.
I use linkRoute always to redirect to a named route then redirect to a specific controller action. I have the below:
<body >
<h1 align="center">ShopCon.com</h1><br><br>
<a style="margin-left:50px;" href="{{ HTML::linkRoute('membersaccess', 'Members Access') }}" class="medium success button">Login or Register</a>
</body>
but when I render this, it shows like this
Members Access" class="medium success button">Login or Register
instead of showing the button and text within it and link to named route. How can this be fixed? I read something about macros but unable to clearly understand them or use them to achieve this.
Picture included for reference:
HTML::linkRoute produces an HTML anchor tag.
Since you only want the URL, use URL::route.

Resources