كيف تحوّل الكود إلى صور جميلة (بديل مجاني لـ Carbon)

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

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

ما الذي يميّز لقطة شاشة جيدة للكود

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

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

كيف تنشئ لقطة شاشة للكود

سير العمل سريع عن قصد. الصق كودك في المحرّر على اليسار (يبقى المحرّر والصورة الناتجة باتجاه LTR دائمًا). اختر اللغة من القائمة المنسدلة لكي يعرف مُلوّن الصياغة كيف يلوّنها — تدعم الأداة JavaScript وTypeScript وTSX/JSX وPython وGo وRust وJava وC++ وC# وRuby وPHP وSwift وKotlin وSQL وHTML وCSS وJSON وYAML وBash والنص العادي. المعاينة على اليمين تتحدّث مباشرةً أثناء كتابتك وتعديلك.

بعد ذلك نسّقها. اختر سمة — Midnight أو Dracula أو Monokai أو Solarized Light — لضبط لوحة ألوان الكود نفسه. اختر خلفية، من تدرّجات ناعمة مثل Ocean وSunset إلى ألوان صلبة أو خلفية شفافة إن أردت أن تطفو بطاقة الكود وحدها. فعّل أرقام الأسطر أو أوقفها. ثم اضبط الحشو واستدارة الزوايا وحجم الخط باستخدام أشرطة التمرير حتى يبدو الأمر صحيحًا.

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

لماذا يتفوّق بديل Carbon العامل في المتصفح

الخصوصية. يُحوَّل كودك إلى صورة محليًا باستخدام إمكانات canvas وSVG في المتصفح نفسه. لا يُرفع شيء إلى خادم. وهذا مهم حين يحتوي المقتطف الذي تشاركه على منطق داخلي أو إعدادات أو أي شيء لا تريده في سجلّات طرف ثالث.

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

بلا عوائق. لا تسجيل، لا حدود استخدام، لا عروض ترقية مقابل «دقة أعلى». افتح الصفحة، الصق، نسّق، صدّر. صورة PNG كاملة الدقة لك.

نصائح لصور كود أفضل

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

طابِق السمة مع المكان الذي تنشر فيه. تبدو السمات الداكنة مثل Midnight وDracula رائعةً على خطوط التواصل والتوثيق بالوضع الداكن. وتعمل Solarized Light جيدًا في الشرائح المطبوعة والمقالات ذات الخلفية الفاتحة. اختر تدرّج خلفية بتباين كافٍ ليبرز بطاقة الكود دون أن ينافس ألوان الصياغة.

ارفع حجم الخط للشرائح. الحجم الافتراضي 14 بكسل ممتاز للصور المضمّنة، لكن إن كانت لقطتك ستُعرض على جهاز عرض أو شريحة مؤتمر فارفعه إلى 18–20 بكسل ليقرأه من في الصف الخلفي.

ابدأ الإنشاء

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