Популярные варианты для подсветки кода на веб-странице

1. Highlight.js

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>   

HTML-код:

<pre><code class="html"> // Пример HTML-кода 
<div>Hello, World!</div> </code></pre>   

2. Google Code Prettify

Google Code Prettify — легковесный инструмент для подсветки кода.

Пример подключения:

<link href="https://cdn.jsdelivr.net/gh/google/code-prettify@master/styles/prettify.css" rel="stylesheet"> 
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>   

HTML-код:

<pre class="prettyprint"> 
function hello() {  alert("Hello, world!"); } 
</pre>   

3. Rainbow

Rainbow — библиотека для подсветки синтаксиса с поддержкой множества языков.

Пример подключения:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/themes/github.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/rainbow.min.js"></script>   

HTML-код:

<pre>
<code data-language="javascript"> // Пример JavaScript-кода 
console.log('Hello, World!'); 
</code>
</pre>   

4. CodeMirror

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>   

HTML-код:

 <textarea id="editor">// Пример JavaScript-кода</textarea> 
<script>  
    var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {    lineNumbers: true,    mode: "javascript"  }); 
</script>   

5. Ace Editor

Ace — мощный редактор с поддержкой подсветки синтаксиса.

Пример подключения:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.js"></script>   

HTML-код:

<div id="editor" style="height: 200px; width: 500px;"></div> 
<script>    
        var editor = ace.edit("editor");    
        editor.setTheme("ace/theme/monokai");    
        editor.session.setMode("ace/mode/javascript"); 
</script>   

Итог:

• Prism.js и Highlight.js — просты в настройке.
• Google Code Prettify — легковесен и поддерживает множество языков.
• Rainbow — удобен для быстрой интеграции.
• CodeMirror и Ace Editor — полноценные редакторы с расширенными возможностями.