Evgenii Legotckoi
Evgenii Legotckoi16 сентября 2016 г. 15:25

Django - Урок 002. Подсветка синтаксиса кода на сайте

Самым большим головняком при начале написания сайта с нуля на Django была подсветка синтаксиса кода. Ладно, на Wordpress был плагин, который справлялся со своей задачей, хоть и подгружал немного сайт, поскольку подсветка организовывалась на стороне сервера. Но в случае с новым сайтом пришлось уже задуматься на эту тему.


Сначала выбор стоял на тему того, где именно будет организовываться подсветка синтаксиса:

  • На стороне сервера
  • Или на стороне клиента

Поискав информацию, выяснил, что для организации синтаксиса на стороне сервера готовых решений не так уж и много, например Geshi , да и всё пожалуй, что работает на Python . Да и тот может нагружать сервер, если есть косяки в кешировании.

А вот с подсветкой синтаксиса на стороне клиента стало уже поинтереснее. Тут например и Hightlight.js и SyntaxHighlighter, и легковесный скрипт от корпорации добра Google, Javascript Code Prettifier, на него выбор и пал. Тем более, что он используется на таком известном ресурсе, как Stack Overflow.

Подключение

Пожалуй самое большое достоинство данного скрипта, так это его высокая скорость работы и простота подключения и настройки.

Подключить данный скрипт можно одной строкой, но подключать его необходимо в конце страницы, чтобы сработала подсветка синтаксиса кода.

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

Использование

Для использования функционала данного скрипта необходимо оборачивать подсвечиваемый код в тег, с указанием класса prettyprint

<pre class="prettyprint">...</pre>

или
<code class="prettyprint">...</code>

<pre class="prettyprint">
#include <iostream>

using namespace std;

int main(int argc, char *argv[])
{
    cout << "Hello World!" << endl;
    return 0;
}
</pre>

Поддержка языков

Скрипт поддерживает различные языки, которые указываются с помощью класса lang-* с соответствующим расширением для конкретного языка.

<pre class="prettyprint lang-html">
  The lang-* class specifies the language file extensions.
  File extensions supported by default include
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
    "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
    "xhtml", "xml", "xsl".
</pre>

Нумерация строк

Также скрипт поддерживает нумерацию строк. Для этого необходимо указать класс linenums . Если же необходимо уточнить, что код начинается с определённой строки, то через двоеточие необходимо указать номер этой строки, то есть linenums:18.

По умолчанию нумерация идёт каждые пять строк, то есть 5, 10, 15, 20 и т.д. Если хотите нумеровать каждую строке, то тогда необходимо добавить дополнительные стили для данного скрипта. Их можно добавить в файл стилей вашего сайта.

<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
</style>

Результат будет выглядеть следующим образом:

#include <iostream>

using namespace std;

int main(int argc, char *argv[])
{
    cout << "Hello World!" << endl;
    return 0;
}

Для Django рекомендую VDS-сервера хостера Timeweb .

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Вам это нравится? Поделитесь в социальных сетях!

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
m
  • molni99
  • 26 октября 2024 г. 11:37

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:80баллов,
  • Очки рейтинга4
m
  • molni99
  • 26 октября 2024 г. 11:29

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:20баллов,
  • Очки рейтинга-10

C++ - Тест 003. Условия и циклы

  • Результат:42баллов,
  • Очки рейтинга-8
Последние комментарии
i
innorwall9 ноября 2024 г. 6:03
Qt/C++ - Урок 009. QTimer или Как работать с таймером в Qt? She also saw an increase in her energy levels and improvement in her shortness of breath better business bureau online pharmacy priligy Transfection induced VEGFR2 promoter activity i…
i
innorwall9 ноября 2024 г. 5:36
Шаг 1: Настройка окружения для программирования на Python This fixed combination drug may be used as initial therapy or substituted for previously titrated doses of the individual components priligy side effects Expanded clinical phenotype o…
i
innorwall9 ноября 2024 г. 5:11
PyQt5 - Урок 003. QSystemTrayIcon - Как свернуть приложение в трей where can i buy priligy The medium was changed every three days
i
innorwall9 ноября 2024 г. 2:43
Релиз утилиты развертывания С++/Qt и QML приложений CQtDeployer v1.4.0 (Binary Box) can i buy priligy in usa Reprod Biomed Online 10 3 310 319
i
innorwall9 ноября 2024 г. 2:29
EVILEG - 4 Года онлайн buy priligy Pelleted food this way of administration is less stressful for the mice, and a few vendors offer a commercially available chow
Сейчас обсуждают на форуме
i
innorwall9 ноября 2024 г. 5:44
добавить qlineseries в функции We ve got the first batch ready for clinical trials, said Ovadje priligy usa LICENSED SHOP Nolvadex
9
9Anonim25 октября 2024 г. 19:10
Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…
ИМ
Игорь Максимов3 октября 2024 г. 14:05
Реализация навигации по разделам Спасибо Евгений!
F
Fynjy22 июля 2024 г. 14:15
при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …

Следите за нами в социальных сетях