কিভাবে VSCode কে আলটিমেট মার্কডাউন এডিটরে পরিণত করবেন

আপনি যদি ওয়েবের জন্য লেখেন, আপনি মার্কডাউন দেখতে চাইতে পারেন। প্রচুর মার্কডাউন অ্যাপ রয়েছে যা ওয়েব লেখকদের পূরণ করে। কিন্তু মাইক্রোসফটের ভিজ্যুয়াল স্টুডিও কোড (VSCode) এর মত ফ্রি কোড এডিটর আরও শক্তিশালী হতে পারে।

VSCode মার্কডাউন বোঝে এবং এইচটিএমএলে এটির পূর্বরূপ দেখার জন্য অন্তর্নির্মিত সরঞ্জাম রয়েছে। যাইহোক, আপনি শব্দ গণনা এবং একটি বানান পরীক্ষকের মত শব্দ প্রসেসর কার্যকারিতা যোগ করতে পারেন। আপনি প্রিভিউয়ারের জন্য ওয়েবসাইট-নির্দিষ্ট কাস্টমাইজেশন সক্ষম করতে চাইতে পারেন।

দিনের মেকইউজের ভিডিও

অবশেষে, মার্কডাউনকে HTML হিসাবে অনুলিপি করার ক্ষমতা যাতে আপনি একটি বিষয়বস্তু ব্যবস্থাপনা সিস্টেমে (CMS) পরিষ্কারভাবে পেস্ট করতে পারেন।

VSCode ডাউনলোড এবং ইনস্টল করুন

শুরু করতে, VSCode বা এর ওপেন সোর্স বিকল্প VSCodium ডাউনলোড করুন। প্রতিটির সংস্করণ সমস্ত প্রধান ডেস্কটপ অপারেটিং সিস্টেমের জন্য উপলব্ধ।

আপনি একবার VSCode ডাউনলোড এবং ইনস্টল করা হয়েছে শুরু করতে অ্যাপ্লিকেশনটি চালান।

ওয়ার্ড কাউন্ট এক্সটেনশন ইনস্টল করুন

একটি শব্দ পাল্টা যোগ করে শুরু করুন. এটি পরিচালনা করে এমন অনেক এক্সটেনশন উপলব্ধ রয়েছে। প্রকৃত শব্দ এবং কোড বা ফাইলের নামগুলির মধ্যে যেটি সবচেয়ে ভাল পার্থক্য করে তা হল মাইক্রোসফটের নিজস্ব ওয়ার্ড কাউন্টার এক্সটেনশন।

ডাউনলোড করুন: শব্দ গণনা VSCode এক্সটেনশন (ফ্রি)

কিভাবে ফেসবুকে উচ্চমানের ভিডিও আপলোড করবেন

ক্লিক করুন এক্সটেনশন ডাউনলোড করুন অধীন সম্পদ নীচের ডানদিকের ফলকে।
একবার ডাউনলোড হয়ে গেলে, VSCode-এ স্যুইচ করুন।
ক্লিক করুন গিয়ার আইকন ইন্টারফেসের নিচের বাম কোণে।
ক্লিক করুন এক্সটেনশন .
উপবৃত্তে ক্লিক করুন ( ... ) এক্সটেনশন ফলকের শীর্ষের কাছে।
ক্লিক VSIX থেকে ইনস্টল করুন .
পছন্দ ms-vscode.wordcount-*.vsix ফাইল আপনি সবেমাত্র ডাউনলোড করেছেন।

দ্য শব্দ গণনা এক্সটেনশন এখন ইনস্টল করা উচিত। একটি নতুন মার্কডাউন ফাইল খুলে টাইপ করে এটি পরীক্ষা করুন। আপনি এখন ইন্টারফেসের নীচে বাম দিকে একটি শব্দ কাউন্টার দেখতে পাবেন:

একটি নরম নীল স্কুইগ্লি আন্ডারলাইন দ্বারা শনাক্ত করা ভুল বানান সহ VSCode-এ খোলা একটি মার্কডাউন নথি।

বানান চেক এক্সটেনশন ইনস্টল করুন

আপনি বানান পরীক্ষা কার্যকারিতা যোগ করতে চাইবেন। শব্দ কাউন্টারগুলির মতো, অনেকগুলি এক্সটেনশন রয়েছে যা বানান পরীক্ষা পরিচালনা করে। সবচেয়ে জনপ্রিয় হয় কোড বানান পরীক্ষা স্ট্রিট সাইড সফ্টওয়্যার দ্বারা এটি অনেক ভাষায় উপলব্ধ।

ডাউনলোড করুন: কোড বানান পরীক্ষা VSCode এক্সটেনশন (ফ্রি)

উপরের বিভাগ থেকে ধাপ 1 থেকে 6 অনুসরণ করুন।
পছন্দ streetsidesoftware.code-spell-checker-*.vsix ফাইল আপনি সবেমাত্র ডাউনলোড করেছেন।

দ্য কোড বানান পরীক্ষা এক্সটেনশন এখন ইনস্টল করা উচিত। একটি নতুন মার্কডাউন ফাইল খুলে এবং ভুল বানান টাইপ করে এটি পরীক্ষা করুন।

VSCode স্ট্যাটাস বারের নীচের ডানদিকে একটি সূচক সহ চারটি বানান ত্রুটি দেখায়।

ইন্টারফেসের নীচে ডানদিকে ত্রুটির সংখ্যা সহ এই শব্দগুলির নীচে আপনার একটি নীল স্কুইগ্লি লাইন দেখতে হবে:

VSCode settings.json ফাইলটি কাস্টম কোড যোগ করে খুলুন।

এরর স্কুইগল কাস্টমাইজ করুন

এই বানান চেক এক্সটেনশনের সাথে সবচেয়ে বড় সমস্যা হল দুর্বল নীল রঙটি স্কুইগলের জন্য ব্যবহৃত হয় যা ত্রুটি সনাক্ত করে। এটি অন্ধকার থিমের পটভূমিতে মিশে যায় এবং অন্যান্য মার্কডাউন উপাদানগুলির জন্য পুনরায় ব্যবহার করা হয়।

আপনি এটিকে একটি গাঢ় লাল রঙে পরিবর্তন করার চেষ্টা করতে পারেন যেমন আপনি একটি ওয়ার্ড প্রসেসরে দেখতে চান:

ক্লিক করুন গিয়ার আইকন ইন্টারফেসের নিচের বাম কোণে।
ক্লিক করুন সেটিংস .
ক্লিক করুন ওয়ার্কবেঞ্চ , তারপর চেহারা .
নিচে স্ক্রোল করুন কালার কাস্টমাইজেশন :
ক্লিক settings.json এ এডিট করুন .
নিম্নলিখিত কোডটি এডিটরে পেস্ট করুন যা একটি নতুন ট্যাবে খোলে:
```
"editorInfo.foreground": "#ff0000"
```
এবং ফাইল সংরক্ষণ করুন।

এখন আপনি যদি একটি শব্দের বানান ভুল করেন, VSCode এটিকে একটি উজ্জ্বল লাল স্কুইগল দিয়ে সজ্জিত করবে:

একটি সঠিকভাবে ফরম্যাট করা HTML ডকুমেন্ট VSCode-এ খোলা।

মিথ্যা ইতিবাচক উপেক্ষা

বানান পরীক্ষক নির্দিষ্ট শিল্প-নির্দিষ্ট পদ বা কোম্পানির নামের মতো সঠিক বিশেষ্য চিনতে পারে না। উপরের স্ক্রিনশটে, উদাহরণস্বরূপ, VSCode একটি ভুল বানান হিসাবে সংক্ষিপ্ত রূপ 'distro' হাইলাইট করে।

এই শব্দগুলিকে ত্রুটি হিসাবে দেখা বন্ধ করতে, আপনি সেগুলিকে আপনার সাথে যুক্ত করতে চাইবেন৷ ব্যবহারকারীর সেটিংস .

আপনি যে শব্দটিকে বানান পরীক্ষক উপেক্ষা করতে চান তার উপর ডান-ক্লিক করুন।
উপর হোভার বানান এবং নির্বাচন করুন ব্যবহারকারীর সেটিংসে শব্দ যোগ করুন .

এখন থেকে, বানান পরীক্ষা আর এই শব্দগুলিকে ভুল হিসাবে চিহ্নিত করবে না:

VSCode সেটিংস > এক্সটেনশন > মার্কডাউন > মার্কডাউন: স্টাইল মেনু।

HTML এক্সটেনশন হিসাবে কপি মার্কডাউন ইনস্টল করুন

এর পরে, HTML এক্সটেনশন হিসাবে কপি মার্কডাউন ইনস্টল করুন যাতে আপনি ফর্ম্যাট করা মার্কডাউন কপি এবং পেস্ট করতে পারেন।

ডাউনলোড করুন: HTML হিসাবে মার্কডাউন কপি করুন VSCode এক্সটেনশন (ফ্রি)

উপরের বিভাগ থেকে ধাপ 1 থেকে 6 অনুসরণ করুন।
পছন্দ jerriepelser.copy-markdown-as-html-1.1.0.vsix ফাইল আপনি সবেমাত্র ডাউনলোড করেছেন।

এখন আপনি VSCode থেকে মার্কডাউন কপি করতে সক্ষম হবেন এবং একটি CMS-এ পরিষ্কার HTML হিসাবে পেস্ট করতে পারবেন। এটি পরীক্ষা করতে:

কিছু মার্কডাউন পাঠ্য নির্বাচন করুন।
খোলা কমান্ড প্যালেট মধ্যে দেখুন মেনু, বা টিপে CTRL+Shift+P .
পছন্দ করা মার্কডাউন: HTML হিসাবে কপি করুন :
একটি নতুন HTML ফাইলে কপি করা মার্কডাউন পেস্ট করুন।

আপনার দেখতে হবে যে কপি করা মার্কডাউন সঠিকভাবে HTML হিসাবে পেস্ট করা হয়েছে:

পূর্বরূপ ফলক কাস্টমাইজ করা

ডিফল্টরূপে, পূর্বরূপ ফলকে বর্তমান VSCode থিমের মতো একই শৈলী থাকবে।

এই নিবন্ধের মার্কডাউন হুয়াক্যাট দ্বারা অফিস থিম ব্যবহার করে VSCode-এ খোলা।

যাইহোক, আপনি আপনার সামগ্রীর চূড়ান্ত গন্তব্যকে আরও ঘনিষ্ঠভাবে প্রতিফলিত করতে পূর্বরূপ চাইতে পারেন। আপনি প্রিভিউ ফলকটিকে কাস্টমাইজ করতে পারেন যাতে আপনার মার্কডাউনটি আপনি যে ওয়েবসাইটে প্রকাশ করছেন সেখানে ইতিমধ্যেই রয়েছে।

আপনি চাইলে যেকোনো ওয়েবসাইট ব্যবহার করতে পারেন; নিম্নলিখিত শৈলী MUO থেকে নেওয়া হয়েছে. শুধু ফন্ট খুঁজে পেতে আপনার ব্রাউজারের পরিদর্শন উপাদান টুল ব্যবহার করুন এবং যেকোনো ওয়েবসাইট থেকে রং বাছাই করুন .

একটি নতুন ফাইল তৈরি করুন এবং এটির মতো কিছু নাম দিন ' CustomStyles.css '

ফাইলে নিম্নলিখিত উদাহরণ CSS কোড পেস্ট করুন:

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; 
}

এবং ফাইল সংরক্ষণ করুন।
ক্লিক করুন গিয়ার আইকন ইন্টারফেসের নিচের বাম কোণে।
ক্লিক করুন সেটিংস .
ক্লিক করুন এক্সটেনশন এবং তারপর মার্কডাউন .
নিচে স্ক্রোল করুন মার্কডাউন: শৈলী এবং ক্লিক করুন আইটেম যোগ করুন .
আপনার পথে প্রবেশ করুন CustomStyles.css ফাইল, উদাহরণস্বরূপ:
```
C:\Users\Adam\CustomStyles.css
```
ক্লিক ঠিক আছে .

একবার আপনি এইগুলি তৈরি করে ফেললে, আপনার একটি প্রিভিউ ফলক দিয়ে শেষ করা উচিত যা দেখতে অনেকটা এই নিবন্ধটির মতো।

আবার, আমি MUO-তে আমার ব্রাউজারের পরিদর্শন উপাদান টুল ব্যবহার করে এই মানগুলি পেয়েছি, কিন্তু আপনি আপনার নিজের গন্তব্য ওয়েবসাইটের জন্য মানগুলি খুঁজে পেতে চাইবেন।

সম্পাদক থিম

ডিফল্ট VSCode থিম অন্ধকার এবং হালকা উভয় ক্ষেত্রেই আসে, প্রতিটির উচ্চ-কন্ট্রাস্ট সংস্করণ সহ। কিন্তু কোন ভাল কোড সম্পাদক মত, আছে এক টন দুর্দান্ত তৃতীয় পক্ষের থিম উপলব্ধ .

আপনি যদি কোড এডিটরের চেয়ে ওয়ার্ড প্রসেসরের চেহারা পছন্দ করেন, আমি huacat দ্বারা অফিস থিম সুপারিশ করি:

আপনি যদি কোড এডিটর পছন্দ করেন, সাধারণ থিম যেমন Dracula, Gruvbox, Material (নীচে স্ক্রিনশট দেখুন), এবং Nord সবই এক্সটেনশন মার্কেটপ্লেস থেকে পাওয়া যায়।

একটি নতুন থিম ইনস্টল করতে:

ক্লিক করুন গিয়ার আইকন ইন্টারফেসের নিচের বাম কোণে।
ক্লিক করুন এক্সটেনশন .
উপরে উল্লিখিত থিমগুলির মধ্যে যেকোনও অনুসন্ধান করুন বা কেবল বিভাগটি ফিল্টার করুন৷ থিম এবং কি পাওয়া যায় তা ব্রাউজ করুন।

VSCode কি চূড়ান্ত মার্কডাউন সম্পাদক?

তাহলে, VSCode কি ওয়েব সামগ্রীর জন্য চূড়ান্ত মার্কডাউন সম্পাদক? আউট অফ দ্য বক্স, সম্ভবত না. কিন্তু এটা সম্পর্কে যতটা এক্সটেনসিবল কিছু হতে পারে.

ওয়ার্ড কাউন্টার, বানান পরীক্ষক, এইচটিএমএল হিসাবে মার্কডাউন অনুলিপি করুন, কাস্টমাইজেশনের পূর্বরূপ এবং থিমগুলি কেবল পৃষ্ঠটি স্ক্র্যাচ করুন। VSCode-এর জন্য উপলব্ধ এক্সটেনশনে পূর্ণ একটি ইকোসিস্টেম রয়েছে এবং আপনি এটিকে নিজের করে নিতে পারবেন।