Add HTML Editor Syntax Highlighter to ACF WYSIWYG

functions.php

<?php
//---------------------------------------------------//
// Add HTML Editor Syntax Highlighter to ACF WYSIWYG //
//---------------------------------------------------//

/* ADD CODE MIRROR CSS */
function admin_style() {
	wp_enqueue_style('admin-styles', 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css');
}
add_action('admin_enqueue_scripts', 'admin_style');

/* ENQEUE CODE MIRROR JS */
function my_enqueue() {
	wp_enqueue_script('code_mirror_script1', 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.js');
	wp_enqueue_script('code_mirror_script2', 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/xml/xml.js');
}
add_action('admin_enqueue_scripts', 'my_enqueue');

/* ADD CODE MIRROR ADDITIONAL STYLES */
add_action('admin_head', 'custom_css');
function custom_css() {
	echo '
	<style>
	.tmce-active .mce-tinymce{display:block !important;visibility:visible !important;}
	.html-active .mce-tinymce{display:none !important;visibility:hidden !important;}
	.tmce-active .CodeMirror{display:none;}
	</style>
	<script>
	jQuery(document).ready(function($){
		function rundCodeMirror(){
			var areas = document.getElementsByClassName("wp-editor-area"); // I experienced a duplicate content field issue with this line of code, my fix was to replace this line with: var areas = $(".wp-editor-area:not(#content)");
			for(var i = 0; i < areas.length; i++) {
				CodeMirror.fromTextArea(areas.item(i), { // In some cases `areas.item(i)` needs to be changed to `areas[i]`
					mode : "xml",
					htmlMode: true,
					theme: "material",
					lineNumbers: true
				});
			}
		}
		setTimeout(rundCodeMirror, 1000);
	});
	</script>
	';
}

Thanks to a comment here

Please take note of the comments on lines 30 and 32

https://gist.github.com/itsHall/73051c485cff04ca903b4bf55bc9d193 is code to enable resizing of the WYSIWYG fields.