© EVILEG 2015-2018
Рекомендует хостинг
TIMEWEB

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

PrettyPrint, SyntaxHighlighting

Самым большим головняком при начале написания сайта с нуля на 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 .

Комментарии

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
21 сентября 2018 г. 15:37
irishaa

C++ - Тест 005. Структуры и Классы

  • Результат 41баллов,
  • Очки рейтинга-8
20 сентября 2018 г. 20:16
ZaRYa

C++ - Тест 001. Первая программа и типы данных

  • Результат 46баллов,
  • Очки рейтинга-6
17 сентября 2018 г. 20:45
Иван Поп

C++ - Тест 001. Первая программа и типы данных

  • Результат 93баллов,
  • Очки рейтинга8
Последние комментарии
21 сентября 2018 г. 9:24
Евгений Легоцкой

Qt Linux - Урок 001. Автозапуск Qt приложения под Linux

Если я вас правильно понял, то авторестарт сюда дописывается  QString autorunContent. Не могли бы вы не выделять пока слова жирным текстом, в комментариях сломан парсинг тегов, завтра буд...
21 сентября 2018 г. 9:08
avovana

Qt Linux - Урок 001. Автозапуск Qt приложения под Linux

Спасибо за статью! Пример рабочий! Со своим проектом тоже получилось! Наткнулся на эту статью когда решал задачу запуска Qt app с помощью . Когда пробовал с помощью...
20 сентября 2018 г. 13:27
Евгений Легоцкой

Привет Qt для Python

Может быть, я не все новости отслеживаю по Qt. По возможности слежу, но не всегда удаётся.
20 сентября 2018 г. 13:17
OBEH

Привет Qt для Python

По моему. в последней версии Qt анонсировали поддержку Python. Я где-то видел видео. К сожалению. не помню ссылку. Там что-то. типа. проекта "Qt forPython". Все аналогично тому. как для ...
20 сентября 2018 г. 9:58
Евгений Легоцкой

Привет Qt для Python

Qt Creator и Qt Designer по сути не имеют поддержки Python, чтобы код автоматически генерировался и т.д. Нужно устанавливаться дополнительные инструменты. Например сам Python, рекмоендую...
Сейчас обсуждают на форуме
22 сентября 2018 г. 16:21
Евгений Сальников

Проблемы при создании приложения под андроид

Добрый день!Хочу написать приложения для себя на телефон. Но запнулся на этапе создания проекта. в профилях Qt для Qt 5.11.2 for Android ARMv7 и Qt 5.11.2 for Android x86 пишет что: компилятор не...
21 сентября 2018 г. 8:25
Евгений Легоцкой

Прокси-модель, содержащая на 1 столбец больше, чем модель-источник.

Попробуйте ещё PySide 2 - это официально поддерживаемый пакет привязок Python к Qt, возможно, что там не будет таких проблем.
20 сентября 2018 г. 20:06
Евгений Легоцкой

Qt Installer Framework

Добрый день. Зачем собирать Qt Installer Framework-то из исходников? Я ещё понимаю Qt собирают из исходников статически (хотя тоже считаю по большей части бесполезной тратой времени),...
19 сентября 2018 г. 10:19
Евгений Легоцкой

Как в listview подставить модель?

Добрый день. А нельзя ли использовать какой-нибудь глобальный map контейнер, который бы мапил названия моделей на указатели этих моделей?
17 сентября 2018 г. 11:08
Евгений Легоцкой

Проблемы с статической компиляцией Qt с MySQL

Ну если, то да. Тогда просто буду давать ссылку на этот топик, если будут возникать подобные вопросы. Спасибо за ответ.
Присоединяйтесь к нам в социальных сетях