(enh) Auto-update the highlighted output when the language dropdown c…

…hanges.

CHANGES.md

@@ -1,10 +1,16 @@
-## Version 11.9.0
+## Version 11.9.0 (next release)
 
 Parser:
 
 - (enh) prevent rehighlighting of an element [joshgoebel][]
 - added 3rd party Iptables grammar to SUPPORTED_LANGUAGES [Checconio][]
 
+Dev tool: 
+
+- (chore) Update dev tool to use the new `highlight` API. [Shah Shabbir Ahmmed][]
+- (enh) Auto-update the highlighted output when the language dropdown changes. [Shah Shabbir Ahmmed][]
+
+[Shah Shabbir Ahmmed]: https://github.com/shabbir23ah
 [Josh Goebel]: https://github.com/joshgoebel
 [Checconio]: https://github.com/Checconio
 

tools/developer.html

@@ -364,12 +364,12 @@ <h3>Markup</h3>
         localStorage.setItem(key_THEME, css);
       })
 
-      $('.editor button#update-highlighting').click(function(e) {
+      function update() {
         var editor = $(this).parents('.editor');
         var language = editor.find('.languages').val();
         var source = editor.find('textarea').val();
         var start_time = +new Date();
-        var result = hljs.getLanguage(language) ? hljs.highlight(language, source, true) : hljs.highlightAuto(source);
+        var result = hljs.getLanguage(language) ? hljs.highlight(source, { language, ignoreIllegals: true}) : hljs.highlightAuto(source);
         var rendering_time = +new Date() - start_time;
         editor.find('.hljs').html(result.value);
         $(".hljs span").each((_,el) => {
@@ -383,7 +383,11 @@ <h3>Markup</h3>
         editor.find('.rendering_time').text(rendering_time);
         editor.find('output').text(result.value);
         saveSettings();
-      });
+
+      };
+
+      $('.editor button#update-highlighting').click(update);
+      $(".languages").change(update);
 
       $('.editor button#show-structure').click(function(e) {
         var editor = $(this).parents('.editor');