إذا كنت تكتب للويب ، فقد ترغب في البحث في Markdown. هناك الكثير من تطبيقات Markdown التي تلبي احتياجات كتّاب الويب. لكن برامج تحرير الأكواد المجانية مثل Microsoft Visual Studio Code (VSCode) يمكن أن تكون أكثر قوة.

يتفهم VSCode Markdown ولديه أدوات مضمنة لمعاينته بتنسيق HTML. ومع ذلك ، يمكنك إضافة وظائف معالج النصوص مثل عدد الكلمات والمدقق الإملائي. قد ترغب أيضًا في تمكين التخصيصات الخاصة بموقع الويب للمعاين.

أخيرًا ، القدرة على نسخ Markdown كـ HTML حتى تتمكن من لصقه بشكل نظيف في نظام إدارة المحتوى (CMS) أمر لا بد منه.

قم بتنزيل وتثبيت VSCode

للبدء ، قم بتنزيل إما VSCode أو بديله المفتوح المصدر VSCodium. إصدارات كل منها متاحة لجميع أنظمة تشغيل سطح المكتب الرئيسية.

بمجرد الانتهاء تم تنزيله وتثبيته VSCodeقم بتشغيل التطبيق للبدء.

قم بتثبيت ملحق عدد الكلمات

ابدأ بإضافة عداد للكلمات. هناك العديد من الامتدادات المتاحة التي تتعامل مع هذا. أفضل ما يميز بين الكلمات الفعلية والرمز أو أسماء الملفات هو ملحق Word Counter الخاص بـ Microsoft.

تحميل:عدد الكلمات ملحق VSCode (مجاني)

  1. انقر فوق تنزيل الملحق تحت موارد في الجزء الأيمن السفلي.
    2. instagram viewer
  2. بمجرد التنزيل ، قم بالتبديل إلى VSCode.
  3. اضغط على علامة الترس في الزاوية اليسرى السفلية من الواجهة.
  4. انقر فوق ملحقات.
  5. انقر فوق علامة الحذف (...) بالقرب من الجزء العلوي من جزء الامتدادات.
  6. انقر التثبيت من VSIX.
  7. اختر ال ms-vscode.wordcount - *. vsix الملف الذي قمت بتنزيله للتو.

ال عدد الكلمات يجب الآن تثبيت الامتداد. اختبره عن طريق فتح ملف Markdown جديد والكتابة. يجب أن تشاهد الآن عداد الكلمات في أسفل الجانب الأيسر من الواجهة:

قم بتثبيت ملحق التدقيق الإملائي

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

تحميل:رمز التدقيق الإملائي ملحق VSCode (مجاني)

  1. اتبع الخطوات من 1 إلى 6 من القسم أعلاه.
  2. اختر ال streetidesoftware.code- المدقق الإملائي - *. vsix الملف الذي قمت بتنزيله للتو.

ال رمز التدقيق الإملائي يجب الآن تثبيت الامتداد. اختبره عن طريق فتح ملف Markdown جديد وكتابة كلمات بها أخطاء إملائية.

من المفترض أن ترى خطًا أزرق متعرجًا أسفل هذه الكلمات مع عدد من الأخطاء في الجانب الأيمن السفلي من الواجهة:

تخصيص تمايل الخطأ

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

يمكنك محاولة تغييره إلى لون أحمر غامق كما تتوقع في معالج النصوص:

  1. اضغط على علامة الترس في الزاوية اليسرى السفلية من الواجهة.
  2. انقر فوق إعدادات.
  3. انقر فوق منضدة، ومن بعد مظهر.
  4. انتقل لأسفل إلى تخصيص اللون:
  5. انقر قم بالتحرير في settings.json.
  6. الصق الكود التالي في المحرر الذي يفتح في علامة تبويب جديدة:
    "editorInfo.foreground": "# ff0000"
  7. أغلق الملف واحفظه.

الآن إذا أخطأت في كتابة كلمة ما ، فسيقوم VSCode بتزيينها بتمايل أحمر ساطع:

تجاهل الإيجابيات الكاذبة

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

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

  1. انقر بزر الماوس الأيمن على الكلمة التي تريد أن يتجاهلها المدقق الإملائي.
  2. تحوم فوق الإملائية واختر أضف كلمات إلى إعدادات المستخدم.

من الآن فصاعدًا ، لن يحدد التدقيق الإملائي هذه الكلمات على أنها غير صحيحة:

قم بتثبيت Copy Markdown كملحق HTML

بعد ذلك ، قم بتثبيت Copy Markdown كملحق HTML حتى تتمكن من نسخ Markdown المنسق ولصقه.

تحميل:نسخ Markdown كـ HTML ملحق VSCode (مجاني)

  1. اتبع الخطوات من 1 إلى 6 من الأقسام أعلاه.
  2. اختر ال jerriepelser.copy-markdown-as-html-1.1.0.vsix الملف الذي قمت بتنزيله للتو.

الآن يجب أن تكون قادرًا على نسخ Markdown من VSCode ولصقه في CMS بتنسيق HTML نظيف. لاختبار هذا:

  1. حدد بعض نص Markdown.
  2. افتح ال لوحة القيادة في ال رأي القائمة ، أو بالضغط على CTRL + Shift + P.
  3. يختار Markdown: نسخ بصيغة HTML:
  4. الصق Markdown المنسوخ في ملف HTML جديد.

يجب أن ترى أن Markdown المنسوخ قد تم لصقه بشكل صحيح بتنسيق HTML:

تخصيص جزء المعاينة

بشكل افتراضي ، سيكون لجزء المعاينة نفس نمط سمة VSCode الحالية.

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

يمكنك استخدام أي موقع تريده ؛ الأنماط التالية مأخوذة من MUO. فقط استخدم أداة فحص العناصر في متصفحك للعثور على الخطوط و اختر الألوان من أي موقع.

  1. أنشئ ملفًا جديدًا وقم بتسميته شيئًا مثل "CustomStyles.css"
  2. الصق مثال كود CSS التالي في الملف:
    هيئة {
     لون الخلفية: #fff ؛
     اللون: # 2c2c2c ؛
     عائلة الخطوط: Roboto ؛
     حجم الخط: 18 بكسل ؛
     وزن الخط: 400 ؛
    ارتفاع خط: 1.7em;
     أقصى عرض: 750 بكسل ؛
    }
    h1 {
     حجم الخط: 38 بكسل ؛
     وزن الخط: 800 ؛
    }
    

    h2 {
     حجم الخط: 34 بكسل ؛
     وزن الخط: 700 ؛
    }
    

    h3 {
     حجم الخط: 24 بكسل ؛
     وزن الخط: 700 ؛
    }
    

    أ {
     الحد السفلي: 2بكسل صلبة # bf0d0b ؛
     اللون: # bf0d0b ؛
     وزن الخط: 700 ؛
    }
    

    أ:يحوم {
     اللون: #fff ؛
     معرفتي: # bf0d0b ؛
    }
    قوي {
     وزن الخط: عريض ؛
    }
  3. أغلق الملف واحفظه.
  4. اضغط على علامة الترس في الزاوية اليسرى السفلية من الواجهة.
  5. انقر فوق إعدادات.
  6. انقر فوق ملحقات وثم تخفيض السعر.
  7. انتقل لأسفل إلى Markdown: الأنماط وانقر اضافة عنصر.
  8. أدخل المسار الخاص بك CustomStyles.css ملف ، على سبيل المثال:
    ج:\المستخدمون\آدم\CustomStyles.css
  9. انقر نعم.

بمجرد الانتهاء من ذلك ، يجب أن ينتهي بك الأمر مع جزء معاينة يشبه إلى حد كبير هذه المقالة.

مرة أخرى ، حصلت على هذه القيم باستخدام أداة Inspect Element في المستعرض الخاص بي على MUO ، لكنك سترغب في العثور على القيم لموقع الويب الوجهة الخاص بك.

ثيمات المحرر

يأتي سمة VSCode الافتراضية باللونين الداكن والفاتح ، مع إصدارات عالية التباين لكل منهما. ولكن مثل أي محرر كود جيد ، هناك يتوفر الكثير من مظاهر الجهات الخارجية الرائعة.

إذا كنت تفضل مظهر معالج Word على مظهر محرر التعليمات البرمجية ، فإنني أوصي بموضوع Office بواسطة huacat:

إذا كنت تفضل محرر كود ، فإن السمات الشائعة مثل Dracula و Gruvbox و Material (انظر لقطة الشاشة أدناه) و Nord كلها متاحة من سوق الإضافات.

لتثبيت نسق جديد:

  1. اضغط على علامة الترس في الزاوية اليسرى السفلية من الواجهة.
  2. انقر فوق ملحقات.
  3. ابحث عن أي من الموضوعات المذكورة أعلاه أو قم ببساطة بتصفية الفئة إلى الموضوعات وتصفح ما هو متاح.

هل VSCode هو محرر Markdown النهائي؟

إذن ، هل VSCode هو محرر Markdown النهائي لمحتوى الويب؟ من خارج الصندوق ، ربما لا. لكنها قابلة للتمدد مثل أي شيء يمكن أن يكون.

عدادات الكلمات ، والمدققات الإملائية ، ونسخ Markdown كـ HTML ، ومعاينة التخصيصات ، والسمات فقط خدش السطح. هناك نظام بيئي مليء بالامتدادات متاح لـ VSCode ، ولك مطلق الحرية في جعله خاصًا بك.