كيفية جعل التلوين الصحيح للرمز على "حبري" ولماذا هو صعب للغاية

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

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

لماذا كل هذا

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

بطريقة ما ، هذا صحيح بالطبع ، ولكن ليس تمامًا.

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

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

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

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

يمكنك قراءة الكود دون تمييز ، لكن لماذا.

ملامح هبر

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

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

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

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

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

النهج

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

الطرح الوحيد من هذا المنشور هو مقدار الكود الكبير المصحوب بتفسير ضئيل للغاية لما تفعله ولماذا.

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

1. قبل التصدير ، تحتاج إلى ضبط نظام الألوان المطلوب في IDEA ، على سبيل المثال ، من موقع Color Themes . سيتم تصدير الرمز مع المخطط المحدد. من الأفضل اختيار مخطط بخلفية بيضاء (حيث لا يمكن تعيين الخلفية على Habré) ودون تسطير. لم أفكر في مدى سهولة جرها ، لأنني لم أرغب حقًا في ذلك.
2. نحن نعمل فقط مع الأجزاء الداخلية <pre> . حتى إذا كنت تستخدم تصدير ليس من IDEA ، ولكن البعض الآخر ، فمن المحتمل أن تكون هناك هذه العلامة في ترميز HTML ، لأنه بدونها يصعب تنسيق الرمز بشكل صحيح. تتم إزالة العلامة نفسها ، واستبدالها بـ <code> .
3. على الأرجح سيتم تقديم النص كـ <span> مع أنماط مختلفة. عليهم جميعا التخلص من. تقوم العديد من خدمات التلوين بإحضار الأنماط في ورقة أنماط ، وهي منطقية ، وتستخدم روابط لأسماء الأنماط. على وجه التحديد ، لا تقوم IDEA بذلك بعد ، مما يجعل المهمة أسهل قليلاً (إعدادات النمط موجودة مباشرة في <span> ).
4. عيّن لون الخط من خلال <font> . لسوء الحظ ، لا يمكن تعيين لون الخلفية.
5. نحول font-style:italic خاصية font-style:italic إلى زوج من علامات <i> </i> ، font-weight:bold إلى <b> </b> .
6. استبدال جميع المسافات بـ   ; .
7. <br> استبدال فواصل الأسطر في شكل <br> بـ \n .
8. توصيف HTML في IDEA ينتج خطوط فارغة مع أنماط ومسافات من مسافات مع أنماط. من الأفضل التخلص من هذه الأنماط: سيؤدي ذلك إلى تقليل طول الشفرة وزيادة فهمها إلى حد كبير.
9. تأكد من أن موجزات الأسطر لا تحتوي على أي نمط. خلاف ذلك ، سيكون هناك مشاكل مع خطوط فارغة.

يتم توضيح الفقرة الأخيرة بمثال:

<code>
1 <font color="000000">
</font> 2
</code>

سيتم تشغيل الكود المحدد بواسطة "Habr" في 12 . الأمر نفسه ينطبق على العلامات <b> و <i> ، وكذلك أي مجموعة منها. لا ينبغي أن يكون لفواصل الأسطر نمط ، وبعد ذلك سيكون كل شيء على ما يرام.

تطبيق

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

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

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

المشروع مكتوب في كوتلين ويعيش في جيثب .

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