Allow changing the language from the auto-detected one

languages.js

@@ -399,7 +399,7 @@ let languages = {
 		mime: "text/x-yaml",
 		extensions: ["yml", "yaml"]
 	},
-	"Jekyll (YAML front matter + GitHub flavored Markdown)": {
+	"Jekyll (YAML front matter + GFM)": {
 		file: "yaml-frontmatter",
 		mime: "yaml-frontmatter"
 	}

main.js

@@ -12,9 +12,7 @@ let filePath = hashBits.slice(3, hashBits.length).join("/");
 $.get({
 	url: `https://raw.githubusercontent.com/${repo}/${filePath}`,
 	success: (code) => {
-		let parts = filePath.split(".");
-		let fileExtension = parts[parts.length - 1];
-		let lang = getLanguageByExtension(fileExtension);
+		let lang = getLanguageByExtension(getFileExtension());
 		$.get({
 			url: `https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/mode/${lang.file}/${lang.file}.min.js`,
 			success: (data) => {
@@ -25,6 +23,21 @@ $.get({
 	}
 });
 
+let langaugeSelector = $("#language");
+langaugeSelector.change(() => {
+	let selected = langaugeSelector.val();
+	var langauge;
+	if (selected == "auto-detect") {
+		language = getLanguageByExtension(getFileExtension());
+	} else {
+		language = languages[selected];
+	}
+	setLanguage(language);
+});
+for (key in languages) {
+	langaugeSelector.append(`<option value="${key}">${key}</option>`);
+}
+
 // setup
 function setup(data, mime) {
 	let el = document.getElementById("editor");
@@ -225,6 +238,22 @@ function markInvalid(pos) {
 	invalids[pos.line][pos.ch] = mark;
 }
 
+function setLanguage(lang) {
+	$.get({
+		url: `https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.19.0/mode/${lang.file}/${lang.file}.min.js`,
+		success: (data) => {
+			eval(data);
+			editor.setOption("mode", lang.mime);
+			console.log(`Changed language to ${lang.mime}`);
+		}
+	});
+}
+
+function getFileExtension() {
+	let parts = filePath.split(".");
+	return parts[parts.length - 1];
+}
+
 function load() {
 	return localforage.getItem(repo)
 		.then((val) => {