© 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 .

Комментарии

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
15 июня 2018 г. 12:42
Nicky

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

  • Результат 100 баллов
  • Очки рейтинга 10
15 июня 2018 г. 12:36
Nicky

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

  • Результат 57 баллов
  • Очки рейтинга -2
15 июня 2018 г. 12:29
Nicky

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

  • Результат 46 баллов
  • Очки рейтинга -6
Последние комментарии
18 июня 2018 г. 7:12
EVILEG

PyQt5 - Урок 007. Работаем с QML QtQuick (Сигналы и слоты)

Я вот сейчас банальность скажу, но у меня всё работало. Так что даже и не знаю, надо на код смотреть, что ещё у вас добавлено или отсутствует из библиотек. P/S/ Извините, вы сейчас вс...
18 июня 2018 г. 7:10
EVILEG

Qt/C++ - Урок 042. PopUp уведомление в стиле Gnome с помощью Qt

Недоработки, вряд ли этот зверь вообще является официально поддерживаемым
18 июня 2018 г. 7:01
EVILEG

QML - Урок 016. База данных SQLite и работа с ней в QML Qt

что-то мне сдаётся, что здесь просто пересобрать проект нужно с удалением build каталога
18 июня 2018 г. 7:00
EVILEG

Qt - WinAPI. Как показать запущенное приложение поверх своего приложения

Если зарыться в API системы, то, думаю, что можно, тут тоже использовался WinAPI.
16 июня 2018 г. 15:19
pro100belik

Qt - WinAPI. Как показать запущенное приложение поверх своего приложения

А можно по ID процесса  выводить на передний план окно? myProcess->processId();
Сейчас обсуждают на форуме
19 июня 2018 г. 7:56
EVILEG

как редактировать порядок обхода этементов по нажатию TAB в Qt5 qml

Что-то наподобие такого TextField { Keys.onReturnPressed: nextItemInFocusChain().forceActiveFocus()}
19 июня 2018 г. 6:31
kabanov

Как сохранить фокус в TextField после перезагрузки модели

Rectangle { ListView { id: listView delegate: Item { id: cDelegate Item { Row { ComboBox { ...
18 июня 2018 г. 10:51
alex_lip

Qml and JavaScript

В том то и дело что просто в JS так нельзя Если использовать state - onReleased - не нужен вот так все работает Text { ...
18 июня 2018 г. 7:16
EVILEG

почему не выполняется код после вызова слота?

в рамках какого кода, из вашего вопроса не понятно, к чему вы задали этот вопрос и к чему это относится. Если мне ещё ясно, к какой статье этот вопрос был задан, поскольку я слежу за всем ре...

Рекомендуемые страницы