Save 25% on Wizard’s SQL for WP w/ code: WIZARDSQL
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 = Designer. Developer. Producer. Writer. Editor. Etc.
GA Pro: Add Google Analytics to WordPress like a pro.

Leave a reply

Name and email required. Email kept private. Basic markup allowed. Please wrap any small/single-line code snippets with <code> tags. Wrap any long/multi-line snippets with <pre><code> tags. For more info, check out the Comment Policy and Privacy Policy.

Subscribe to comments on this post

Welcome
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 »
GA Pro: Add Google Analytics to WordPress like a pro.
Thoughts
DIY: Monitor File Changes via Cron working perfectly for over a decade.
Mastodon social is a trip. Glad I found it.
As a strict rule, I never use cache plugins on any of my sites. They cause more problems than they solve, imho. Just not worth it.
Currently on a posting spree :)
6 must come before 7.
My top three favorite-to-write coding languages: CSS, PHP, JavaScript.
If you’re not 100% sure that you can trust something, you can’t.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.