Code Highlighting in your Web Apps [Symfony + Webpack] with PrismJS

Hey fellow devs! 🚀 Ever found yourself deep in the Symfony trenches, thinking your project could use a sprinkle of syntax sugar? Maybe you’re showcasing snippets in your app or blogging platform and want those <code> blocks to shine brighter than your IDE on dark mode? Enter PrismJS - your new best friend for syntax highlighting, making your code snippets not just readable, but visually appealing.

In this cozy little post, I’ll walk you through integrating PrismJS into your Symfony project with Webpack, step by step. Whether you’re a seasoned Symfony veteran or just starting out, this guide’s got something for everyone. So, grab your favorite beverage, settle in, and let’s get our code to sparkle!

Step 1: Setting Up the Scene

Before diving into the magical world of code highlighting, ensure you’ve got a Symfony project up and running. I’ll assume you’ve already danced with Symfony and have a project ready to beautify with PrismJS.

Step 2: Yarn or NPM? Pick Your Champion

Within your project directory, open up your terminal. It’s time to bring PrismJS into our world. Whether you’re on team Yarn or NPM, run the following command: