Integrating highlight.js into a Laravel project for syntax highlighting
Артур Хайбуллин
Артур Хайбуллин 22 Jan 2026, 18:10

Hello! As you may have noticed recently, I successfully integrated highlight.js in Laravel your blog project for automatic code syntax highlighting on blog pages. This solution is ideal for me, since the main goal was to make publications with code more readable.

code_highlighting.webp

Installation and basic setup

Installation is carried out using npm or yarn:

npm install highlight.js

// или

yarn add highlight.js

Connection in the main JavaScript file:

// app.js

import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.css';

// Автоматическая подсветка всех блоков кода
hljs.highlightAll();

Main features of highlight.js

1. Supports 190+ programming languages

// PHP пример
public function getUser($id) {
    return User::find($id);
}
// JavaScript пример
const fetchData = async () => {
    try {
        const response = await fetch('/api/data');
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
    }
};

2. 100+ themes
You can easily switch between themes:

// Темная тема для ночного режима
import 'highlight.js/styles/github-dark.css';

// Светлая тема для дневного режима  
import 'highlight.js/styles/github.css';

3. Automatic language detection
The system itself determines the programming language:

# Python код будет распознан автоматически
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

Advantages:

  • Improved readability - the code becomes structured and understandable

  • Professional Look - posts look like in technical documentation

  • Cross-platform - works in all modern browsers

  • Easy customization - you can create your own lighting themes

  • Autonomy - does not require server processing

Practical use cases

Especially useful for a blog about web development:

Frontend development:

<!-- HTML с подсветкой -->
<div class="container">
    <h1>Заголовок страницы</h1>
    <p>Текст параграфа</p>
</div>

Backend development:

-- SQL запросы тоже поддерживаются
SELECT u.name, p.title 
FROM users u 
JOIN posts p ON u.id = p.user_id 
WHERE p.published = 1;

The integration took only a few minutes, but significantly improved the quality of publications. Now readers can easily understand the code examples without any extra effort.

For those who are just starting to blog about programming, I recommend starting with highlight.js - this is a simple but very effective solution for syntax highlighting.

Surely some of you also use alternative solutions, I would be grateful if you share your personal experience and tell us about it in the comments.

Official documentation the project is available at the link https://highlightjs.readthedocs.io/en/latest/

0
147
Comments (0)
Leave Comment
No comments yet

Be the first to comment on this post