How to Display Code Snippets with Syntax Highlighting in Laravel Blade
Table of Contents
This guide will help you integrate Prism.js in Laravel views to create an elegant code block editor.
Why Use Prism.js for Syntax Highlighting?
Prism.js is a fast and flexible JavaScript library designed for syntax highlighting. It supports various programming languages and provides an easy way to integrate visually appealing code blocks into your web application.
Step 1: Setting Up the Laravel Project
Before diving into the implementation, ensure you have a Laravel project setup installed.
Open your terminal and run the following command to create a fresh Laravel application:
composer create-project laravel/laravel LaravelCodePreviewApp
Step 2: Installing Prism.js
Download the Prism.js files from the official website. Alternatively, you can use a CDN to include the required CSS and JavaScript files in your Laravel application.
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
Step 3: Including Prism.js in Your Blade Template
Add the Prism.js styles and scripts in the <head> and <body> sections of your Laravel view layout file.
Open resources/views/layouts/app.blade.php and update the following code into that file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Code Highlighting</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet">
</head>
<body>
@yield('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
</body>
</html>
Step 4: Displaying Code Snippets in Blade Views
To display a code snippet, wrap it inside <pre> and <code> tags. Specify the language using the class attribute. For example:
Let's create laravel blade view file with the following command:
php artisan make:view code-preview
Now, open resources/views/code-preview.blade.php and update the following code into that file:
@extends('layouts.app')
@section('content')
<pre>
<code class="language-css">
p { color: red; }
</code>
</pre>
@endsection
This will render the CSS code block with syntax highlighting applied.
Step 5: Popular Language Code Examples
Here are examples of commonly used programming languages:
HTML
<pre> <code class="language-html"> <xmp> <p>HTML CODE Editor</p> </xmp> </code> </pre>CSS
<pre> <code class="language-css"> img { display: block; width: 100%; height: auto; } </code> </pre>-
PHP
<pre> <code class="language-php"> $var = "ee"; echo "Hello, Laravel!"; </code> </pre> -
JavaScript
<pre> <code class="language-js"> Livewire.on('event', () => { console.log('Livewire event triggered'); }); </code> </pre> -
Laravel Blade
<pre> <code class="language-php"> @verbatim <div> {{ name }} </div> @endverbatim </code> </pre>
I recommended to Download the required JavaScript and CSS files to working all above example and enable the 'Copy to Clipboard' functionality: Download Files.
Step 6: Handling Blade Syntax Conflicts
By default, Blade templates process curly braces ({{ }}), which can interfere with code display. Use the @verbatim directive to escape Blade processing.
<pre>
<code class="language-php">
@verbatim
<div>
{{ name }}
</div>
@endverbatim
</code>
</pre>
The @verbatim directive ensures that Blade does not modify the code within its block.
Step 7: Choose a Theme for Your Code Blocks
Prism.js offers multiple themes to customize the appearance of your highlighted code. You can preview and download themes from the Prism.js Themes section. Replace the CSS link with your chosen theme:
Step 8: Setting Up Routes And Run Project
- Add the following line to your routes/web.php file to define the route for the code preview page:
Route::get('/code-preview',function(Request $request){ return view("code-preview"); }); - Now, in your project root directory, execute the following command to start the Laravel development server:
php artisan serve Open your web browser and navigate to the following URL to view the code preview:
http://localhost:8000/code-preview
Conclusion
Integrating Prism.js with Laravel views is a straightforward process that enhances your web application by providing visually appealing, syntax-highlighted code blocks. By using the @verbatim directive and customizing Prism.js themes, you can create an intuitive and polished developer experience.
0 Comments