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.
Installation and basic setup
Installation is carried out using npm or yarn:
npm install highlight.js
// или
yarn add highlight.jsConnection 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/

Be the first to comment on this post