Made Match Braces and Custom Class compatible (#2947)

Author: RunDevelopment

plugins/custom-class/prism-custom-class.js

@@ -30,6 +30,15 @@
 	var prefixString = '';
 
 
+	/**
+	 * @param {string} className
+	 * @param {string} language
+	 */
+	function apply(className, language) {
+		return prefixString + (mapper ? mapper(className, language) : className);
+	}
+
+
 	Prism.plugins.customClass = {
 		/**
 		 * Sets the function which can be used to add custom aliases to any token.
@@ -62,7 +71,16 @@
 		 */
 		prefix: function prefix(string) {
 			prefixString = string || '';
-		}
+		},
+		/**
+		 * Applies the current mapping and prefix to the given class name.
+		 *
+		 * @param {string} className A single class name.
+		 * @param {string} language The language of the code that contains this class name.
+		 *
+		 * If the language is unknown, pass `"none"`.
+		 */
+		apply: apply
 	};
 
 	Prism.hooks.add('wrap', function (env) {
@@ -85,7 +103,7 @@
 		}
 
 		env.classes = env.classes.map(function (c) {
-			return prefixString + (mapper ? mapper(c, env.language) : c);
+			return apply(c, env.language);
 		});
 	});
 

plugins/custom-class/prism-custom-class.min.js

@@ -4,6 +4,15 @@
 		return;
 	}
 
+	function mapClassName(name) {
+		var customClass = Prism.plugins.customClass;
+		if (customClass) {
+			return customClass.apply(name, 'none');
+		} else {
+			return name;
+		}
+	}
+
 	var PARTNER = {
 		'(': ')',
 		'[': ']',
@@ -51,15 +60,15 @@
 		}
 
 		[this, getPartnerBrace(this)].forEach(function (e) {
-			e.classList.add('brace-hover');
+			e.classList.add(mapClassName('brace-hover'));
 		});
 	}
 	/**
 	 * @this {HTMLElement}
 	 */
 	function leaveBrace() {
 		[this, getPartnerBrace(this)].forEach(function (e) {
-			e.classList.remove('brace-hover');
+			e.classList.remove(mapClassName('brace-hover'));
 		});
 	}
 	/**
@@ -71,7 +80,7 @@
 		}
 
 		[this, getPartnerBrace(this)].forEach(function (e) {
-			e.classList.add('brace-selected');
+			e.classList.add(mapClassName('brace-selected'));
 		});
 	}
 
@@ -102,22 +111,25 @@
 			pre.addEventListener('mousedown', function removeBraceSelected() {
 				// the code element might have been replaced
 				var code = pre.querySelector('code');
-				Array.prototype.slice.call(code.querySelectorAll('.brace-selected')).forEach(function (e) {
-					e.classList.remove('brace-selected');
+				var className = mapClassName('brace-selected');
+				Array.prototype.slice.call(code.querySelectorAll('.' + className)).forEach(function (e) {
+					e.classList.remove(className);
 				});
 			});
 			Object.defineProperty(pre, '__listenerAdded', { value: true });
 		}
 
 		/** @type {HTMLSpanElement[]} */
-		var punctuation = Array.prototype.slice.call(code.querySelectorAll('span.token.punctuation'));
+		var punctuation = Array.prototype.slice.call(
+			code.querySelectorAll('span.' + mapClassName('token') + '.' + mapClassName('punctuation'))
+		);
 
 		/** @type {{ index: number, open: boolean, element: HTMLElement }[]} */
 		var allBraces = [];
 
 		toMatch.forEach(function (open) {
 			var close = PARTNER[open];
-			var name = NAMES[open];
+			var name = mapClassName(NAMES[open]);
 
 			/** @type {[number, number][]} */
 			var pairs = [];
@@ -132,12 +144,12 @@
 					if (text === open) {
 						allBraces.push({ index: i, open: true, element: element });
 						element.classList.add(name);
-						element.classList.add('brace-open');
+						element.classList.add(mapClassName('brace-open'));
 						openStack.push(i);
 					} else if (text === close) {
 						allBraces.push({ index: i, open: false, element: element });
 						element.classList.add(name);
-						element.classList.add('brace-close');
+						element.classList.add(mapClassName('brace-close'));
 						if (openStack.length) {
 							pairs.push([i, openStack.pop()]);
 						}
@@ -166,11 +178,11 @@
 		allBraces.sort(function (a, b) { return a.index - b.index; });
 		allBraces.forEach(function (brace) {
 			if (brace.open) {
-				brace.element.classList.add('brace-level-' + (level % LEVEL_WARP + 1));
+				brace.element.classList.add(mapClassName('brace-level-' + (level % LEVEL_WARP + 1)));
 				level++;
 			} else {
 				level = Math.max(0, level - 1);
-				brace.element.classList.add('brace-level-' + (level % LEVEL_WARP + 1));
+				brace.element.classList.add(mapClassName('brace-level-' + (level % LEVEL_WARP + 1)));
 			}
 		});
 	});