CODEWITHSUNDEEP
laravelhighlight
Md. Harun Or Rashid
Md. Harun Or Rashid

Reputation: 2180

Highlight.js not workng on Laravel 5.3 Target Page

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.

&lt;p&gt;The place for Laravel Blade Template.&lt;/p&gt;
&lt;pre&gt;
&lt;code class=&quot;language-html&quot;&gt;&lt;div&gt;&lt;h1&gt;
This is a Header&lt;/h1&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&nbsp;&lt;/p&gt;

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.

Upvotes: 0

Views: 343

Answers (2)

LordRampantHump
LordRampantHump

Reputation: 384

In Laravel 5 to output non escaped HTML you must use {!! !!}

An example of this:

{!!$myDatabaseHtml!!}

Upvotes: 1

TheAlexLichter
TheAlexLichter

Reputation: 7289

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.

Upvotes: 1

Related Questions