Как я могу визуально отобразить блок кода Python с использованием HTML / CSS и Javascript?
Я хотел бы отображать блоки кода, как это делает сайт вроде StackOverflow:
def func(A):
result = 0
n = len(A)
while n > 1:
n = n/2
result = result + min(A[1,...,n])
return result
Он правильно раскрашивает, форматирует и разделяет весь код после того, как он был обозначен как кодовый блок. Я бы хотел, чтобы это произошло и на моем сайте. Между прочим, все блоки кода будут на языке Python.
Шрифт, фон и интервал кажутся достаточно простыми для реализации (просто укажите класс, в котором фон серый, шрифт - это шрифт, а интервал - моноширинный).
Однако мне интересно, как правильно раскрасить текст? Я предполагаю, что мне нужно будет использовать JavaScript и перебрать все слова в блоке кода, проверяя, соответствуют ли они списку слов, которые я предварительно установил, чтобы стать определенными цветами.
Сообщите мне, если я где-то сделал неправильные предположения или что-то, что может усложнить мой подход.
Я предполагал, что кто-то уже создал что-то подобное, но что я могу найти в Google, чтобы найти эти библиотеки? Я продолжаю находить результаты, которых не ищу.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Обновление 2021-05-14:
- Обновлены фрагменты кода, чтобы их можно было запускать при использовании протокола
file://. - Изменены ссылки CodeMirror, чтобы указывать на правильный CDN.
Фрагменты по-прежнему требуют подключения к Интернету, чтобы иметь возможность загружать CodeMirror.
Обновление 2020-11-09:
Прошло довольно много времени, но если единственное, что вам нужно, это выделить код, есть более легкая альтернатива, чем реализация полноценного редактора кода только для чтения:
CodeMirror имеет надстройку, которая выполняет именно выделение без всех причудливых функций полного редактора, единственным недостатком является то, что у вас нет возможности отображать номера строк, но хорошо ...
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>CodeMirror RunMode Highlighting Example</title>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.min.css">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/addon/runmode/runmode-standalone.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/mode/python/python.min.js"></script>
</head>
<body>
<pre><code id = "python_code">def func(A):
result = 0
n = len(A)
while n > 1:
n = n/2
result = result + min(A[1,...,n])
return result</code></pre>
<script type = "text/javascript">
window.onload = function(){
var codeElement = document.getElementById('python_code');
// Add code mirror class for coloring (default is the theme)
codeElement.classList.add( 'cm-s-default' );
var code = codeElement.innerText;
codeElement.innerHTML = "";
CodeMirror.runMode(
code,
'python',
codeElement
);
};
</script>
</body>
</html>Источник: https://codemirror.net/demo/runmode.html
P.S. Также есть надстройка «colorizer», которая автоматически раскрашивает элементы pre, посмотрите, как это реализовать, в руководстве по CodeMirror.
Оригинальный ответ
Вы можете использовать режим CodeMirror только для чтения в элементе code. В самом Code Mirror есть несколько языков на выбор, в этом примере я использую режим python, чтобы раскрасить код как python. В основном то, что я делаю в этом примере, - это загрузка библиотеки, загрузка языкового режима для раскраски, и всякий раз, когда страница загружается, мы получаем элемент с идентификатором, получаем код, затем удаляем содержимое этого элемента и генерируем цветную версию кода, вы можете настроить lineNumbers, если хотите. Надеюсь, что это работает для вас :)
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>CodeMirror Read-only Highlighting Example</title>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.min.css">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/mode/python/python.min.js"></script>
</head>
<body>
<pre><code id = "python_code">def func(A):
result = 0
n = len(A)
while n > 1:
n = n/2
result = result + min(A[1,...,n])
return result</code></pre>
<script type = "text/javascript">
window.onload = function(){
var codeElement = document.getElementById('python_code');
var code = codeElement.innerText;
codeElement.innerHTML = "";
var codeMirror = CodeMirror(
codeElement,
{
value: code,
mode: "python",
theme: "default",
lineNumbers: false,
readOnly: true
}
);
};
</script>
</body>
</html>Обновленный ответ по какой-то причине у меня не сработал. Все, что я сделал, это скопировал и вставил блок кода в html-файл, а затем открыл этот файл в chrome. У меня пустая веб-страница. Не уверен, что делаю не так. Когда я нажимаю здесь при переполнении стека «Выполнить фрагмент кода», я получаю цветной код.
@MinaMichael, я только что обновил ответ, предполагалось, что вы будете использовать http-сервер для загрузки файлов, и, открывая их только из своей файловой системы, вы использовали протокол file://, который имеет некоторые ограничения, помимо того факта, что ссылки "без протокола", что означало, что протокольная часть ссылок из зеркала кода заполнялась file: вместо http: или https:, как это было изначально задумано в коде.
множество библиотек, которые это делают ....