Джанго - Сабақ 002. Сайттағы синтаксисті бөлектеу коды

PrettyPrint, SyntaxHighlighting

Django көмегімен веб-сайтты нөлден бастап жазуды бастаған кездегі ең үлкен бас ауруы кодтың синтаксисін бөлектеу болды. Жарайды, Wordpress-те плагин бар еді, ол сайтты аздап жүктесе де, өз жұмысын жасады, өйткені артқы жарық сервер жағында ұйымдастырылған. Бірақ жаңа сайт жағдайында мен бұл тақырыпты ойлауға тура келді.

Бастапқыда таңдау синтаксистік бөлектеу қай жерде ұйымдастырылатыны туралы болды:

• Сервер жағы
• Немесе клиент жағында

Ақпаратты іздегеннен кейін мен сервер жағында синтаксисті ұйымдастырудың дайын шешімдері соншалықты көп емес екенін білдім, мысалы, Геши , мүмкін, 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 үшін Timeweb хостының VDS сервері ұсынамын.