javascripthighlightjs

Can't get higlightjs to highlight HTML code

I have made a little file here

<!DOCTYPE html>
<html>
<head>
    <title>highlightjs</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css">

</head>
<body>

    <pre>
        <code class="php">
            namespace App\Http\Controllers;

            use Illuminate\Http\Request;
            use DB;
            use Session;

            class ProductController extends Controller
            {
                /**
                 * Show the application dashboard.
                 *
                 * @return \Illuminate\Http\Response
                 */
                public function index()
                {
                    $posts = DB::table("posts")->get();
                    return view('posts',compact('posts'));
                }

                /**
                 * Show the application dashboard.
                 *
                 * @return \Illuminate\Http\Response
                 */
                public function destroy($id)
                {
                    DB::table("posts")->delete($id);
                    Session::put('success', 'Your Record Deleted Successfully.');
                    return redirect()->route('posts');
                }
            }
        </code>
    </pre>

    <pre>
        <code class="xml hljs">    

            <body>
                <p class="title" id='title'>Title</p>

                <h2>Why is this HTML code not highlighted?</h2>

                &ltp&gtTeeeeest&lt/p&gt
            </body>

        </code>
    </pre>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>

and I am trying to highlight HTML code like on this website:

DEMO

And it doesn't work. He is doing probably something that I am not. But what?? My PHP is highlighted properly. How to highlight the HTML code also?

Solution

  • Replace the < character with &lt;and > character with &gt; inside code tag.