Найти тему
Просто решаем всё

Как быстро и просто сделать красивую подсветку кода Python (и не только) на сайте?

Добрый день!

Если вы хотите поделиться кодом на страницах своего блога или сайта, неплохо бы отображать его как в редакторе - с подсветкой и форматированием (рабочий пример здесь):

Код с подсветкой для HTML-страницы
Код с подсветкой для HTML-страницы

Проще всего сделать это с помощью известной библиотеки highlight.js, для этого добавим в стили страницы следующий код:

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>

А сам код, который хотим разместить, поместим в тело страницы с помощью тегов <pre> и <code>, сохраняя все отступы и пустые строки:

<pre><code class="python"># Пузырьковая сортировка

from random import randint

def bubble(array):
for i in range(N-1):
for j in range(N-i-1):
if array[j] > array[j+1]:
buff = array[j]
array[j] = array[j+1]
array[j+1] = buff

N = 10
a = []
for i in range(N):
a.append(randint(1, 99))

print("Случайный массив:",a)
bubble(a)
print("Сортировка по возрастанию:",a)

# Результат

Случайный массив: [31, 70, 51, 62, 85, 74, 91, 5, 48, 79]
Сортировка по возрастанию: [5, 31, 48, 51, 62, 70, 74, 79, 85, 91]</code></pre>

Я использовал тему github-dark и код на Python (кстати, это пузырьковая сортировка, которая может вам пригодиться), но библиотека поддерживает множество других стилей и языков программирования. Хотите узнать как переключать стили и языки - жду в комментариях.

Удачи!

Наука
7 млн интересуются