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 хостинг.

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

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
AD

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

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

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

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

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

  • Результат:20баллов,
  • Очки рейтинга-10
Последние комментарии
ИМ
Игорь Максимов22 ноября 2024 г. 17:51
Django - Урок 017. Кастомизированная страница авторизации на Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
Evgenii Legotckoi
Evgenii Legotckoi31 октября 2024 г. 19:37
Django - Урок 064. Как написать расширение для Python Markdown Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
A
ALO1ZE19 октября 2024 г. 14:19
Читалка fb3-файлов на Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
ИМ
Игорь Максимов5 октября 2024 г. 13:51
Django - Урок 064. Как написать расширение для Python Markdown Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
d
dblas55 июля 2024 г. 17:02
QML - Урок 016. База данных SQLite и работа с ней в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
Сейчас обсуждают на форуме
m
moogo22 ноября 2024 г. 13:17
Mosquito Spray System Effective Mosquito Systems for Backyard | Eco-Friendly Misting Control Device & Repellent Spray - Moogo ; Upgrade your backyard with our mosquito-repellent device! Our misters conce…
Evgenii Legotckoi
Evgenii Legotckoi24 июня 2024 г. 21:11
добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
t
tonypeachey115 ноября 2024 г. 12:04
google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
NSProject
NSProject4 июня 2022 г. 9:49
Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…

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