Save 25% on our pro plugins with coupon code: SPRING2023
Web Dev + WordPress + Security

Filtered Language Menus with Prismatic WordPress Plugin

Prismatic Icon Prismatic is a free WordPress plugin that adds syntax highlighting to code samples. You can use either Highlight.js or Prism.js to make your code snippets look amazing. This quick tutorial shares a way to customize Prismatic to save time scrolling thru a bunch of language options. Huge time-saver and simple to implement in a few minutes.

🙏 Thanks to n8finch for sharing this technique ✨

The Goal

When enabled, Prismatic adds some blocks to the WordPress editor. The Prismatic block provides a dropdown/select menu, where you can choose from a long list of supported languages. It’s nice to have all those languages in the list, but if you’re only ever using a few different languages, it doesn’t make sense having to scroll through the many options.

So to improve workflow and save time, you can add some custom code to filter the language menus, so only your select few languages are listed. Here is a screenshot to give you a better idea of what we’re doing here:

Screenshot: Prismatic block showing filtered language optionsScreenshot: Prismatic block showing filtered language options
Important: This technique requires Prismatic 3.1 or better.

Step 1: Add the JavaScript

In your WordPress theme folder, create a directory named /js/ (or whatever you would like to name it is fine). Then inside that folder, create a JavaScript file named prismatic.js (or any name you like). To that file, add the following code:

wp.hooks.addFilter('prismaticPrismMenu', 'prismatic/blocks', function(languages) {
	return [
		{ label : 'Language..', value : '' },
		{ label : 'PHP',        value : 'php' },
		{ label : 'JavaScript', value : 'javascript' },
		{ label : 'HTML',       value : 'markup' },
		{ label : 'JSON',       value : 'json' },
		{ label : 'YAML',       value : 'yaml' }

You can customize the languages to whatever you want. Visit the Prismatic documentation for all the supported languages and respective abbreviations.

Note: In the previous code, we are customizing the Prism.js menu. To instead customize the Highlight.js menu, replace prismaticPrismMenu with prismaticHighlightMenu.

Step 2: Add WordPress code

Next, add the following custom code to WordPress.

// Prismatic filter language menu
function prismatic_language_menu() {
	wp_enqueue_script('prismatic-language-menu', get_stylesheet_directory_uri() .'/js/prismatic.js', array('wp-hooks', 'wp-i18n', 'wp-blocks', 'wp-dom'), PRISMATIC_VERSION, true);
add_action('admin_enqueue_scripts', 'prismatic_language_menu');

In Step 1, we used /js/ for the folder name, and prismatic.js for the file name. Notice in the code above, where it specifies the path relative to your WordPress theme, /js/prismatic.js. This tutorial is set up to use that specific path, but you can change it to whatever you prefer. Just make sure that the path matches up with whatever you’re using in Step 1.

After saving changes, the result will look similar to this:

Screenshot: Prismatic block showing filtered language optionsScreenshot: Prismatic block showing filtered language options

Enjoy! :)

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
Banhammer: Protect your WordPress site against threats.
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
SAC Pro: Unlimited chats.
Excellent (and free) tool to test your site's SSL configuration.
Plugin updates! All of our free and pro plugins ready for WordPress 6.2.
Daylight savings is a complete waste of time and needs to be eliminated.
Got a couple of snow days here in mid-March. Fortunately it's not sticking.
I handle all email in real time as it comes in, perpetually clear inbox for years now.
Added some nice features to Wutsearch search engine launchpad. Now 21 engines!
.wp TLD plz :)
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.