Need easier way to enable languages

[bvibber]

Awesome, I got this working on my blog (after updating PHP) and it's great! :D

However I had to enable Rust and NASM for my recent blog posts, and these languages currently aren't included.

Per the readme I was able to add a mini plugin with a filter to enable the languages:

add_filter( 'shiny_code_languages', function ($data) {
	$data['rust'] = [
		'name' => 'Rust',
		'codemirror' => [
			'autoCloseBrackets' => true,
			'matchBrackets' => true,
		],
	];
	$data['nasm'] = [
		'name' => 'NASM',
		'codemirror' => [
			'autoCloseBrackets' => false,
			'matchBrackets' => false,
		],
	];
	return $data;
});

which got them selectable in the block options, but there's no highlighting either in the editor or the output.

I was able to fix output by rebuilding the prism.js and prism.css files in the main shiny-code distribution with the additional languages, and it's running pretty great! I'm not sure what to do to add languages for CodeMirror for the editing, but for now I'm just living with it. ;)

Thanks again -- I've been wanting to add a syntax highlight plugin for my recent blog series but everything out there apparently interacts badly with Gutenberg, which I've fallen in love with. ;)

[bradyvercher]

It looks like there are a couple of hurdles here. One was a bug that prevented Prism.js language assets from being loaded how I imagined, but that's fixed in fb5fc14.

When you register a language, you can add a URL to a Prism.js language file like this:

add_filter( 'shiny_code_languages', function ($data) {
	$data['rust'] = [
		'name' => 'Rust',
		'codemirror' => [
			'autoCloseBrackets' => true,
			'matchBrackets' => true,
			'mode' => 'rust',
		],
		'prism' => 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-rust.js',
	];
} );

That will automatically register and enqueue the file on the frontend. It does add an extra HTTP request for each language, so that's worth keeping in mind.

Otherwise, you can rebuild Prism.js with your own configuration options like you did. I'd recommend unregistering the asset bundled in Shiny Code and re-registering your custom bundle so your changes aren't lost on update:

add_action( 'init', function() {
	wp_deregister_script( 'prism' );

	wp_register_script(
		'prism',
		plugins_url( 'prism.min.js', __FILE__ ),
		[],
		'1.15.0',
		true
	);
} );

---

The CodeMirror issue is a bit more tricky. It looks like WordPress doesn't bundle all the "modes" that are available and Rust is one of the ones that was dropped.

The CodeMirror modes appear to rely on a global CodeMirror variable, but WordPress namespaces their instance to wp.CodeMirror, so loading the mode file directly won't work. You can make the CodeMirror global reference wp.CodeMirror before loading the mode file:

add_action( 'enqueue_block_editor_assets', function() {
	wp_enqueue_script(
		'codemirror-mode-rust',
		'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/rust/rust.js',
		[ 'wp-codemirror' ]
	);

	wp_add_inline_script(
		'codemirror-mode-rust',
		'CodeMirror = wp.CodeMirror;',
		'before'
	);
}, 11 );

That has the potential to cause conflicts with other scripts/plugins, but if you're not using anything else that relies on CodeMirror in the editor, it should be fine.

There doesn't appear to be a mode available for NASM, but I did come across these two options, which might help:

• http://pasm.pis.to/js/codemirror/mode/x86/x86.js
• https://github.com/converge/brackets-nasm-syntax-highlighter/blob/master/lib/nasm/nasm.js

---

I didn't realize WordPress had dropped some of the CodeMirror modes, so trying to add support for Rust was enlightening. It should be easier to register those modes without causing conflicts, so I'll keep this open to think on it a bit more.

Aside from the issues you ran into, I'm glad to hear everything else is working for you. I've always wanted a better way to embed code snippets into posts without using shortcodes or third-party services and Gutenberg certainly makes that possible.

[bvibber]

Thanks, I'll try the custom re-registration of the prism.js bundle next time I update the config.

[bvibber]

Can confirm that adding the extra codemirror & prism modules via the above methods seems to work fine for now -- I threw C in there and now it's working just fine too. :D