VSCode کو الٹیمیٹ مارک ڈاؤن ایڈیٹر میں کیسے تبدیل کریں۔

VSCode کو الٹیمیٹ مارک ڈاؤن ایڈیٹر میں کیسے تبدیل کریں۔

اگر آپ ویب کے لیے لکھتے ہیں، تو آپ مارک ڈاؤن کو دیکھنا چاہیں گے۔ بہت ساری مارک ڈاؤن ایپس ہیں جو ویب رائٹرز کو پورا کرتی ہیں۔ لیکن مفت کوڈ ایڈیٹرز جیسے مائیکروسافٹ کے ویژول اسٹوڈیو کوڈ (VSCode) اور بھی زیادہ طاقتور ہو سکتے ہیں۔





VSCode مارک ڈاؤن کو سمجھتا ہے اور اسے HTML میں پیش نظارہ کرنے کے لیے بلٹ ان ٹولز رکھتا ہے۔ تاہم، آپ ورڈ پروسیسر کی فعالیت شامل کر سکتے ہیں جیسے ورڈ گنتی اور ہجے چیکر۔ آپ پیش نظارہ کرنے والے کے لیے ویب سائٹ کی مخصوص تخصیصات کو بھی فعال کرنا چاہیں گے۔





دن کی ویڈیو کا میک یوز

آخر میں، مارک ڈاؤن کو HTML کے طور پر کاپی کرنے کی اہلیت تاکہ آپ اسے مواد کے انتظام کے نظام (CMS) میں صاف طور پر چسپاں کر سکیں۔





VSCode ڈاؤن لوڈ اور انسٹال کریں۔

شروع کرنے کے لیے، VSCode یا اس کا اوپن سورس متبادل VSCodium ڈاؤن لوڈ کریں۔ ہر ایک کے ورژن تمام بڑے ڈیسک ٹاپ آپریٹنگ سسٹمز کے لیے دستیاب ہیں۔

ایک بار جب آپ نے VSCode کو ڈاؤن لوڈ اور انسٹال کیا۔ شروع کرنے کے لیے ایپلیکیشن چلائیں۔



انسٹال شدہ پروگراموں کو دوسری ڈرائیو ونڈوز 10 میں کیسے منتقل کریں۔
  VSCode ڈیفالٹ ویلکم اسکرین۔

ورڈ کاؤنٹ ایکسٹینشن انسٹال کریں۔

ایک لفظ کاؤنٹر شامل کرکے شروع کریں۔ بہت ساری ایکسٹینشنز دستیاب ہیں جو اس کو سنبھالتی ہیں۔ اصل الفاظ اور کوڈ یا فائل ناموں میں سب سے بہتر فرق مائیکروسافٹ کا اپنا ورڈ کاؤنٹر ایکسٹینشن ہے۔

ڈاؤن لوڈ کریں: الفاظ کی گنتی VSCode توسیع (مفت)





  1. پر کلک کریں ایکسٹینشن ڈاؤن لوڈ کریں۔ کے تحت حوالہ جات نیچے دائیں ہاتھ کے پین میں۔
  2. ڈاؤن لوڈ ہونے کے بعد، VSCode پر سوئچ کریں۔
  3. پر کلک کریں گیئر آئیکن انٹرفیس کے نچلے بائیں کونے میں۔
  4. پر کلک کریں ایکسٹینشنز .
  5. بیضوی پر کلک کریں ( ... ) ایکسٹینشن پین کے اوپری حصے کے قریب۔
  6. کلک کریں۔ VSIX سے انسٹال کریں۔ .   Microsoft کی طرف سے ورڈ کاؤنٹ ایکسٹینشن کے ساتھ VSCode نمونہ دستاویز میں الفاظ کی تعداد کا پتہ لگاتے ہوئے دکھایا گیا ہے۔
  7. منتخب کیجئیے ms-vscode.wordcount-*.vsix فائل جو آپ نے ابھی ڈاؤن لوڈ کی ہے۔

دی الفاظ کی گنتی توسیع کو اب انسٹال کیا جانا چاہئے۔ ایک نئی مارک ڈاؤن فائل کھول کر اور ٹائپ کرکے اس کی جانچ کریں۔ اب آپ کو انٹرفیس کے نیچے بائیں طرف ایک لفظ کاؤنٹر نظر آنا چاہئے:

  VSCode میں ایک مارک ڈاؤن دستاویز کھلی ہوئی ہے جس میں ہجے کی غلطیوں کا پتہ لگایا گیا ہے جس میں نرم نیلے رنگ کی لکیر ہے۔

ہجے چیک ایکسٹینشن انسٹال کریں۔

آپ ہجے کی جانچ کی فعالیت کو بھی شامل کرنا چاہیں گے۔ جیسا کہ ورڈ کاؤنٹرز کے ساتھ ہے، بہت ساری ایکسٹینشنز ہیں جو ہجے کی جانچ کو سنبھالتی ہیں۔ سب سے زیادہ مقبول ہے کوڈ ہجے چیک کریں۔ بذریعہ Street Side Software کیونکہ یہ بہت سی زبانوں میں دستیاب ہے۔





ڈاؤن لوڈ کریں: کوڈ ہجے چیک کریں۔ VSCode توسیع (مفت)

  1. اوپر والے حصے سے 1 سے 6 تک کے مراحل پر عمل کریں۔
  2. منتخب کیجئیے streetsidesoftware.code-spell-checker-*.vsix فائل جو آپ نے ابھی ڈاؤن لوڈ کی ہے۔

دی کوڈ ہجے چیک کریں۔ توسیع کو اب انسٹال کیا جانا چاہئے۔ ایک نئی مارک ڈاؤن فائل کھول کر اور غلط ہجے والے الفاظ ٹائپ کرکے اس کی جانچ کریں۔

  VSCode اسٹیٹس بار کے نیچے دائیں جانب ایک اشارے کے ساتھ جو ہجے کی چار غلطیاں دکھاتا ہے۔

آپ کو انٹرفیس کے نیچے دائیں جانب غلطیوں کی گنتی کے ساتھ ان الفاظ کے نیچے ایک نیلے رنگ کی لکیر نظر آنی چاہیے:

  VSCode settings.json فائل اپنی مرضی کے کوڈ کے ساتھ کھلی ہے۔

ایرر اسکوگل کو اپنی مرضی کے مطابق بنائیں

اس سپیل چیک ایکسٹینشن کا سب سے بڑا مسئلہ اسکوگل کے لیے استعمال ہونے والا کمزور نیلا رنگ ہے جو غلطیوں کی نشاندہی کرتا ہے۔ یہ تاریک تھیمز کے پس منظر میں گھل مل جاتا ہے اور اسے دوسرے مارک ڈاؤن عناصر کے لیے دوبارہ استعمال کیا جاتا ہے۔

آپ اسے ایک بولڈ سرخ رنگ میں تبدیل کرنے کی کوشش کر سکتے ہیں جیسا کہ آپ ورڈ پروسیسر میں دیکھنے کی توقع کرتے ہیں:

  1. پر کلک کریں گیئر آئیکن انٹرفیس کے نچلے بائیں کونے میں۔
  2. پر کلک کریں ترتیبات .
  3. پر کلک کریں ورک بینچ ، پھر ظہور .
  4. تک نیچے سکرول کریں۔ رنگ حسب ضرورت :   VSCode میں کھلی ہوئی ایک مارک ڈاون دستاویز جو ایک مضبوط سرخ squiggly انڈر لائن کے ذریعہ واضح غلط ہجے کے ساتھ پائی جاتی ہے۔
  5. کلک کریں۔ settings.json میں ترمیم کریں۔ .
  6. درج ذیل کوڈ کو ایڈیٹر میں چسپاں کریں جو ایک نئے ٹیب میں کھلتا ہے:
    "editorInfo.foreground": "#ff0000"
      ہجے کی تین غلطیوں کے ساتھ VSCode میں کھلا ایک مارک ڈاؤن دستاویز۔
  7. اور فائل کو محفوظ کریں۔

اب اگر آپ کسی لفظ کی غلط ہجے کرتے ہیں تو، VSCode اسے ایک روشن سرخ اسکوگل سے سجا دے گا:

  ایک مناسب طریقے سے فارمیٹ شدہ HTML دستاویز VSCode میں کھلی ہے۔

غلط مثبت کو نظر انداز کرنا

ہجے چیک کرنے والا صنعت سے متعلق مخصوص اصطلاحات یا کمپنی کے ناموں جیسے مناسب اسم کو نہیں پہچان سکتا ہے۔ مندرجہ بالا اسکرین شاٹ میں، مثال کے طور پر، VSCode مخفف 'distro' کو غلط ہجے کے طور پر نمایاں کرتا ہے۔

ان الفاظ کو غلطیوں کے طور پر دیکھنا بند کرنے کے لیے، آپ انہیں اپنے میں شامل کرنا چاہیں گے۔ صارف کی ترتیبات .

یوٹیوب پر تجویز کردہ ویڈیوز کو کیسے بند کیا جائے۔
  1. اس لفظ پر دائیں کلک کریں جسے آپ ہجے چیکر نظر انداز کرنا چاہتے ہیں۔
  2. اوپر چکرانا املا اور منتخب کریں صارف کی ترتیبات میں الفاظ شامل کریں۔ .   یہ مضمون بطور مارک ڈاؤن فائل VSCode میں ڈیفالٹ پیش نظارہ کے ساتھ کھلا ہے۔

اب سے، املا کی جانچ ان الفاظ کو غلط کے طور پر شناخت نہیں کرے گی:

  VSCode سیٹنگز> ایکسٹینشنز> مارک ڈاؤن> مارک ڈاؤن: اسٹائلز مینو۔

کاپی مارک ڈاؤن کو HTML ایکسٹینشن کے طور پر انسٹال کریں۔

اس کے بعد، کاپی مارک ڈاؤن کو HTML ایکسٹینشن کے طور پر انسٹال کریں تاکہ آپ فارمیٹ شدہ مارک ڈاؤن کو کاپی اور پیسٹ کر سکیں۔

ڈاؤن لوڈ کریں: مارک ڈاؤن کو HTML کے بطور کاپی کریں۔ VSCode توسیع (مفت)

  1. اوپر والے حصوں سے 1 سے 6 تک کے مراحل پر عمل کریں۔
  2. منتخب کیجئیے jerriepelser.copy-markdown-as-html-1.1.0.vsix فائل جو آپ نے ابھی ڈاؤن لوڈ کی ہے۔

اب آپ کو VSCode سے مارک ڈاؤن کاپی کرنے کے قابل ہونا چاہیے اور اسے CMS میں صاف HTML کے طور پر چسپاں کرنا چاہیے۔ اس کی جانچ کرنے کے لیے:

  1. کچھ مارک ڈاؤن متن منتخب کریں۔
  2. کھولو کمانڈ پیلیٹ میں دیکھیں مینو، یا دبانے سے CTRL+Shift+P .
  3. منتخب کریں۔ مارک ڈاؤن: HTML کے بطور کاپی کریں۔ :   یہ مضمون مارک ڈاؤن فائل کے طور پر VSCode میں MUO کی طرح نظر آنے کے لیے اپنی مرضی کے مطابق پیش نظارہ کے ساتھ کھلا ہے۔
  4. کاپی شدہ مارک ڈاؤن کو ایک نئی HTML فائل میں چسپاں کریں۔

آپ کو دیکھنا چاہئے کہ کاپی شدہ مارک ڈاؤن کو HTML کے طور پر صحیح طریقے سے پیسٹ کیا گیا تھا:

  لائٹ تھیم میں VSCode ویلکم اسکرین۔

پیش نظارہ پین کو حسب ضرورت بنانا

پہلے سے طے شدہ طور پر، پیش نظارہ پین کا انداز وہی ہوگا جو موجودہ VSCode تھیم کا ہے۔

  اس آرٹیکل کا مارک ڈاؤن VSCode میں آفس تھیم بذریعہ huacat استعمال کرتے ہوئے کھلتا ہے۔

تاہم، آپ اپنے مواد کی حتمی منزل کو زیادہ قریب سے ظاہر کرنے کے لیے پیش نظارہ چاہتے ہیں۔ آپ اپنے مارک ڈاؤن کو ایسا ظاہر کرنے کے لیے پیش نظارہ پین کو اپنی مرضی کے مطابق بنا سکتے ہیں جیسے یہ پہلے سے ہی اس ویب سائٹ پر موجود ہے جس پر آپ شائع کر رہے ہیں۔

آپ کسی بھی ویب سائٹ کو استعمال کر سکتے ہیں جو آپ چاہتے ہیں؛ مندرجہ ذیل شیلیوں کو MUO سے لیا گیا تھا۔ بس فونٹس تلاش کرنے کے لیے اپنے براؤزر کے انسپیکٹ ایلیمنٹ ٹول کا استعمال کریں۔ اور کسی بھی ویب سائٹ سے رنگ چنیں۔ .

ایمیزون فائر ریموٹ کو جوڑنے کا طریقہ
  1. ایک نئی فائل بنائیں اور اسے کچھ اس طرح کا نام دیں ' CustomStyles.css '
  2. درج ذیل مثال کے سی ایس ایس کوڈ کو فائل میں چسپاں کریں:
    body { 
    background-color: #fff;
    color: #2c2c2c;
    font-family: Roboto;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7em;
    max-width: 750px;
    }

    h1 {
    font-size: 38px;
    font-weight: 800;
    }

    h2 {
    font-size: 34px;
    font-weight: 700;
    }

    h3 {
    font-size: 24px;
    font-weight: 700;
    }

    a {
    border-bottom: 2px solid #bf0d0b;
    color: #bf0d0b;
    font-weight: 700;
    }

    a:hover {
    color: #fff;
    background: #bf0d0b;
    }

    strong {
    font-weight: bold;
    }
  3. اور فائل کو محفوظ کریں۔
  4. پر کلک کریں گیئر آئیکن انٹرفیس کے نچلے بائیں کونے میں۔
  5. پر کلک کریں ترتیبات .
  6. پر کلک کریں ایکسٹینشنز اور پھر نشان لگانا .
  7. تک نیچے سکرول کریں۔ مارک ڈاون: انداز اور کلک کریں آئٹم شامل کریں۔ .
  8. اپنے راستے میں داخل ہوں۔ CustomStyles.css فائل، مثال کے طور پر:
    C:\Users\Adam\CustomStyles.css
      اس مضمون کا مارک ڈاؤن VSCode میں Equinusocio کے میٹریل تھیم کا استعمال کرتے ہوئے کھلا ہے۔
  9. کلک کریں۔ ٹھیک ہے .

ایک بار جب آپ یہ کر لیتے ہیں، تو آپ کو ایک پیش نظارہ پین کے ساتھ ختم کرنا چاہئے جو اس مضمون کی طرح نظر آتا ہے۔

ایک بار پھر، میں نے یہ اقدار MUO پر اپنے براؤزر کے Inspect Element ٹول کا استعمال کرکے حاصل کی ہیں، لیکن آپ اپنی منزل کی ویب سائٹ کے لیے قدریں تلاش کرنا چاہیں گے۔

ایڈیٹر تھیمز

ڈیفالٹ VSCode تھیم اندھیرے اور روشنی دونوں میں آتا ہے، ہر ایک کے ہائی کنٹراسٹ ورژن کے ساتھ۔ لیکن کسی بھی اچھے کوڈ ایڈیٹر کی طرح، وہاں موجود ہیں۔ ایک ٹن زبردست تھرڈ پارٹی تھیمز دستیاب ہیں۔ .

اگر آپ کوڈ ایڈیٹر کے مقابلے ورڈ پروسیسر کی شکل کو ترجیح دیتے ہیں، تو میں huacat کے ذریعہ آفس تھیم کی سفارش کرتا ہوں:

اگر آپ کوڈ ایڈیٹر کو ترجیح دیتے ہیں تو عام تھیمز جیسے ڈریکولا، گروو باکس، میٹریل (نیچے اسکرین شاٹ دیکھیں) اور نورڈ ایکسٹینشنز مارکیٹ پلیس سے دستیاب ہیں۔

ایک نیا تھیم انسٹال کرنے کے لیے:

  1. پر کلک کریں گیئر آئیکن انٹرفیس کے نچلے بائیں کونے میں۔
  2. پر کلک کریں ایکسٹینشنز .
  3. مذکورہ بالا تھیمز میں سے کسی کو بھی تلاش کریں یا صرف زمرہ کو فلٹر کریں۔ تھیمز اور جو دستیاب ہے اسے براؤز کریں۔

کیا VSCode حتمی مارک ڈاؤن ایڈیٹر ہے؟

تو، کیا VSCode ویب مواد کے لیے حتمی مارک ڈاؤن ایڈیٹر ہے؟ آؤٹ آف دی باکس، شاید نہیں۔ لیکن یہ اتنا ہی قابل توسیع ہے جتنا کچھ بھی ہوسکتا ہے۔

ورڈ کاؤنٹرز، اسپیل چیکرز، مارک ڈاؤن کو HTML کے طور پر کاپی کریں، حسب ضرورت پیش نظارہ، اور تھیمز صرف سطح کو کھرچتے ہیں۔ VSCode کے لیے ایکسٹینشنز سے بھرا ایک ماحولیاتی نظام دستیاب ہے، اور آپ اسے اپنا بنانے کے لیے آزاد ہیں۔