JSFiddle - React, Tailwind, and code Playground

by deswolf

HTML

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>

<button id="get">What lang?</button>
<div>
<textarea id="input"></textarea>
</div>
<div id="language"></div>
<pre><code id="output"></code></pre>

CSS

textarea {
  width:100%;
  min-height:160px;
}

pre {
/*   background: lightyellow;
  padding: 4px; */
}

JavaScript

hljs.configure({useBR: true});

function what() {
	var data = $("#input").val();
  var result = self.hljs.highlightAuto(data);
  console.log(result);
  var languages = [];
  languages[0] = result.language;
  languages[1] = result.second_best ? result.second_best.language : "?";
  var text = "";
  if (result.r >= 35) {
  	text = languages[0];
  } else {
  	text = languages[0] + " OR " + languages[1];
  }
  $("#language").html(text);
  var outputEl = document.getElementById("output");
  $(outputEl).html(result.value);
  outputEl.className = "hljs " + languages[0];
}

document.getElementById("get").addEventListener("click", what);