25 تظليل بناء الجملة: حاول واختبارها

عندما تشرع في الاستيلاء على تمييز بناء الجملة لموقعك ، أو IDE المفضلة لديك ، ستجد بسرعة أن هناك الكثير من الخيارات المتاحة.  يمكن اختيار أي واحد لاستخدام مهمة شاقة.

اليوم ، نحن نجعل عملية اختيار أسهل بالنسبة لك مع تقريب من جميع العروض الأكثر بروزا في مجالات تركيب syntax مباشرة لجافا سكريبت ، ومكونات WordPress ، وامتدادات و حزم IDE للنص Sublime ، Brackets و Atom.

جافا سكريبت بدعم من أقلام

يشاهد جزء كبير من اختيار مصمم لغوي جافاسكوت هيغليغتر كيف يزين وينقد اللغات التي تريد العمل بها.  للمساعدة في هذا الجزء من المعادلة ، قمنا بإعداد عرض توضيحي مباشر لكل من أدوات التمييز التي سنتناولها في هذه المقالة.  بالنسبة إلى كل أداة تمييز ، هناك ثلاثة أمثلة للموضوعات معروضة. يمكنك التحقق من العرض التجريبي بأكمله على جيثب.

ومع ذلك ، فإن مجموعة أدوات التمييز التي سنعتمد عليها تدعم مجموعة كبيرة من اللغات فيما بينها ، مع الأخذ في الاعتبار أننا مجتمع تصميم مواقع ويب ، توضح عروضنا التوضيحية كيفية تعامل أجهزة التمييز مع اللغات التي نراها شائعة الاستخدام من قِبل مصممي الويب:

• HTML
• جافا سكريبت
• CSS
• PHP
• تخفيض السعر
• CoffeeScript
• CoffeeScript
• يشم
• أقل
• ساس
• مرقم

توضح جميع العروض كيف أن كل لغة من هذه اللغات تظهر تحت أداة التمييز المعنية ، بغض النظر عما إذا كانت تحتوي على دعم خاص بتلك اللغة.  إذا لم تتوفر أداة تمييز خاصة بلغة معينة ، فسوف يتراجع العرض التوضيحي إلى أقرب ما يمكن له أو إلى نص عادي.

بالإضافة إلى العروض التوضيحية ، ستحصل على لقطة شاشة سريعة لكل تمييز ، وإصدار موجز لما ينطوي عليه نشرها ، وملخص لنقاطها الرئيسية ، ومعلومات إضافية عند الاقتضاء ، وروابط إلى قائمتها للغات المدعومة والموقع الإلكتروني ومستودع جيثب.

1. SyntaxHighlighter

SyntaxHighlighter وقد تم منذ عام 2004 وموثوقة للغاية.  إن اللغات الـ 23 المدعومة هي أكثر برمجية من تصميم مواقع الويب ، لذلك قد يكون هذا مناسبًا تمامًا لموقع على البرمجة ، ولكنه أقل ملاءمة لموقع يتعلق بتصميم الويب.  يأتي مع سبعة مواضيع للاختيار من بينها.

طريقة النشر

1. قم بتحميل ملف JavaScript أساسي ، ثم ملف JavaScript إضافي لكل لغة تريد تمييزها.
2. قم بتحميل ملف CSS أساسي ، ثم ملف CSS إضافي للمظهر الذي ترغب في استخدامه.
3. في أسفل الصفحة ، شغل وظيفة JavaScriptSyntaxHighlighter.all ()
4. قم بتضمين الكود في عنصر ما قبل ، باستخدام اسم الفئة لتحديد اللغة:

1

<pre class="brush: js">

2

// code here

3

</pre>

الروابط

• عرض حي
  
• قائمة اللغات المدعومة
• Syntaxhighlighter الموقع
• على جيثب

2. المنشور

إحدى الميزات الرائعة لاستخدام Prism هي أنه يسمح لك بتنزيل بنية مخصصة ، بما في ذلك ما تحتاج إليه فقط.  كما أنه يتمتع بدعم قوي للغات تصميم الويب المستخدمة في العروض لدينا ، فضلا عن دعم العديد من اللغات الأخرى.  بالنسبة إلى الموقع ذي الصلة بتصميم الويب ، يعتبر هذا منافسًا قويًا ، ومع ذلك فإن العدد الكبير من اللغات المدعومة يعني أنه سيعمل أيضًا بشكل جيد على موقع يتعلق بأنواع أخرى من الترميز.  لديها ستة مواضيع للاختيار من بينها.

نظام تنزيل مخصص

تدعم بريزم 61 لغة ، بما في ذلك جميع لغات تصميم الويب التي نستخدمها في عروضنا التوضيحية. عند تنزيل Prism ، لا يتعين عليك إحضار جميع هذه اللغات ؛ يمكنك اختيار فقط تلك التي تحتاجها.  يمكنك أيضًا اختيار المظهر الذي تريد استخدامه ، ثم يتم إنشاء جافا سكريبت و CSS المطلوبين لك.

بعد تحديد السمة واللغات التي تريدها ، قم بتنزيل ملفات JS و CSS في أسفل صفحة التنزيل.

إذا قررت أنك تريد استخدام سمة مختلفة ، فقم فقط بتحديد موضوع جديد من أعلى الصفحة وتنزيل ورقة الأنماط التي تم تجديدها.

طريقة النشر

1. قم بتحميل ملف JavaScript وملف CSS من البنية المخصصة الخاصة بك.
2. لف كل كتلة تعليمات برمجية في عنصر ما قبل ، ثم في عنصر شفرة بداخله ، باستخدام فئة عنصر الكود لتحديد اللغة:

1

<pre>

2

<code class="language-javascript">

3

// code here

4

</code>

5

</pre>

الروابط

• عرض حي
• قائمة اللغات المدعومة
• قائمة اللغات المدعومة
• على جيثب

3. Highlight.js

يحتوي Highlight.js على أكبر عدد من اللغات والمواضيع المدعومة ، بهامش كبير جدًا ، وعملية رائعة لتنزيل بنية مخصصة بكل اللغات التي تحتاجها فقط.  يعد اكتشاف اللغة التلقائي ميزة أخرى قوية جدًا.  مع هذا الاختيار الهائل من اللغات والموضوعات ، يبدو أن هذه الملاءمة ستكون مناسبة تمامًا لأي حالة استخدام.

يتضمن Highlight.js عددًا كبيرًا من الأنماط (السمات) ، مع وجود 54 مجموعة مجمعة في التنزيل ، وبعضها يطابق مواضيع IDE الشائعة مثل Monokai و Railscasts.  نظرًا لعدد ملفات CSS المضمنة ، قد ترغب في نسخ المواضيع التي ستستخدمها في مشروعك.

قائمة اللغات المدعومة هي أيضا ضخمة. لقد حسبت 118 المتاحة في الوقت الحاضر ، مع جميع لغات تصميم الويب التجريبي لدينا المدرجة.

عند تنزيل Highlight.js ، يمكنك اختيار واختيار اللغات التي ترغب في استخدامها ، وسيتم وضعها في ملف JavaScript واحد لك.

طريقة النشر

1. قم بتحميل ملف Javascript الذي قمت بتنزيله ، وملف CSS للموضوع الذي اخترته.
2. في أسفل الصفحة ، شغل وظيفة JavaScripthljs.initHighlightingOnLoad ()؛
3. لف كل كتلة تعليمات برمجية في عنصر سابق ، ثم في عنصر رمز بداخلها. يتم اكتشاف اللغة تلقائيًا ، ولكن إذا كنت بحاجة إلى استخدام فئة عنصر الكود لتحديد اللغة:

1

<pre>

2

<code>

3

// code here

4

</code>

5

</pre>

6

7

OR...

8

9

<pre>

10

<code class="language-javascript">

11

// code here

12

</code>

13

</pre>

الروابط

• عرض حي
• قائمة اللغات المدعومة
• موقع Highlight.js
• على جيثب

4. قوس قزح

Rainbow هي عبارة عن أداة تمييز بناء جملة صغيرة مصممة لتكون قابلة للتوسعة وقابل للتشغيل ، لذا قد يكون خيارًا رائعًا لمن يبحثون عن التخصيصات. قد يكون استخدامه للغة البيانات لتحديد اللغة بدلاً من فئة تفضيلية في ظروف معينة. يحتوي على 14 سمة ، مع بعض السمات المتوافقة مع IDE الشائعة مثل Monokai و Solarized و Tomorrow Night.

يوفر Rainbow مجموعة مختارة قوية من اللغات الأساسية ، ويمكنك تحديد أي منها تريد استخدامه عند التنزيل.

طريقة النشر

1. قم بتحميل ملف Rainbow JavaScript الرئيسي وملف CSS للموضوع الذي اخترته.
2. قم بتحميل ملف JavaScript إضافي لكل لغة تريد تمييزها
3. لف كل كتلة تعليمات برمجية في عنصر سابق ، ثم في عنصر رمزبداخلها. استخدم لغة بيانات السمة على عنصر الكود لتحديد اللغة:

1

<pre>

2

<code data-language="javascript">

3

// code here

4

</code>

5

</pre>

الروابط

• عرض حي
• قائمة اللغات المدعومة
• موقع قوس قزح
• على جيثب

5. SHJS

SHJS ، مثل SyntaxHighlighter ، حزمة تركز على لغات البرمجة أكثر من لغات تصميم الويب.  وهو يدعم 39 لغة ويحتوي على 39 سمة متاحة للاستخدام.

طريقة النشر

1. قم بتحميل ملف SHJS JavaScript الرئيسي وملف CSS للموضوع الذي اخترته.
2. قم بتحميل ملف JavaScript إضافي لكل لغة تريد تمييزها
3. قم بتشغيل الدالة sh_highlightDocument ()؛ إما باستخدامonload على علامة body body ، أو باستخدام jQuery لاكتشاف متى يكون المستند جاهزًا.
4. لف كل كتلة تعليمات برمجية في عنصر سابق . استخدام فئة على ما قبل عنصر لتحديد لغة:

1

<pre class="sh_javascript">

2

// code here

3

</pre>

الروابط

• عرض حي
• موقع الويب وقائمة اللغات المدعومة

6. قانون جوجل التوفيق

كود Prettify يدعم 29 لغة ، مرة أخرى مع التحيز القوي نحو لغات البرمجة وتقليل الدعم للغات تصميم الويب.  يسمح لك autoloader URL المفرد بتجنب تنزيل أي ملفات JS أو CSS وتحميل كل شيء عبر CDN ، وهو بالتأكيد أسلوب سريع وسهل. إن القدرة على تخطي تحديد اللغات ، بدلاً من مجرد تطبيق بصمة الفصول على العناصر السابقة ، يمكن أن تكون أيضًا أداة توفير الوقت.

طريقة النشر

1. Load a single URL https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js via a script tag, which autoloads the syntax highlighter and default theme.
2. إذا كنت ترغب في استخدام سمة غير افتراضية ، فقم بإلحاق اسمها بعنوان URL الخاص بالملحق التلقائي مثل: run_prettify.js؟ skin = sunburst
3. يتم اكتشاف اللغة تلقائيًا ، ولكن يتم تعيين كتلة تعليمات برمجية لإظهارها ، ولفها في عنصر سابق مع ملف تعريف الفئة :

1

<pre class="prettyprint">

2

// code here

3

</pre>

الروابط

• عرض حي
• قائمة اللغات المدعومة
• على جيت هب

ووردبرس] الإضافات

يرجى ملاحظة ، أن هناك بعض المكونات الإضافية في بناء الجملة في مستودع الفسفور الأبيض والتي تحظى بشعبية كبيرة ، ولكن مع ذلك لن يتم تغطيتها في هذه المقالة. والسبب في ذلك هو مشكلة WP الأخيرة التي تتطلب تحديث العديد من المكونات الإضافية لضمان الأمان.  في وقت كتابة هذه السطور ، يتم الحفاظ على جميع الملحقات المذكورة أدناه بشكل نشط ومتوافقة مع أحدث إصدار من WordPress.

تلميح: مع إضافات تظليل بناء الجملة في WordPress ، قد يتداخل المظهر النشط أحيانًا مع المظهر المقصود للتعليمات البرمجية.  إذا لم تظهر مجموعة من التعليمات البرمجية المميزة بشكل صحيح تمامًا ، فجرّب تبديلًا سريعًا للموضوع لمعرفة ما إذا كانت هذه المشكلة قد تكون المشكلة أم لا.  قد تضطر إلى إضافة CSS مخصص صغيرًا إلى مظهرك للتغلب على أي تعارضات تنشأ.

7. SyntaxHighlighter تتطور

SyntaxHighlighter Evolved هو تطبيق SyntaxHighlighter ، على أساس جافا سكريبت هيغليغتر نظرنا في أعلاه.

بمجرد تثبيت المكون الإضافي وتنشيطه ، يتم نشره في إحدى المنشورات باستخدام رموز هاتف مجمعة حول الشفرة التي ترغب في تمييزها.  فمثلا:

1

[code language="html"]

2

<header>

3

<h1>Example HTML</h1>

4

</header>

5

<main class="style">

6

<p>Some text</p>

7

</main>

8

[/code]

نصائح الاستخدام

عندما تبدأ في إنشاء منشور جديد ، يمكنك تحديد ما إذا كنت ستستخدم وضع "مرئي" أم لا.  إذا كنت ستستخدم وضع "Visual" على الإطلاق ، فتأكد من لصق / كتابة الكود الذي سيتم تمييزه في وضع "Visual" وليس في وضع "Text". سيؤدي إدخال الرمز في وضع "مرئي" إلى الفرار منه ، مما يؤدي إلى تحويل أشياء مثل < و > علامات إلى كيانات html مثل& lt؛ و & gt؛ .

إذا كنت ستعمل في وضع "مرئي" ، فمن الأفضل أيضًا إضافة رموزك القصيرة الافتتاحية والختامية في البداية ، ثم إضافة رمزك فيما بينها.  يساعد هذا على ضمان عدم تشويش التعليمات البرمجية أثناء الحفظ.

الروابط

• موقع الكتروني
• مستودع الفسفور الابيض
• على جيت هب

8. تلوين بناء الجملة هيغليغتر

Crayon Syntax Highlighter هو حل PHP يعمل بالطاقة.  في حين تم تصميمه بشكل أساسي للاستخدام كمكون WordPress ، فإنه يصف نفسه أيضًا بأنه مناسب لأي منصة تستند إلى PHP.

يعد استخدام Crayon في مشاركاتك بديهيًا تمامًا حيث يضيف زرًا إلى شريط أدوات التحرير الخاص بك الذي ينشأ نافذة مخصصة لإنشاء رمز مميز.  يتم توفير مساحة للصقها في الكود ، وقائمة منسدلة لاختيار اللغة المستخدمة ، والعديد من الخيارات الأخرى التي تتحكم في العديد من الجوانب المختلفة لعرض الشفرة.

أحد الخيارات المتوفرة هو مجموعة من المظاهر المختلفة لاستخدامها في كل كتلة تعليمات برمجية ، مما يعني أنه يمكنك استخدام مواضيع متعددة لكل صفحة.

يحتوي على قائمة طويلة جدا من اللغات المدعومة ، مع ما مجموعه 63 في الوقت الحاضر بما في ذلك العديد من الاستخدامات الشائعة في تصميم المواقع.  لمشاهدة قائمة اللغات ، ستحتاج إلى تثبيت المكون الإضافي على موقع WordPress وإلقاء نظرة على صفحة الإعدادات الخاصة به في منطقة المسؤول.

الروابط

• مستودع اWP
• على جيت هب

9. بريزم بناء الجملة هيغليغتر لورد

تُعد "البنية البارزة للتمييز" لـ WordPress تطبيقًا للغة تمييز جافا سكريبت Prism التي غطيناها سابقًا.

لا يستخدم هذا المكون الإضافي أيًا من الرموز القصيرة للمغلف ولا نافذة Add Code. بدلاً من ذلك ، قم بإنشاء حقل مخصص جديد مناسب لكل كتلة من الكود ، مثلjs_code_example ، وأضف الكود الخاص بك إليه.  الغرض من هذا النهج هو ضمان عدم التداخل مع شفرتك بواسطة محرر نشر WP.

لعرض الرمز من الحقل المخصص ، ستستخدم رمزًا قصيرًا يحدد اسم الحقل المخصص واللغة التي سيتم تمييزها على سبيل المثال

1

[prism field=js_code_example language=javascript]

الروابط

• المنشور لموقع الويب ورد
• مستودع WP
• على جيت هب

ملحقات IDE والحزم

في هذا القسم ، سننظر في ثلاثة من IDEs الشائعة: Sublime Text و Brackets و Atom.  لن نقوم بتغطية تظليل بناء الجملة المضمن من أي من هذه الثلاث ، والتي في كثير من الحالات ستجدها كافية بشكل افتراضي.

بدلاً من ذلك ، سنستمر في الامتدادات والحزم المتاحة للتوسعة في تمييز الكلمات مع كل منها.  بهذه الطريقة ، إذا وجدت أن التمييز الافتراضي في أي من هذه IDE لا يلبي احتياجاتك ، فستتمكن من الانتقال مباشرة إلى هذه القائمة والعثور على الامتداد الصحيح أو الحزمة المناسبة لك.

ملاحظة: حيثما توجد عدة خيارات صلبة لتسليط الضوء على لغة معينة ، قمنا بتضمين بعض المعلومات الموجزة للمساعدة في تحديد ما يناسبك بشكل أفضل.  ومع ذلك ، إذا لم تر أي معلومات إضافية حول الحزمة ، فيمكنك افتراض ذلك لأننا قمنا بالفعل بفحص التحديد المتاح ورشنا الخيار المميز.

حزم نصية سامية

لقد حان الوقت لتغطية بعض باقات Text Sublime Text التي ستحسن من إلقاء الضوء على لغتك المفضلة.  سنغطي عددًا من الأمثلة ، بدءًا من Markdown Highlighting.

ملاحظة : جميع لقطات الشاشة التالية تستخدم موضوع Spacegrey .

10. التخفيض  الموسعة

هذه الحزمة هي تلك التي استخدمها شخصيا في النص الأساسي حيث تحافظ على اتساق المظهر مع بقية بيئة الترميز.

الروابط

• صفحة التحكم في الحزمة

11. ضوء التخفيض

يعمل MarkdownLight-ضوء التخفيض- على تحويل لون المستند إلى اللون الأبيض ، إلا أنه لا يقوم بتعديل عرض أي من شفرات الترميز الخاصة بك بعيدًا عن الألوان والملصق.

الروابط

• صفحة التحكم في الحزمة

12. MarkdownEditing

يختلف MarkdownEditing تمامًا عن الحزمتين الأخريين. إنها تقوم بتوسيط الشفرة في الصفحة وتقوم بأمور مثل تحويل > منع علامات إلى حدود سميكة من الجانب الأيسر.  تحتوي هذه الحزمة على IDE الخاص بك يشبه محرر نشر ، مما يجعلها مناسبة بشكل جيد إذا كنت تبحث استخدام Sublime Text كأداة كتابة المحتوى.

الروابط

• صفحة التحكم في الحزمة

13. المقاود

حان الوقت الآن لبعض المقود.  تعمل هذه الحزمة أيضًا في محرر Atom ، لذلك إذا كنت تستخدم Atom بالإضافة إلى نص Sublime ، فيمكنك الحصول على بعض الإلمام عبر كلا الجهازين.

الروابط:

• صفحة التحكم في الحزمة

14.  Jade

دور Jade لبعض تحسينات تسليط الضوء (كما تعلمون ، أنا قليلا مشجع Jade ).

الروابط

• صفحة التحكم في الحزمة

15. CSS3

تعمل هذه الحزمة على تحسين تمييز بناء الجملة لبعض الإضافات الأكثر حداثة إلى CSS.  يحل محل حزمة CSS3_Syntax السابقة للنص Sublime 2.

الروابط

• صفحة التحكم في الحزمة

16. قلم

الروابط

• صفحة التحكم في الحزمة

17. ساس

توفر هذه الحزمة تسليط الضوء على كل من Sass و SCSS ، بالإضافة إلى اختصارات إكمال ترميز Zen .

الروابط

• صفحة التحكم في الحزمة

18. بناء على تسليط الضوء على ساس

لا يختلف الاختلاف بين حزمة "Sass" أعلاه وهذه الحزمة عن لقطة شاشة ، نظرًا لأن التباين الأكثر أهمية هو كيفية معالجة كل واحدة للإكمال التلقائي.  إذا كنت تقضي وقتًا طويلاً في كتابة Sass ، فأوصيك بمنح كل واحدة من هذه الحزم وقتًا دقيقًا لمعرفة أيهما يناسب سير عملك.

الروابط

• صفحة التحكم في الحزمة

19. أقل

الروابط

• صفحة التحكم في الحزمة

20. أفضل نص قهوة

الروابط

• صفحة التحكم في الحزمة

ملحقات بين قوسين

تحتوي الأقواس على العديد من إضافات تظليل بناء الجملة ، ولكن في هذه المرحلة من الوقت تكون في الغالب لغات البرمجة بدلاً من لغات تصميم الويب.

ومع ذلك ، فإن هذا يرجع إلى حد كبير إلى أن IDE لديها بالفعل دعم مدمج لإبراز العديد من اللغات ، بما في ذلك اللغات التي من المحتمل أن تستخدمها كجزء من تصميم الويب.  بعض الاستثناءات هي Handlebars و Jade و CoffeeScript و Stylus.  بالنسبة إلى الثلاثة الأولى ، يتم عرض إضافات بناء الجملة أدناه.  للأسف ، لم يتم العثور على إضافة توضيحية في بناء الجملة قوية لـ Stylus في هذا الوقت.

تستخدم لقطات الشاشة التالية موضوع الأقواس الافتراضية - وسنبدأ مرة أخرى باستخدام Handlebars.

21. الأقواس ، المقاود القوالب

الفرق في تسليط الضوء على المقاود قبل وبعد تثبيت هذا الامتداد لا يقفز عليك ، لأنه غرق إلى حد ما بين علامات HTML.  ومع ذلك ، إذا قمت بمقارنة كود معين Handlebars مباشرة ، سترى تغييرات التلوين فيه.

الروابط

• على جيت هب

22.اقواس-jade

هذا هو البرنامج المساعد لتمييز Jade الرسمي للأقواس ، الذي يحتفظ به الشخص الذي يحافظ على Jade ، لذلك يمكنك التأكد من أنه يتم الحفاظ على السرعة!

الروابط

• على جيت هب

23.اقواس -نص قهوة- CoffeeScript

الروابط

• على جيت هب

حزم اتوم

من المحتمل أن يكون لدى Atom أقوى تظليل تركيب افتراضي لجميع الـ IDEs الثلاثة التي قمنا بتغطيتها هنا اليوم.  بالنسبة لمعظم اللغات التي تستخدمها لتصميم الويب ، لن تحتاج إلى أي شيء سوى تمييز مضمن.  ومع ذلك ، بالنسبة إلى Jade and Stylus ، إليك بعض الاقتراحات.

24. لغة-jade

الروابط

• صفحة حزمة Atom

25. قلم

الروابط

• صفحة حزمة Atom

تغليف

بالنسبة لمميزات JavaScript ومكونات WordPress الإضافية ، يمكن القول إن أفضل طريقة هي البدء عن طريق الاطلاع على قائمة اللغات المدعومة.  بعد تحديد عناصر التمييز التي تدعم اللغات التي تحتاج إلى عرضها ، قم بمقارنة الميزات الأخرى من أجل اتخاذ قرارك.

في حالة امتدادات وحزم IDE ، فإن جميع الخيارات المعروضة أعلاه تكون صلبة ومستخدمة على نطاق واسع ، لذلك لا يمكنك الذهاب بعيدا عن الخطأ.

إذا لم تكن متأكدًا من الطريقة التي يمكنك اتباعها في تمييز موقع الويب أو IDE من قبل ، نأمل أن يكون المسار إلى الأمام أكثر وضوحًا لك!