Быстрый совет: как добавить выделение синтаксиса в любой проект

23 января 2018

В этом уроке мы будем использовать ярлык синтаксиса на основе JavaScript, чтобы быстро добавить функциональность подсветки синтаксиса в любой веб-проект - даже на простой HTML-странице!


Шаг 1 - Загрузите исходный код

Здесь вы можете загрузить исходные файлы синтаксиса.


Шаг 2 - Перетащите каталог src в свой проект

Я обычно переименовываю эту папку в ярлык. Ничего не удаляйте здесь, если вы не ожидаете использовать некоторые из JavaScript-файлов, специфичных для языка.


Шаг 3 - Импорт необходимых файлов

В вашем HTML-файле (или на какой странице отвечает за отображение вашего представления) импортируйте файлы prettify.css и prettify.js.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf&mdash;8">
   <title>untitled</title>
   <link rel="stylesheet" href="highlighter/prettify.css" />
</head>
<body>
<script src="highlighter/prettify.js"></script>
</body>
</html>

Обратите внимание, как мы разместили наш скрипт в нижней части страницы, перед закрывающим тегом body. Это всегда умный ход, поскольку он повышает производительность.

Далее нам нужно что-то работать! Синтаксический маркер будет искать либо элемент pre, либо код, который имеет класс prettyprint. Давайте добавим это сейчас.

<pre class="prettyprint">
(function() {
   var jsSyntaxHighlighting = 'rocks';
})();
</pre>

Шаг 4 - Вызов функции prettyPrint ()

Последним шагом является выполнение функции prettyPrint (). Мы также можем разместить этот бит кода в нижней части страницы.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>untitled</title>
   <link rel="stylesheet" href="highlighter/prettify.css" />
</head>
<body>
<pre class="prettyprint">
(function() {
   var jsSyntaxHighlighting = 'rocks';
})();
</pre>
<script src="highlighter/prettify.js"></script>
<script>prettyPrint();</script>
</body>
</html>

Если теперь просмотреть страницу в браузере...

Ну, это было легко! Но, как последний шаг бонуса, что делать, если мы хотим изменить тему ярлыка? В этом случае все сводится к редактированию таблицы стилей, как вы считаете нужным. Еще лучше, есть несколько таблиц стилей в галерее тем, которые вы можете использовать. Мне лично нравится тема пустыни. Чтобы применить его, скопируйте CSS из приведенной выше ссылки, создайте новую таблицу стилей в своем проекте и вставьте в нее CSS. Затем обновите таблицу стилей из раздела главы вашего документа.

<head>
   <meta charset="utf&mdash;8">
   <title>untitled</title>
   <link rel="stylesheet" href="highlighter/dessert.css" />
</head>

Серьезно - может ли это сделать проще?