قائمة التمييز للصق / عرض كود المصدر في WordPress

2018 11 年 月 日 24

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

نوع المكتبة

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

تسليط الضوء. js

مكتبة JavaScript تسمى Highlight.js. يدعم 189 لغة برمجة ولديه 89 نمط عرض (اعتبارًا من نوفمبر 2018).الوظيفة بسيطة مثل إبراز الكود.خفيف جدا.شائع.

https://highlightjs.org/

Prism.js

هذه أيضًا مكتبة JavaScript خفيفة الوزن.يدعم 153 لغة و 8 أنماط عرض (اعتبارًا من نوفمبر 2018).كإمتداد ، يمكنك بسهولة إضافة أرقام الأسطر ، وإبراز الخطوط المحددة ، وعرض اللغة ، وتثبيت زر النسخ ، وما إلى ذلك.هذا أيضا شائع.

https://prismjs.com/

جوجل كود- prettify

كما يوحي الاسم ، مكتبة JavaScript طورتها Google. وهو يدعم لغات البرمجة الرئيسية مثل C و Python و HTML و CSS و JavaScript و Makefile ، لكن اللغات الثانوية تحتاج إلى دعم بواسطة الامتدادات.هناك 5 أنماط عرض (اعتبارًا من نوفمبر 2018).بالإضافة إلى طريقة التحميل إلى مجلد WordPress مثل النوعين المذكورين أعلاه واستخدامه ، هناك طريقة سهلة لتثبيته باستخدام أداة التحميل التلقائي.هناك القليل من المعلومات اليابانية لأنه لا يوجد الكثير من المستخدمين.

https://github.com/google/code-prettify

نوع المكون الإضافي

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

WP Code Highlight.js

إنه إصدار مكون إضافي من Highlight.js تم تقديمه في نوع المكتبة. متوافق مع SyntaxHighlighter و Prettify و CrayonSyntaxHighlighter ، بحيث يمكنك الانتقال من أدوات تمييز أخرى أيضًا.

https://ja.wordpress.org/plugins/wp-code-highlightjs/

هايلايتر Prism Syntax

نسخة مكونة من Prism.js.

https://ja.wordpress.org/plugins/ank-prism-for-wp/

كود تجميل

نفس.

https://ja.wordpress.org/plugins/code-prettify/

هايلايتر Crayon Syntax

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

https://ja.wordpress.org/plugins/crayon-syntax-highlighter/

هايلايتر Mivhak Syntax

يدعم أكثر من 130 لغة برمجة وله 36 موضوعًا.يبدو أن البرامج النصية والسمات اللغوية يتم تحميلها عند الطلب من CSS و JS خفيفة الوزن ، ولكن يبدو أنها ثقيلة مثل Crayon Syntax Highlighter.يمكنك تحديد حجم الخط لجزء التعليمات البرمجية فقط.

https://ja.wordpress.org/plugins/mivhak/

 

لقد قارنت تأثيرات كل مكون إضافي على سرعة عرض الموقع ، لذا يرجى الرجوع إلى هذا أيضًا.

مقارنة سرعة عرض الموقع لإضافات Syntax Highlighter

 

 

نوع خدمة الويب

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

Gist (خدمة GitHub)

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

https://gist.github.com/discover

srctohtml

يمكنك بسهولة تحويل التعليمات البرمجية إلى علامات HTML للتضمين دون تسجيل.اللغات المدعومة هي JavaScript و C ++ و PHP وأقل قليلاً.

http://marginalsoft.com/tools/srctohtml/

أي واحد تختار

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

نوع المكتبة يتم التركيز على خفة التشغيل وسرعة العرض
نوع المكون الإضافي التأكيد على سهولة التقديم
(بعض الإضافات لا تثقل كاهلها)
نوع خدمة الويب مسجل GitHub (Gist) ، وهو مفتون بوظيفة إدارة الكود
الأشخاص الذين لديهم فرص قليلة للتضمين (srctohtml)

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