fix(tooling) developer.html does not render highlighted language properly (highlightjs#2672)

egor-rogov · joshgoebel · web-flow · commit f3f29acffc4a · 2020-09-05T19:03:31.000-04:00
* Fix inconsistency in developer.html

Co-authored-by: Josh Goebel &lt;me@joshgoebel.com&gt;
diff --git a/tools/developer.html b/tools/developer.html
@@ -70,7 +70,7 @@ <h3>Code</h3>
     </div>
     <div>
       <h3>Rendered in <span class="rendering_time">...</span> ms [<span class="rendering_stats">...</span>]</h3>
-      <highlightjs auto :code="code" />
+      <highlightjs :language="language" :code="code" />
     </div>
     <div>
       <h3>Markup</h3>
@@ -99,6 +99,7 @@ <h3>Markup</h3>
         var result = hljs.getLanguage(language) ? hljs.highlight(language, source, true) : hljs.highlightAuto(source);
         var rendering_time = +new Date() - start_time;
         vue.code = source;
+        vue.language = hljs.getLanguage(language) ? language : '';
 
         var rendering_stats = result.language + ': relevance ' + (result.relevance );
         if (result.second_best) {
@@ -144,15 +145,25 @@ <h3>Markup</h3>
     Vue.use(hljs.vuePlugin);
     let vue = new Vue({
       el: '#app',
-      data: { code: "" },
-      watch: { code: function(){
-        // update data-klass post-render for cool class previews
-        this.$nextTick(() => {
-          $(".hljs span").each((_,el) => {
-            $(el).attr("data-klass", el.className.replace("hljs-",""))
+      data: { code: "", language: "" },
+      methods: {
+        refreshKlass: function() {
+          // update data-klass post-render for cool class previews
+          this.$nextTick(() => {
+            $(".hljs span").each((_,el) => {
+              $(el).attr("data-klass", el.className.replace("hljs-",""))
+            })
           })
-        })
-      }}
+        }
+      },
+      watch: {
+        code: function(){
+          this.refreshKlass();
+        },
+        language: function(){
+          this.refreshKlass();
+        }
+      }
     })
   </script>
 </body>
