التقط صور جميلة للكود البرمجي مع بلوجن CodeSnap لبرنامج VSCode

كمبرمج او شخص يتعامل مع البرمجة بين فترة واخرى فلابد من انك في بعض الاحيان تحتاج لالتقاط صور لكود برمجي اما لتأخذ ملاحظة وتحفظها لنفسك في قاعدة بيانات الـ PKM الخاصة بك او مشاركتها مع الغير بالمواقع الالكترونية والشروحات التعليمية او حتى المواد العلمية في دراستك مثل الاسايمنتس.

في بعض المواقع ومنصات النشر «كوردبريس» تستطيع عرض الكود البرمجي في مقالتك على شكل شفرة برمجية دون الحاجة لالتقاط صورة وتضمينها، وذلك من خلال استخدام بلوك code في المحرر ليظهر شيء مثل هذا.

.content {
  font-size: 1.3rem;
  line-height: 1.5rem;
  text-align: center;
}

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

.content {
  font-size: 1.3rem;
  line-height: 1.5rem;
  text-align: center;
}

ولكن اذا كنت تريد مثلًا الاشارة لكود برمجي معين ونشره في المواقع الاجتماعية «كفيسبوك وتويتر» او تضمينه في ملف دوكمنت فهنا من الافضل التقاط صورة «سكرين شوت» وتضمينها.

وبالعادة اغلبنا يستخدم اختصارات الكيبورد، مثل Shift + CMD + 4 في ماك، لتحديد مساحة محددة في الشاشة والتقاطها وحفظها كصورة ومن ثم التصرف بها. وهي طريقة فعالة ولا بأس بها.

لكن، برايي، تنفيذ نفس الامر من خلال استخدام اضافة «كود سناب» يعطي انطباع اكثر احترافية وجمالية لعملك او ما تحاول شرحه وايصاله للناس.

عند تحديد والتقاط الصورة للكود البرمجي سيظهر كما الصورة التالية بشكل جميل ومرتب.

كيفية تركيب واستخدام اضافة CodeSnap

من خلال برنامج فيجول ستديو كود VScode؛ افتح نافذة الـ Extensions وابحث عن اضافة “CodeSnap” ومن اثم اضغط على Install.

لالتقاط صورة للكود الذي تريد؛ تقوم اولًا بالتعليم او التضليل على الكود المطلوب، ثم تفتح قائمة الاوامر من خلال Shift + CMD + P او ما يعادلها في ويندوز/لينكس وتبحث وتختار “CodeSnap”.

سيظهر لك الكود المحدد على شكل صورة «مثل الصورة التالية». ولحفظ الصورة عليك الضغط على شعار الاضافة ومن ثم حفظها بالمكان الذي تريد على الجهاز.

شخصيًا استخدم الطريقة هذه في مواد الجامعة، كما ذكرت سابقًا امور مثل هذه تعطي انطباع جيد عنك 🙂