Для отображения кода на веб-страницах с более читаемым и красивым оформлением можно использовать несколько JavaScript-библиотек и плагинов. Вот некоторые из самых популярных:
Prism.js
- Легкая и простая в использовании библиотека для подсветки синтаксиса.
- Поддерживает множество языков программирования.
- Легко настраивается и имеет возможность добавления различных тем оформления.
Документация
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.0/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.0/prism.min.js"></script>Highlight.js
- Очень популярная библиотека для подсветки синтаксиса с поддержкой множества языков.
- Автоматически определяет язык программирования.
- Легко настраивается с помощью тем оформления.
Документация
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>CodeMirror
- Редактор кода, который можно встроить в вашу веб-страницу.
- Поддерживает множество языков и тем.
- Позволяет пользователям редактировать код прямо на странице.
Документация
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>Ace Editor
- Очень мощный редактор кода, который можно интегрировать в ваши приложения.
- Поддерживает множество языков и обладает высокой производительностью.
Документация
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>PrettyPrint (Google Code Prettify)
- Библиотека для подсветки синтаксиса, которая может быть использована для форматирования HTML-кода и других языков.
- Поддерживает множество языков и прост в использовании.
Документация
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/loader/run_prettify.js"></script>Выбор библиотеки
Если вам нужно простое решение для подсветки синтаксиса, Prism.js или Highlight.js будут отличными выборами. Если вам нужен редактор с возможностью редактирования, рассмотрите CodeMirror или Ace Editor. Если вы хотите просто оформить и улучшить читаемость вашего кода, PrettyPrint может быть хорошим вариантом.
Чтобы подключить выбранную библиотеку, просто добавьте соответствующие ссылки на CSS и JS в ваш HTML-код. После этого вы можете использовать предоставляемые классами и тегами для форматирования и подсветки вашего кода.
