Создайте код подсветки синтаксиса с помощью JavaScript.

Чтобы создать код подсветки синтаксиса с помощью JavaScript, используйте библиотеку
prettify.

Добавьте следующее в свой код, чтобы добавить библиотеку для подсветки синтаксиса:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

Чтобы использовать его, оберните свой код в записи:

<pre class="prettyprint">
 Здесь код
</pre>

Источник: смотреть

В моей теме оформления этот код растянул шаблон в разные стороны.
Так как мой шаблон адаптивный и сделан с помощью сетки «Grid».
Я исправил этот момент, добавлением стиля .CSS

/* ------- Это от себя, можно править под свой шаблон, тему оформления ----------- */
pre.prettyprint {
	margin: 5px;
  	padding: 5px;
  	border-left: 3px solid steelblue;
	border-bottom: 3px solid steelblue;
	border-top: 3px solid black;
	border-right: 3px solid black;
	overflow: auto;
	border-radius: 5px;
	max-height: 250px;
	word-break: break-word;
	white-space: pre-wrap;
}

Можно использовать и другой вариант подсветки синтаксиса:

highlight.js

Вот ссылка сайта для скачивания: https://highlightjs.org/download/

Воспользуйтесь в браузере Яндекс переводчиком, чтобы разобраться как добавить пакет и подключить.
Я пока не стал его использовать.

P.S
Сделал новую тему оформления, решил убрать подсветку.
Выделил код двумя цветами под тему, фон серый, а цвет белый.
Вот код CSS

pre {
	
    padding: 2% 4%;
  	border: 1px solid black;
	background: lightslategray;
	overflow: auto;
	border-radius: 5px;
	max-height: 250px;
	min-height: 200px;
	word-break: break-word;
	white-space: pre-wrap;
	color: white;
}

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.