Make list of available languages sorted for better UX

Author: Axinet

src/codeflask.js

@@ -189,20 +189,23 @@
 
     let languagesSelect = document.createElement("select");
     languagesSelect.classList.add("small");
-    // languagesSelect.id = "mySelect";
 
-    //Create and append the options
-    for (var i = 0; i < Object.keys(Prism.languages).length; i++) {
+    //sort available languages alphabetically (ignore case)
+    let languages = Object.keys(Prism.languages).sort(function (a, b) {
+        return a.toLowerCase().localeCompare(b.toLowerCase());
+    });
 
+    //Create and append the options
+    for (var i = 0; i < languages.length; i++) {
         // Weirdly PrismJS doesnt expose a list of installed languages, or rather it does, but it is mixed with helper functions, which i have to clear here.
-        if (Object.keys(Prism.languages)[i] == "extend" || Object.keys(Prism.languages)[i] == "insertBefore" || Object.keys(Prism.languages)[i] == "DFS") {
+        if (languages[i] == "extend" || languages[i] == "insertBefore" || languages[i] == "DFS") {
           continue;
         }
 
         var option = document.createElement("option");
-        option.value = Object.keys(Prism.languages)[i];
-        option.text = Object.keys(Prism.languages)[i];
-        if(Object.keys(Prism.languages)[i] == this.data.language){
+        option.value = languages[i];
+        option.text = languages[i];
+        if(languages[i] == this.data.language){
           option.selected="selected"
         }
         languagesSelect.appendChild(option);