Для добавления функции песочницы на веб-сайт можно использовать библиотеки, такие как CodeMirror, Ace Editor или Monaco Editor. Эти библиотеки позволяют отображать и редактировать код в браузере, а также предоставляют возможность выполнения кода на стороне клиента.
Для красивого форматирования исходного кода можно использовать библиотеки, такие как Prism.js, Highlight.js или Prettify. Они предоставляют возможность подсветки синтаксиса, автоматического форматирования и красивого вывода исходного кода на веб-странице.
Примеры использования таких библиотек:
1. CodeMirror:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="codemirror.css">
</head>
<body>
<textarea id="editor"></textarea>
<script src="codemirror.js"></script>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
lineNumbers: true
});
</script>
</body>
</html>
```
2. Prism.js:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="prism.css">
</head>
<body>
<pre><code class="language-javascript">console.log("Hello, world!");</code></pre>
<script src="prism.js"></script>
</body>
</html>
```
Эти библиотеки позволяют легко интегрировать функциональность песочницы и красивое форматирование кода на веб-сайт.