|
Сообщение от TheSanches
|
|
Возник вопрос, выводимый код получается в одну строку, то-есть плохо читаем, как можно сделать переносы строк в нужных местах?, к примеру что бы код выводился точно так же как построен в файле js?
|
Для этого есть CSS-свойство white-space со значением pre.
|
Сообщение от TheSanches
|
|
И еще вопрос, есть ли возможность раскрасить разные участки выводимого кода, по аналогии как это делают, к примеру текстовые редакторы?
|
Вам нужна библиотека, предлагающая подсветку синтаксиса, например,
prism.js
Код без элемента <code> семантически недопустим. Согласно
спецификации HTML5, рекомендуемый способ определения языка кода является класс language-xxxx.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism-tomorrow.css">
<style>
:not(pre) > code[class*="language-"] {
display: block;
padding: 1em;
white-space: pre;
}
</style>
</head>
<body>
<code class="language-javascript">
function calc() {
let sum = 20 + 15 * 2 / 2;
return sum;
}
calc();
</code>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.js"></script>
<script>
for(const code of document.querySelectorAll("code[class*='language-javascript']")) {
const p = document.createElement("p");
code.after(p);
p.textContent = eval(code.textContent);
}
</script>
</body>
</html>
Хотя весь код можно выполнить в песочнице <iframe sandbox>
|
Сообщение от ksa
|
|
Если сможешь повторить алгоритмы анализа текста, как это делают те редакторы - получишь такую возможность.
|
Отвержение опыта? Есть масса готовых решении!