Django - Tutorial 002. Syntax highlighting of code on site

PrettyPrint, SyntaxHighlighting

The biggest problem when you start writing a site from scratch on the Django was code syntax highlighting. Okay, I was on Wordpress the plugin that works with the task, though a bit loaded site as highlighting was organized on the server side. But in the case with the new site had already been thinking about it.

First choice was the issue of where it will be organized syntax highlighting:

  • On the server side
  • Or on the client side

Searching the information I found out that for the organization of the syntax in the ready-made solutions server side is not so much, for example Geshi, yes, and perhaps all, what works in Python. And he can load the server if there are problems in caching.

But with syntax highlighting on the client side it has become more interesting. Here for example, and Hightlight.js and SyntaxHighlighter , and lightweight script Google's good Corporation, Javascript Code Prettifier , on his choice, and fell. Especially because it is used in such a well-known resource as Stack Overflow .


Perhaps the biggest advantage of this script is its high speed and easy implementing and configuration.

Connect this script can be a single line, but it must be connected to the bottom of the page that triggered the code syntax highlighting.

<script src=""></script>


To use this functionality you need to wrap the script code in the tag illuminated, indicating the class prettyprint <pre class = "prettyprint"> ... </ pre> or <code class = "prettyprint"> ... </ code>

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

using namespace std;

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

Support of languages

The script supports multiple languages, which are indicated by a class lang- * with the appropriate extension for a specific language.

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

Line Numbering

Also, the script supports line numbering. To do this, you must specify linenums class. If it is necessary to clarify that the code begins with a specific string, then a colon must specify that line number, ie linenums: 18.

Default numbering goes every five lines, that is, 5, 10, 15, 20, etc. If you want to number every line, then you need to add additional styles for this script. They can be added to the file of your website style.

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

The result will be as follows:

#include <iostream>

using namespace std;

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

For Django I recommend VDS-server of Timeweb hoster .

10% refund of hotel reservation amount on Booking
10% refund of hotel reservation amount on Booking
We offer a link with a 10% return on the amount of the order when booking a hotel through Booking
Support the author Donate


Only authorized users can post comments.
Please, Log in or Sign up
July 14, 2019, 5:57 p.m.
Maksim Belikov

C++ - Test 005. Structures and Classes

  • Result:100points,
  • Rating points10
July 14, 2019, 5:52 p.m.
Maksim Belikov

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:90points,
  • Rating points8
July 14, 2019, 5:45 p.m.
Maksim Belikov

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

  • Result:71points,
  • Rating points1
Last comments
July 16, 2019, 3:15 p.m.
Evgenij Legotskoj

Конечно )) На самом деле не все читали Шлее... я например не читал ))
July 16, 2019, 3:05 p.m.

Так пример с QLocalServer и QLocalSocket я целиком переписал с QTcpSocket и QTcpServer из книги Шлее. Принципиальное отличие - где коннект ставить. :)) Разве что на это упор сделать. Но я могу...
July 16, 2019, 2:47 p.m.
Evgenij Legotskoj

Лучше API ))) Кстати, по использованию QLocalServer и QLocalSocket на сайте нет статей, было бы очень полезно и хорошо пошло бы в раздел Qt.
July 16, 2019, 12:36 p.m.

Да, прямой доступ не предполагается. Впрочем, можно, конечно, и напрямую. Всё равно всё локально происходит. Проблема в том, как донести сведения об изменениях в базе, которые вносит клиент, д...
July 16, 2019, 8:38 a.m.

спасибо, до smart pointer еще не дошел )
Now discuss on the forum
July 17, 2019, 11:49 a.m.

В настройкак указан индификатор проекта и ключ. Осталось понять как использовать ключ. Попробовал вставить в этот запрос 'https://[PROJECT_ID].firebaseio/users/jack/name.json?access_to...
July 17, 2019, 9:01 a.m.

Вообщем работает только если делать setSceneRect только в конструкторе главного окна, если потом менять rect например при вставке картинки то появляются сколлы все как надо только области не р...
July 17, 2019, 5:54 a.m.
Aleksej Vnukov

хочу не стандартный набор символов, а все ненужное убрать чтоб не мешало. для начала решил посмотреть как работает клава на родном примере, а он на телефоне не взлетел вот и начал разби...
July 17, 2019, 5:06 a.m.

Добрый день.Возможно вы сталкивались с облаками.Нужно из Qt создавать на облаке папки, записывать в папки файлы, читать и удалять с компьютера файлы.Возможно знаете, что лучше и проще испол...
Looking for a Job?
25,000.00 руб. - 30,000.00 руб.
Разработчик Qt/C++
Barnaul, Altai Krai, Russia

For registered users on the site there is a minimum amount of advertising

Join us
© EVILEG 2015-2019
Recommend hosting TIMEWEB