Evgenii Legotckoi
Evgenii LegotckoiSept. 16, 2016, 2:25 p.m.

Django - Tutorial 002. Syntax highlighting of code on site

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 .

Implementing

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="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

Using

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;
}
</pre>

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

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.

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

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 .

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!

Comments

Only authorized users can post comments.
Please, Log in or Sign up
Last comments
k
kmssrFeb. 8, 2024, 3:43 p.m.
Qt Linux - Lesson 001. Autorun Qt application under Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
Qt WinAPI - Lesson 007. Working with ICMP Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
EVA
EVADec. 25, 2023, 7:30 a.m.
Boost - static linking in CMake project under Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
J
JonnyJoDec. 25, 2023, 5:38 a.m.
Boost - static linking in CMake project under Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
G
GvozdikDec. 18, 2023, 6:01 p.m.
Qt/C++ - Lesson 056. Connecting the Boost library in Qt for MinGW and MSVC compilers Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
Now discuss on the forum
AC
Alexandru CodreanuJan. 19, 2024, 8:57 a.m.
QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…
BlinCT
BlinCTDec. 27, 2023, 5:57 a.m.
Растягивать Image на парент по высоте Ну и само собою дял включения scrollbar надо чтобы был Flickable. Так что выходит как то так Flickable{ id: root anchors.fill: parent clip: true property url linkFile p…
Дмитрий
ДмитрийJan. 10, 2024, 1:18 a.m.
Qt Creator загружает всю оперативную память Проблема решена. Удалось разобраться с помощью утилиты strace. Запустил ее: strace ./qtcreator Начал выводиться весь лог работы креатора. В один момент он начал считывать фай…
Evgenii Legotckoi
Evgenii LegotckoiDec. 12, 2023, 3:48 a.m.
Побуквенное сравнение двух строк Добрый день. Там случайно не высылается этот сигнал textChanged ещё и при форматировани текста? Если решиать в лоб, то можно просто отключать сигнал/слотовое соединение внутри слота и …

Follow us in social networks