تحويل الكود إلى صورة

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

جارٍ تحميل الأداة…

تحويل الكود إلى صورة — الصق مقتطفًا، واختر لغته وسمته وخلفيته وحشوته، ثم صدّر بطاقة كود بأسلوب Carbon كصورة PNG شفافة أو بخلفية متدرجة. يعمل كل من إبراز تركيب الجملة (Prism) والتقاط الصورة (html-to-image) بالكامل داخل متصفحك، لذا لا يُرفع كودك أبدًا. تتحدّث المعاينة مباشرةً أثناء الكتابة أو تبديل الخيارات.

ما هي تحويل الكود إلى صورة؟

تحويل الكود إلى صورة أداة مجانية تعمل في المتصفح وتحوّل مقتطف كود إلى صورة قابلة للمشاركة — بطاقة كود أنيقة بإبراز لتركيب الجملة يمكنك وضعها في مقال مدونة أو عرض شرائح أو ملف README أو منشور على وسائل التواصل. وهي مفضّلة لدى المطورين وكتّاب المحتوى التقني والمعلّمين الذين يريدون أن يبدو كودهم مقصودًا بدلًا من لصق لقطة شاشة مسطّحة. اختر إبراز JavaScript أو TypeScript أو JSX أو CSS أو HTML أو JSON أو Python أو Bash، ثم زيّن البطاقة بسمة وخلفية متدرجة أو صلبة والحشوة التي تفضّلها. تُعرض البطاقة مباشرةً أثناء التحرير، وزر واحد بعنوان تنزيل PNG يصدّرها بدقة 2x.

كيفية استخدام تحويل الكود إلى صورة

  1. الصق كودك أو اكتبه في المحرر، أو صِل خرج النص من أداة أخرى بمنفذ الإدخال في مساحة العمل.
  2. اختر اللغة المطابقة — JavaScript أو TypeScript أو JSX أو CSS أو HTML أو JSON أو Python أو Bash — لكي يكون إبراز تركيب الجملة صحيحًا.
  3. افتح الإعدادات لاختيار سمة (Midnight أو Graphite أو Snow)، وخلفية (Aurora أو Sunset أو Ocean أو Slate أو شفافة)، والحشوة (متراصّة أو عادية أو فسيحة).
  4. راقب تحديث المعاينة المباشرة أثناء الكتابة وتغيير الخيارات؛ انقر عليها لتكبيرها في عرض التقريب.
  5. اضغط تنزيل PNG لحفظ البطاقة كصورة عالية الدقة، أو في مساحة العمل مرّر PNG مباشرةً إلى أداة صور لاحقة.

أمثلة

دالة JavaScript لمقال مدونة

الصق دالة JavaScript قصيرة، وابقِ اللغة على JavaScript، واختر سمة Midnight مع خلفية Aurora المتدرجة، ونزّل صورة PNG واضحة لتضمينها في مقال بدلًا من لقطة شاشة مسطّحة.

مقتطف CSS شفاف للشرائح

بدّل اللغة إلى CSS والخلفية إلى شفافة لكي لا يكون للصورة PNG المصدّرة أي خلفية، فتستقر بطاقة الكود بنظافة فوق خلفية شريحة ملوّنة.

بطاقة أمر Bash لملف README

اختر Bash، وحدّد سمة Snow الفاتحة مع خلفية Slate الصلبة وحشوة فسيحة، وصدّر بطاقة أمر نظيفة وسهلة القراءة لتوثيق مشروعك.

الأسئلة الشائعة

ما اللغات التي يمكنه إبرازها؟
يُبرز JavaScript وTypeScript وJSX وCSS وHTML وJSON وPython وBash. اختر ما يطابق مقتطفك من قائمة اللغات المنسدلة؛ وإذا تعذّر تصنيف رمز ما، فإنه ببساطة يعود إلى لون النص الأساسي.
بأي صيغة صورة يُصدّر؟
يُصدّر صورة PNG بكثافة بكسل 2x للحصول على نتائج حادّة. وإذا اخترت خيار الخلفية الشفافة، تحتفظ صورة PNG بقناة ألفا دون أي خلفية خلف بطاقة الكود.
هل يمكنني تغيير مظهر البطاقة؟
نعم. في الإعدادات يمكنك التبديل بين سمات Midnight وGraphite وSnow، واختيار خلفية Aurora أو Sunset أو Ocean أو Slate أو شفافة، وضبط حشوة متراصّة أو عادية أو فسيحة حول الكود.
هل يُرفع كودي إلى أي مكان؟
لا. يعمل كل من إبراز تركيب الجملة (Prism) والتقاط الصورة (html-to-image) بنسبة 100% من جانب العميل داخل متصفحك. لا يُرفع كودك أبدًا ولا يُرسل إلى خوادمنا ولا يُشارك، لذا تبقى حتى المقتطفات الخاصة على جهازك.
لماذا لا تظهر الصورة حتى أنقر على تنزيل في صفحة الأداة؟
في الصفحة المستقلة تُنشأ صورة PNG عند الضغط على تنزيل PNG، لذا لا تعيد الكتابة التقاط الصورة مع كل ضغطة مفتاح. ومع ذلك تتحدّث المعاينة المنسّقة مباشرةً أثناء التحرير؛ وفي مساحة العمل تُعاد بناء صورة PNG تلقائيًا أيضًا لكي تنساب إلى الأداة التالية.

أدوات ذات صلة

أداة فحص تباين الألوان

افحص نسبة تباين WCAG بين لون أمامي ولون خلفية بصيغة HEX وتعرّف على ما إذا كانت تجتاز المستويين AA وAAA لكل من النص العادي والنص الكبير.

خالط الألوان

امزج لونين بصيغة HEX بنسبة تختارها في فضاء RGB أو Lab، واقرأ اللون الوسطي الناتج كعينة وقيمة HEX قابلة للنسخ.

مولّد درجات الألوان

حوّل لونًا أساسيًا واحدًا بصيغة HEX إلى مقياس درجات بأسلوب Tailwind من 50 إلى 950، بالمزج نحو الأبيض والأسود، مع عيّنة لونية لكل خطوة وقيمة HEX قابلة للنسخ.

محاكي عمى الألوان

ارفع صورة وعاين كيف تبدو مع عمى الأحمر (بروتانوبيا) أو عمى الأخضر (ديوتيرانوبيا) أو عمى الأزرق (تريتانوبيا) أو عمى الألوان الكامل، ثم نزّل النتيجة المحاكاة.