🥇كيفية ترميز الألوان بشكل صحيح على Habr ولماذا يعد الأمر صعبًا للغاية

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

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

لماذا هذا كل شيء

للوهلة الأولى، قد يبدو أن هذا يتم من باب الأذى، وذلك ببساطة لأن الإضاءة القياسية التي يتم تنفيذها من خلال العلامة غير مرضية <source>.

بمعنى ما، هذا صحيح بالطبع، ولكن ليس بالكامل.

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

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

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

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

يمكنك قراءة الكود بدون إضاءة خلفية، لكن لماذا؟

مميزات ترميز "هبر".

يتمتع IntelliJ IDEA بدعم مدمج لتصدير التعليمات البرمجية إلى HTML. يؤدي النسخ العادي للتعليمات البرمجية إلى وضع التعليمات البرمجية الملونة في الحافظة، والتي يمكن قراءتها بتنسيق HTML.

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

أنا بشكل عام أؤيد فكرة حظر HTML في المقالات، ولكن هناك فارق بسيط. يعد موردًا لمتخصصي تكنولوجيا المعلومات حيث تتم مناقشة التعليمات البرمجية غالبًا ولا توجد طريقة لإدراجه بشكل صحيح في المقالة أمرًا غريبًا إلى حد ما.

لذلك، لدينا علامات تحت تصرفنا , , . وبالإضافة إلى ذلك، كل هذا يعمل داخل العلامة <code>، وهو أمر ضروري للتنسيق. حسنًا   لقد حفظناها أيضًا، وهو أمر مفيد للأسطر الطويلة من التعليمات البرمجية والمسافات البادئة.

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

نهج

بادئ ذي بدء، من المفيد أن نقول كلمة شكر للمؤلف. com.capslocky لأجله مادة حول هذا الموضوع. لم أستخدم الأداة المقترحة في المقالة بشكل مباشر، ومن غير المرجح أن تنجح، ولكن بفضل هذه المادة فهمت عمق المشكلة بالكامل وشعرت في الوقت نفسه برياح الأمل.

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

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

قبل التصدير، تحتاج إلى تعيين نظام الألوان المطلوب في IDEA، على سبيل المثال من موقع Color Themes. سيتم تصدير الرمز بالمخطط المحدد. من الأفضل اختيار مخطط بخلفية بيضاء (نظرًا لأنه لا يمكن ضبط الخلفية على حبر) وبدون تسطير. لم أفهم كيفية سحبها بسهولة، لأنني لم أرغب في ذلك حقًا.
نحن نعمل فقط مع الدواخل الداخلية للعلامة <pre>. حتى إذا كنت تستخدم التصدير ليس من IDEA، ولكن من نوع آخر، فمن المحتمل أن تكون هناك هذه العلامة في علامة HTML، لأنه بدونها يكون من الصعب تنسيق الكود بشكل صحيح. نقوم بإزالة العلامة نفسها واستبدالها بـ <code>.
من المرجح أن يتم تقديم النص كقائمة  مع أنماط مختلفة. سيتعين علينا التخلص منهم جميعا. تقوم العديد من خدمات التلوين بطي الأنماط في ورقة أنماط، وهو أمر منطقي، وتستخدم مراجع لأسماء الأنماط. لا تقوم IDEA بهذا على وجه التحديد حتى الآن، مما يجعل المهمة أسهل إلى حد ما (إعدادات النمط موجودة مباشرة ).
اضبط لون الخط باستخدام علامة . لسوء الحظ، ليس من الممكن تعيين لون الخلفية.
ممتلكات font-style:italic تحويلها إلى بضع علامات و font-weight:bold - في .
استبدل جميع المسافات بـ  .
سلسلة الترجمات في النموذج   استبدل ب n.
ينتج عن ترميز HTML في IDEA أسطر فارغة ذات أنماط وأسطر مسافات ذات أنماط. من الأفضل التخلص من هذه الأنماط: سيؤدي ذلك إلى تقليل الطول بشكل كبير وزيادة إمكانية فهم الكود.
نحن نتأكد من أن فواصل الأسطر ليس لها أي نمط. وإلا ستكون هناك مشاكل مع الخطوط الفارغة.

وسأوضح النقطة الأخيرة بمثال:

<code>
1
2
</code>

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

تطبيق

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

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

بالإضافة إلى ذلك، اتضح أن IDEA لا تضع نصًا منسقًا في الحافظة فحسب، بل تضع أيضًا كائنات صعبة مثل application/x-java-jvm-local-objectref. المشكلة هي أن وجود مثل هذه الكائنات في الحافظة يؤدي إلى أخطاء مستمرة في وحدة التحكم الخاصة بي حول إنشاء DataFlavor. لسوء الحظ، ليس هناك ما يمكنك فعله حيال ذلك: هذه هي الطريقة التي يعمل بها JDK مع الحافظة. لقد كان الوحي بالنسبة لي هذا هو الرمز. من الواضح أن الأشخاص الأذكياء الذين كتبوا هذا يعتقدون أنه سيكون جيدًا. بشكل عام، لا تخافوا من الأخطاء التي قد تحدث عند العمل مع الأداة.

تمت كتابة المشروع في Kotlin ويعيش GitHub جيثب:.

اقتراحات للتحسينات هي موضع ترحيب كبير! على سبيل المثال، سيكون من الجيد تصميم هذه الأداة كمكون إضافي لـ IDEA. لم أجد حتى الآن طريقة بسيطة للقيام بذلك: لسوء الحظ، تم إغلاق مصادر المكون الإضافي Copy as HTML، ويستغرق التعرف على كيفية كتابة مثل هذا المكون الإضافي من البداية وقتًا طويلاً.

يمكن للمستخدمين المسجلين فقط المشاركة في الاستطلاع. تسجيل الدخول، من فضلك.