Building a Custom Code Block Using Advanced Custom Fields in WordPress

ACF Gutenberg

I recently created a custom code block using ACF, which is used to replace the Enlighter - Customizable Syntax Highlighter plugin.

Building a Custom Code Block Using Advanced Custom Fields in WordPress

The block requirements

→ The custom block should utilize core/code as its inner block.

→ Optimize CSS and JS since with the custom block, JS and CSS are only registered when the block is utilized.

Tools/Plugins Utilized

Advanced Custom Field Pro Advanced Custom Field Pro

Highlight.js highlight.js

After completing the build process, I simply use the block, paste the code I want to display, and then add a class to register the language in highlight.js.

Building a Custom Code Block Using Advanced Custom Fields in WordPress
Building a Custom Code Block Using Advanced Custom Fields in WordPress
Building a Custom Code Block Using Advanced Custom Fields in WordPress
Building a Custom Code Block Using Advanced Custom Fields in WordPress

Top Image - My Custom Code Block
Bottom Image - Current Enlighter Block

All Portfolio →

Figma to WordPress Website using Zion Builder

Digitalizing Resident Data Management and Monthly Contributions

WordPress Events Website Build Using The Events Calendar Pro

Creating a Simple Cookie Notification – A Quick Demo

My WordPress Website Speed Optimization Journal

Optimizing Contact Form 7: Enabling the Submit Button for Complete and Valid Entries

Advanced Custom Database Tables in WordPress

How I Create Custom Post Type Relationships In WordPress using ACF

Creating AJAX Load More in WordPress Without a Plugin

Adding Login and Logout to WordPress Menu

Create simple event management in WordPress

Creating a Custom Menu Navigation Using ACF Field

Learning Web Interaction Through Hands-On Practice

How to Allow Users to Like Content

How I Add a Notepad to WordPress for User Subscribers

How I Create Live Search in a WordPress Website

Exploring Custom Database Tables in WordPress

WordPress Theme Setup, Install & Custom Design Using Visual Composer for Search Impulse

WordPress Website Build Using ACF & Custom Functionality For UNIKEY Academy

Elementor Pro Development for an Digital Marketing – Paseo Consulting

PSD to Responsive HTML for Crab Boil 59

PSD to Responsive HTML Using Bootstrap for Shopsy.pk

PSD to Responsive HTML Using Bootstrap for OBA

PSD to Responsive HTML Using Bootstrap for Kampus Blog