Найбільшим голівником на початку написання сайту з нуля на 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">...
<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 .
