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 .

Комментарии

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
25 февраля 2018 г. 14:09
exxtra_noise

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

  • Результат 100 баллов
  • Очки рейтинга 10
25 февраля 2018 г. 14:06
exxtra_noise

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

  • Результат 60 баллов
  • Очки рейтинга -1
25 февраля 2018 г. 10:39
exxtra_noise

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

  • Результат 100 баллов
  • Очки рейтинга 10
Последние комментарии
26 февраля 2018 г. 0:55
soz7557

Qt/C++ - Урок 029. Изображение в базе данных в Qt – Сохранение и Восстановление

thanks, but Id should be the same the one as i select the image in tree view.

25 февраля 2018 г. 21:53
Console

Выпуск Qt 5.10

Здравствуйте.Планируется ли урок по Qt Network Authorization? Всё же интересная тема и информации маловато в интернете.

25 февраля 2018 г. 19:54
EVILEG

GameDev на Qt - Урок 4. Обнаружение коллизий в Qt (2D)

Сначала нужно что-нибудь написать, прежде чем это оптимизировать. А вообще все оптимизации исходят из совокупности условий, а не из того, что есть один танк и N треугольников. Да и области вид...

25 февраля 2018 г. 19:31
romankoshelev

GameDev на Qt - Урок 4. Обнаружение коллизий в Qt (2D)

А как насчет оптимизации. Тут ведь например будет ездить N треугольников, для каждого проводить линию и смотреть пересечения? +Это же происходит много раз в секунду.

25 февраля 2018 г. 16:15
EVILEG

GameDev на Qt - Урок 4. Обнаружение коллизий в Qt (2D)

Как вариант, использовать QLineF. Условно взять линию от положения танка, до положения треугольника. И проверить пересечение этой линии с другими линиями на карте с помощью метода intersect. Этот м...

Сейчас обсуждают на форуме
25 февраля 2018 г. 11:31
Mic78

How to retrieve a QCandlestickSet item from a QChartView?

Sorry, in the last sentence I wanted to write: "For that I need to know the maximum value of the QCandlestickSets in the zoomed area."

25 февраля 2018 г. 10:02
EVILEG

Проблема с ComboBox

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

25 февраля 2018 г. 9:07
EVILEG

Qt управление окнами других программ

Добрый день! Это всё делается через WinAPI. В Qt не занимаются разработкой настолько платформозависимого функционала, который нужен единицам. Не знаю, что там было в Delphi, возможн...

21 февраля 2018 г. 13:26
sol11

Qtableviev после сортировки

Спасибо, всё заработало :) Единственное вот тут row на id поменял и всё круто :)) if(id == -1){ model->insertRow(model->rowCount(QModelIndex())); map...

20 февраля 2018 г. 13:18
alex_lip

Разбить один qml файл на несколько составляющих

Да спасибо. Просто после необходимости специфичных названий для файла - стараюсь обращать внимание на любую мелочь.