Как сделать компилятор других языков на сайте?
Арендуете виртуальный сервер, потому что на обычном хостинге установить компилятор у вас не выйдет.
Ставите на нем консольный компилятор.
Изучаете как пишется бэкенд на любом удобном языке, а именно - как дать возможность пользователю аплоадить файл, как этот файл передать в компилятор, как вернуть пользователю готовый результат.
profit.

Если вы хотели чтобы ответ был подробнее и понятнее, и при этом кратко и просто, то не выйдет.
То, что вы хотите - довольно сложный функционал, если нужно сделать красиво и удобно.
Используй вот этот код: <code lang="any-language">Any data</ code> только без пробела. А для ввода можно так:
<input type="text" id="coding" value="Type here..."/>
<code id="text"></ code>
<script type="text/javascript">
function a(){
var code=document.getElementById("coding").value;
document.getElementById("text").innerHTML = code;
setTimeout(a, 1000);
}
a();
</script>
Только перед code убери пробелы, просто хабр их удаляет думая, что это тег.
А, ну или вставь фрейм с, например, codepen.io, или откуда там, у них же свои API.