Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Roundups
Webdesign

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

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by osamagaradh (you can also view the original English article)

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

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

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

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

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

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

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

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

1. SyntaxHighlighter

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

SyntaxHighlighter Demo - Default Theme
SyntaxHighlighter Demo - المظهر الافتراضي (html)
SyntaxHighlighter Demo - RDark Theme
SyntaxHighlighter Demo - RDark-موضوع -   (html)

طريقة النشر

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

الروابط

2. المنشور

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

Prism Demo - Default Theme
Prism Demo - المظهر الافتراضي (html)
Prism Demo - Okaidia Theme
Prism Demo - Okaidia موضوع (html)

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

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

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

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

طريقة النشر

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

الروابط

3. Highlight.js

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

Highlightjs - Default Style
Highlight.js -  نموذج افتراضي  (js)
Highlightjs - Railscasts Style
Highlight.js -  Railscasts نموذج  (js)

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

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

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

طريقة النشر

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

الروابط

4. قوس قزح

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

Rainbow Demo - GitHub Theme
Rainbow Demo - GitHub موضوع (css)
Rainbow Demo - Twilight Theme
قوس قزح التجريبي - موضوع الشفق (المغلق)

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

طريقة النشر

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

الروابط

5. SHJS

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

SHJS Demo - Default Theme
SHJS Demo - المظهر الافتراضي (html)
SHJS Demo - Navy Theme
SHJS Demo - Navy موضوع (html)

طريقة النشر

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

الروابط

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

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

Google Code Prettify Demo - Default Theme
Google Code Prettify Demo - المظهر الافتراضي (md)
Google Code Prettify Demo - Sunburst Theme
Google Code Prettify Demo - Sunburstموضوع (md)

طريقة النشر

  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. يتم اكتشاف اللغة تلقائيًا ، ولكن يتم تعيين كتلة تعليمات برمجية لإظهارها ، ولفها في عنصر سابق مع ملف تعريف الفئة :

الروابط

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

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

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

7. SyntaxHighlighter تتطور

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

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

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

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

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

الروابط

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

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

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

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

Crayon Syntax Highlighter - Classic Theme
Crayon Syntax Highlighter - المظهر الكلاسيكي (js)
Crayon Syntax Highlighter - Epic Geeks Theme js
قلم تلوين Syntax Highlighter - موضوع Epic Geeks  (js)

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

الروابط

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

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

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

الروابط

25. قلم

الروابط

تغليف

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

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.