Enhancing Code Visibility in Symfony with PrismJS Integration
Written on
Chapter 1: Introduction to Code Highlighting
Hello, fellow developers! 🚀 Have you ever been immersed in a Symfony project and thought it could use a touch of syntax enhancement? Whether you're displaying code snippets in your application or sharing them on a blog, you likely want those blocks to shine as brightly as your IDE in dark mode. Enter PrismJS—your go-to tool for syntax highlighting, transforming your code snippets into not just readable, but visually stunning elements.
In this engaging guide, I will lead you through the process of integrating PrismJS into your Symfony project using Webpack, step-by-step. Whether you're an experienced Symfony user or a newcomer, there's something here for you. So, grab your favorite drink, get comfortable, and let’s make our code sparkle!
Section 1.1: Preparing Your Environment
Before we embark on our journey into the realm of code highlighting, make sure you have a Symfony project up and running. I'll assume you've already navigated the Symfony landscape and have a project ready to enhance with PrismJS.
Section 1.2: Choosing Your Package Manager
Open your terminal within your project directory. It’s time to introduce PrismJS into our setup. Whether you prefer Yarn or NPM, execute the appropriate command:
For Yarn:
yarn add prismjs
For NPM:
npm install prismjs --save
This command acts like sending an invitation to PrismJS, welcoming it to our project.
Section 1.3: Configuring Webpack Encore
Symfony utilizes Webpack Encore for managing assets. If you haven't set up Encore yet, I recommend checking the Symfony documentation. It's worth your time.
Now, let’s configure Encore to recognize PrismJS. Open your webpack.config.js and add the following lines:
// webpack.config.js
Encore
// other configurations...
.addEntry('app', './assets/app.js')
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction());
Section 1.4: Inviting PrismJS to Your Application
Within your assets directory (usually assets/js/app.js), we need to formally include PrismJS:
// assets/app.js
import Prism from 'prismjs';
import 'prismjs/themes/prism-tomorrow.css'; // theme
import "prismjs/components/prism-markup-templating.js";
import 'prismjs/components/prism-php';
import 'prismjs/components/prism-php-extras';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-bash';
// Call it on document ready
document.addEventListener('DOMContentLoaded', (event) => {
Prism.highlightAll();
});
This snippet serves as the magical incantation that animates our code, making it visually appealing through syntax highlighting.
Section 1.5: Compiling Your Assets
With PrismJS now part of our setup, let’s instruct Webpack Encore to compile our assets. Run the following command:
For development:
yarn encore dev
For production:
yarn encore production
Chapter 2: Utilizing PrismJS in Twig Templates
Whenever you want to highlight code in your Symfony Twig templates, simply wrap your code in the appropriate tags:
// Your illuminating PHP code here
And there you have it! You've successfully incorporated PrismJS into your Symfony project, transforming your code blocks into captivating displays.
Curtain Call
Remember, this journey doesn't end here. PrismJS is a treasure trove of themes and languages just waiting for you to explore. Customize it to your heart's content, turning your project into more than just a code repository—make it a showcase of your craftsmanship.
Until next time, keep coding, sharing, and most importantly, enjoying the journey. Cheers to adding a splash of color to our code! 🎉
This video titled "How to add code blocks with syntax highlighting to a Next.js blog with Prism.js" provides an insightful guide on enhancing code visibility in web applications.