diff --git a/download.html b/download.html
index 71f0e93f19..6f20df9554 100644
--- a/download.html
+++ b/download.html
@@ -8,7 +8,8 @@
 <link rel="stylesheet" href="style.css" />
 <link rel="stylesheet" href="themes/prism.css" data-noprefix />
 <style>
-form label {
+form #components label,
+form > p:first-of-type > label {
 	display: block;
 	padding: .2em;
 	padding-left: 1.9em;
@@ -17,16 +18,17 @@
 	-webkit-column-break-inside: avoid;
 }
 
-	form label .name {
+	form #components label .name {
 		margin-right: .3em;
 	}
 
-	form label a.owner {
+	form #components label a.owner {
 		margin-left: 0;
 		hyphens: none;
 	}
 
-	form label input {
+	form #components label input,
+	form > p:first-of-type > label input {
 		margin-right: .7em;
 		margin-left: -1.7em;
 	}
@@ -54,7 +56,8 @@
 }
 
 section.options#category-languages,
-section.options#category-plugins {
+section.options#category-plugins,
+section#options {
 	width: 100%;
 	float: none;
 	column-count: 3;
@@ -63,11 +66,13 @@
 }
 
 	section.options#category-languages label,
-	section.options#category-plugins label {
+	section.options#category-plugins label,
+	section#options #option-container > div {
 		break-inside: avoid;
 	}
 	section.options#category-languages > h1,
-	section.options#category-plugins > h1 {
+	section.options#category-plugins > h1,
+	section#options > h1 {
 		margin-top: 0;
 		column-span: all;
 	}
@@ -91,6 +96,36 @@
 		column-span: all;
 	}
 
+
+#option-container > div,
+#option-container > div {
+	padding: 0 1em .5em 0;
+}
+
+#option-container label > span {
+	padding-right: .5em;
+}
+
+#option-container input[type="text"],
+#option-container input[type="number"] {
+	display: block;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.option-item {
+	position: relative;
+}
+
+#option-container .option-item-error {
+	color: #B61500;
+	font-size: 90%;
+	display: none;
+}
+
+
 section.download {
 	width: 50%;
 	float: left;
@@ -148,6 +183,11 @@ <h2>Customize your download</h2>
 
 		<section id="components"></section>
 
+		<section id="options">
+			<h1>Options</h1>
+			<div id="option-container"></div>
+		</section>
+
 		<p>
 			Total filesize: <strong id="filesize"></strong> (<strong id="percent-js"></strong> JavaScript + <strong id="percent-css"></strong> CSS)
 		</p>
@@ -179,6 +219,7 @@ <h2>Customize your download</h2>
 <script src="scripts/code.js"></script>
 <script src="scripts/vendor/promise.js"></script>
 <script src="scripts/vendor/FileSaver.min.js"></script>
+<script src="scripts/download-options.js"></script>
 <script src="scripts/download.js"></script>
 
 </body>
diff --git a/scripts/download-options.js b/scripts/download-options.js
new file mode 100644
index 0000000000..5ae5741497
--- /dev/null
+++ b/scripts/download-options.js
@@ -0,0 +1,243 @@
+/**
+ * @typedef DownloadOption
+ * @property {string} id All ids have to be unique and start with `options-`.
+ * @property {string} title
+ * @property {string|string[]} [require] A list of required components for this option to take effect.
+ * @property {boolean} [enabled]
+ * @property {Object<string, OptionItem>} items
+ * @property {(this: DownloadOption, code: Code) => void} apply
+ *
+ * @typedef {StringOptionItem | NumberOptionItem | BooleanOptionItem} OptionItem
+ *
+ * @typedef StringOptionItem
+ * @property {string} title
+ * @property {string} [desc]
+ * @property {"string"} type
+ * @property {string} [value]
+ * @property {string} [default='']
+ * @property {Validator<string>} [validate]
+ *
+ * @typedef NumberOptionItem
+ * @property {string} title
+ * @property {string} [desc]
+ * @property {"number"} type
+ * @property {number} [value]
+ * @property {number} [default=0]
+ * @property {Validator<number>} [validate]
+ *
+ * @typedef BooleanOptionItem
+ * @property {string} title
+ * @property {string} [desc]
+ * @property {"boolean"} type
+ * @property {boolean} [value]
+ * @property {boolean} [default=false]
+ * @property {Validator<boolean>} [validate]
+ *
+ * @typedef Code
+ * @property {string} js The current JavaScript code of the build.
+ * @property {string} css The current CSS code of the build.
+ */
+/**
+ * A function that validates the given value of the item it is the validator for.
+ *
+ * It returns `undefined` if the given value is valid, or a non-empty error message (HTML code) that will be displayed
+ * to the user.
+ *
+ * @typedef {(value: T, option: DownloadOption) => string | undefined} Validator
+ * @template T
+ */
+
+/** @type {DownloadOption[]} */
+var downloadOptions = [];
+
+(function () {
+	/**
+	 * Note: The keys of items are used as their identifier and will be be used in the URL hash.
+	 *
+	 * CHANGING OPTION IDS OR ITEM NAMES WILL BREAKING OLD URLS!
+	 */
+
+	addOption({
+		id: 'options-general',
+		title: 'General',
+		items: {
+			manual: {
+				title: 'Manual highlighting',
+				desc: 'Manual highlighting means that Prism will not highlight all code snippets and code blocks automatically. To highlight elements, you have to explicitly call Prism\'s highlight functions.',
+				type: 'boolean'
+			}
+		},
+		apply: function (code) {
+			if (this.items.manual.value) {
+				appendJs(code, 'Prism.manual=true;');
+			}
+		}
+	});
+
+	addOption({
+		id: 'options-custom-class',
+		title: 'Custom Class',
+		require: 'custom-class',
+		items: {
+			prefix: {
+				title: 'Class prefix',
+				desc: 'The classes of all tokens produced by Prism will have the given prefix.',
+				type: 'string',
+				validate: matchRegExp(/^(?:[a-z][\w-]*)?$/)
+			}
+		},
+		apply: function (code) {
+			var prefix = this.items.prefix.value;
+			if (!prefix) {
+				return;
+			}
+
+			// JS
+			appendJs(code, 'Prism.plugins.customClass.prefix(' + JSON.stringify(prefix) + ');');
+
+			// CSS
+			var tokens = Prism.tokenize(code.css, Prism.languages.css);
+
+			tokens.forEach(function (t) {
+				if (t.type === 'selector') {
+					var selector = stringify(t.content);
+
+					// The idea behind this regex is as follows:
+					// We have to detect all elements that have a `.token` class and change all classes of any such
+					// element. To do this, we search for all `.token` classes and include all surrounding component
+					// selectors as well. I.e. For the selector `code.style #id.token.foo:not(.bar)`, the text
+					// `#id.token.foo:not(.bar)` will be matched. We can then trivially detect all classes by the `.`
+					// prefix.
+					selector = selector.replace(/[-\w.#:()]*\.token(?![-\w])[-\w.#:()]*/g, function (m) {
+						return m.replace(/\.([\w-]+)/g, function (m, g1) {
+							return '.' + prefix + g1;
+						});
+					});
+
+					t.content = selector;
+				}
+			});
+
+			/**
+			 * @param {string | Token | Token[]} t
+			 * @returns {string}
+			 */
+			function stringify(t) {
+				if (typeof t === 'string') {
+					return t;
+				}
+				if (Array.isArray(t)) {
+					return t.map(stringify).join('');
+				}
+				return stringify(t.content);
+			}
+
+			code.css = stringify(tokens);
+		}
+	});
+
+	addOption({
+		id: 'options-filter-highlight-all',
+		title: 'Filter highlightAll',
+		require: 'filter-highlight-all',
+		items: {
+			filterKnown: {
+				title: 'Filter known',
+				type: 'boolean'
+			},
+			filterSelector: {
+				title: 'Filter CSS selector',
+				type: 'string'
+			},
+			rejectSelector: {
+				title: 'Reject CSS selector',
+				type: 'string'
+			}
+		},
+		apply: function (code) {
+			if (this.items.filterKnown.value) {
+				appendJs(code, 'Prism.plugins.filterHighlightAll.filterKnown=true;');
+			}
+			var filterSelector = this.items.filterSelector.value;
+			if (filterSelector) {
+				appendJs(code, 'Prism.plugins.filterHighlightAll.addSelector(' + JSON.stringify(filterSelector) + ');');
+			}
+			var rejectSelector = this.items.rejectSelector.value;
+			if (rejectSelector) {
+				appendJs(code, 'Prism.plugins.filterHighlightAll.reject.addSelector(' + JSON.stringify(rejectSelector) + ');');
+			}
+		}
+	});
+
+
+	// --- HELPER FUNCTIONS ---
+
+
+	/**
+	 * This add the given option to the list of download option.
+	 *
+	 * @param {DownloadOption} option
+	 */
+	function addOption(option) {
+		if (!/^options-/.test(option.id)) {
+			throw new Error('Invalid id ' + option.id);
+		}
+		for (var name in option.items) {
+			if (option.items.hasOwnProperty(name)) {
+				if (!/^[\w-]+$/.test(name)) {
+					throw new Error("Invalid name: " + name);
+				}
+				var element = option.items[name];
+				element.validate = element.validate || voidFn;
+
+				if (element.default == undefined) {
+					if (element.type === 'boolean') {
+						element.default = false;
+					} else if (element.type === 'number') {
+						element.default = 0;
+					} else if (element.type === 'string') {
+						element.default = '';
+					}
+				}
+
+				if ('value' in element) {
+					throw new Error('The "value" property cannot be defined here. Use "default" instead.');
+				}
+				element.value = element.default;
+
+				// @ts-ignore
+				if (element.validate(element.value, option)) {
+					throw new Error('The default value of "' + name + '" has to be valid.');
+				}
+			}
+		}
+		downloadOptions.push(option);
+	}
+
+	function voidFn() { return undefined; }
+	/**
+	 * @param {RegExp} re
+	 * @returns {Validator<string>}
+	 */
+	function matchRegExp(re) {
+		return function (value) {
+			if (!re.test(value)) {
+				return 'The value must match the regular expression <code>' + text(re) + '</code>';
+			}
+		};
+	}
+
+	function text(str) {
+		return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;');
+	}
+
+	/**
+	 * Appends the given JavaScript statement to the given code.
+	 *
+	 * @param {Code} code
+	 * @param {string} statement
+	 */
+	function appendJs(code, statement) {
+		code.js = code.js + statement.replace(/;?\s*$/, ';\n');
+	}
+}());
diff --git a/scripts/download.js b/scripts/download.js
index cfd1d16a05..88e1e11a66 100644
--- a/scripts/download.js
+++ b/scripts/download.js
@@ -2,6 +2,15 @@
  * Manage downloads
  */
 
+/// <reference path="./utopia.js" />
+/// <reference path="./code.js" />
+/// <reference path="../components.js" />
+/// <reference path="../dependencies.js" />
+/// <reference path="../prism.js" />
+/// <reference path="./vendor/FileSaver.min.js" />
+/// <reference path="./vendor/promise.js" />
+/// <reference path="./download-options.js" />
+
 (function() {
 
 var cache = {};
@@ -74,6 +83,49 @@ if (hstr) {
 		}
 	});
 }
+// options
+var optHStr = window.location.hash.match(/(options-[\w-]+)\.([\w-]+)=([^?&]*)/g);
+if (optHStr) {
+	optHStr.forEach(function (m) {
+		var match = /(options-[\w-]+)\.([\w-]+)=([^?&]*)/.exec(m);
+		if (match) {
+			var optionId = match[1];
+			var itemName = match[2];
+			var value = decodeURIComponent(match[3]);
+
+			var set = false;
+			downloadOptions.forEach(function (o) {
+				if (!set && o.id === optionId) {
+					for (var name in o.items) {
+						if (name === itemName && o.items.hasOwnProperty(name)) {
+							var item = o.items[name];
+							if (item.type === 'boolean') {
+								value = value === 'true';
+							} else if (item.type === 'number') {
+								value = Number(value);
+							}
+
+							if (item.validate(value, o)) {
+								// invalid ignore
+								console.warn('Invalid value: ' + m);
+							} else {
+								item.value = value;
+							}
+							set = true;
+						}
+					}
+				}
+			});
+
+			if (!set) {
+				console.warn('Unknown option: ' + m);
+			}
+		}
+	});
+}
+
+// add options to the DOM
+var updateOptions = addDownloadOptionsToDOM();
 
 // Stay compatible with old querystring feature
 var qstr = window.location.search.match(/(?:languages|plugins)=[-+\w]+|themes=[-\w]+/g);
@@ -442,6 +494,7 @@ function update(updatedCategory, updatedId){
 		title: prettySize(total.css)
 	});
 
+	updateOptions();
 	delayedGenerateCode();
 }
 
@@ -457,7 +510,6 @@ function delayedGenerateCode(){
 function generateCode(){
 	/** @type {CodePromiseInfo[]} */
 	var promises = [];
-	var redownload = {};
 
 	for (var category in components) {
 		for (var id in components[category]) {
@@ -467,10 +519,6 @@ function generateCode(){
 
 			var info = components[category][id];
 			if (info.enabled) {
-				if (category !== 'core') {
-					redownload[category] = redownload[category] || [];
-					redownload[category].push(id);
-				}
 				info.files[minified ? 'minified' : 'dev'].paths.forEach(function (path) {
 					if (cache[path]) {
 						var type = path.match(/\.(\w+)$/)[1];
@@ -504,15 +552,15 @@ function generateCode(){
 			$u.element.contents(error, errors);
 		}
 
-		var redownloadUrl = window.location.href.split("#")[0] + "#";
-		for (var category in redownload) {
-			redownloadUrl += category + "=" + redownload[category].join('+') + "&";
-		}
-		redownloadUrl = redownloadUrl.replace(/&$/,"");
+		var redownloadUrl = buildUrl();
 		window.location.replace(redownloadUrl);
 
 		var versionComment = "/* PrismJS " + version + "\n" + redownloadUrl + " */";
 
+		downloadOptions.filter(function (o) { return o.enabled; }).forEach(function (o) {
+			o.apply(code);
+		});
+
 		for (var type in code) {
 			(function (type) {
 				var text = versionComment + "\n" + code[type];
@@ -538,6 +586,42 @@ function generateCode(){
 	});
 }
 
+function buildUrl() {
+	var redownloadUrl = window.location.href.split("#")[0] + "#";
+
+	var redownload = {};
+
+	for (var category in components) {
+		for (var id in components[category]) {
+			if (category !== 'core' && id !== 'meta' && components[category][id].enabled) {
+				redownload[category] = redownload[category] || [];
+				redownload[category].push(id);
+			}
+		}
+	}
+
+	for (var category in redownload) {
+		redownloadUrl += category + "=" + redownload[category].join('+') + "&";
+	}
+
+	downloadOptions.forEach(function (o) {
+		if (!o.enabled) {
+			return;
+		}
+
+		for (var name in o.items) {
+			if (o.items.hasOwnProperty(name)) {
+				var item = o.items[name];
+				if (item.value !== item.default) {
+					redownloadUrl += o.id + '.' + name + '=' + encodeURIComponent(String(item.value)) + '&';
+				}
+			}
+		}
+	});
+
+	return redownloadUrl.replace(/&$/, "");
+}
+
 /**
  * Returns a promise of the code of the Prism bundle.
  *
@@ -621,4 +705,136 @@ function getVersion() {
 	});
 }
 
+
+/**
+ * Adds the given options to the DOM.
+ *
+ * Returns a function that will enable/disable options depending on whether the requirements of that option are met.
+ *
+ * @returns {() => void}
+ */
+function addDownloadOptionsToDOM() {
+	var container = $('#option-container');
+
+	/** @type {{ option: DownloadOption, element: HTMLElement }[]} */
+	var optionElementPairs = [];
+
+	downloadOptions.forEach(function (o) {
+		var element = $u.element.create('div', {
+			contents: [
+				{
+					tag: 'h3',
+					contents: o.title
+				},
+				{
+					tag: 'div',
+					properties: {
+						className: 'option-items'
+					},
+					contents: Object.keys(o.items).map(function (name) {
+						var item = o.items[name];
+						var errorId = o.id + '-' + name;
+
+						function validate(value) {
+							var message = item.validate(value, o);
+							var errorElement = $('#' + errorId);
+							if (message) {
+								errorElement.innerHTML = message;
+								errorElement.style.display = 'block';
+							} else {
+								item.value = value;
+								errorElement.textContent = '';
+								errorElement.style.display = 'none';
+								delayedGenerateCode();
+							}
+						}
+
+						var contents = [];
+						if (item.type === 'boolean') {
+							contents.push({
+								tag: 'label',
+								contents: [
+									{
+										tag: 'span',
+										attributes: {
+											'title': item.desc || ''
+										},
+										contents: item.title
+									},
+									{
+										tag: 'input',
+										properties: {
+											type: 'checkbox',
+											checked: item.value,
+											onclick: function () { validate(this.checked); }
+										}
+									}
+								]
+							});
+						} else {
+							contents.push(
+								{
+									tag: 'span',
+									attributes: {
+										'title': item.desc || ''
+									},
+									contents: item.title
+								},
+								{
+									tag: 'input',
+									properties: {
+										type: item.type === 'number' ? 'number' : 'text',
+										value: item.value,
+										oninput: function () { validate(this.value); }
+									}
+								}
+							);
+						}
+
+						contents.push({
+							tag: 'div',
+							properties: {
+								className: 'option-item-error',
+								id: errorId
+							}
+						});
+						return {
+							tag: 'div',
+							properties: {
+								className: 'option-item'
+							},
+							contents: contents
+						};
+					})
+				}
+			],
+			inside: container
+		});
+
+		optionElementPairs.push({
+			option: o,
+			element: element
+		});
+	});
+
+	function updateOptions() {
+		// check where the requirements of a option is met and therefore whether the option is active
+		optionElementPairs.forEach(function (pair) {
+			var option = pair.option;
+			var element = pair.element;
+
+			var enabled = toArray(option.require).every(function (id) {
+				var comp = components.languages[id] || components.plugins[id];
+				return comp && comp.enabled;
+			});
+			option.enabled = enabled;
+
+			element.style.display = enabled ? 'block' : 'none';
+		});
+	}
+	updateOptions();
+	return updateOptions;
+}
+
+
 })();