ভিজ্যুয়াল স্টুডিও কোড থিমিং ঝামেলা ছাড়াই: একটি এক্সটেনশন তৈরি করা | css-ট্রিকস

কয়েক বছর আগে, যখন আমি ভিএস কোড থিম তৈরির বিষয়ে সারাহ ড্রাসনারের নিবন্ধটি পড়েছিলাম, তখন আমি নীরবে মনে মনে ভেবেছিলাম, এটা অনেক কাজের… আমি কখনই থিম বানাবো না…

কিন্তু দেখুন, আমি এগিয়ে গিয়ে একটি তৈরি করেছি – এবং বেশিরভাগ থিমগুলিতে কাজ করতে ছয় ঘণ্টারও কম সময় লেগেছে, তারপর আমার চূড়ান্ত পরিবর্তনগুলিকে সূক্ষ্মভাবে তৈরি করতে এক বা দুই দিন সময় লেগেছে।

এই নিবন্ধে, আমি এই থিমটি তৈরি করার আমার প্রক্রিয়ার মাধ্যমে আপনাকে নিয়ে যেতে চাই – সেইসাথে এটি তৈরি করার জন্য আমি যে বাস্তব পদক্ষেপগুলি নিয়েছিলাম।

আমি মনে করি প্রক্রিয়া সম্পর্কে কথা বলা শক্তিশালী কারণ আমি ওখানে চলে গেলাম না, খুব বেশি কাজ আছে প্রতি ওহ, আমি এটা করতে পারি, এটা হয়ে গেছে..? সব কয়েক ঘন্টার মধ্যে. (বাকিটা শুধু পলিশ করার সময় কাটানো)।

আমি কখনই একটি ভিএস কোড থিম তৈরি করতে চাইনি…

আমি আমার ওয়েবসাইট রিডিজাইন করার মাঝখানে ছিলাম। আমি একটি সুপার ডুপার পুরানো ডিজাইনে কাজ করছি যা আমি বছরের পর বছর ধরে পরিবর্তন করতে চাইছি – এবং আমি অবশেষে এটির কাছাকাছি চলে এসেছি।

আমি আমার পুরানো ডিজাইনে কোড স্নিপেটের জন্য ড্রাকুলা থিম ব্যবহার করেছি এবং এটি কাজ করেছে কারণ ড্রাকুলাই একমাত্র জিনিস যা আমার অন্যথায় পরিষ্কার ডিজাইনে রঙের স্প্ল্যাশ প্রদান করে।

কিন্তু এটি আমার নতুন সাইট ডিজাইনের সাথে সঠিকভাবে কাজ করেনি।

আমি যা করতে চেয়েছিলাম তা হল কোড ব্লকের জন্য সিনট্যাক্স হাইলাইটিং উন্নত করা যাতে তারা বাকি সাইটের সাথে আরও সারিবদ্ধ হয়।

এটাই ছিল সবকিছুর শুরু।

শিকি সিএসএস ভেরিয়েবল থিমিং এটিকে সহজ করে তুলেছে

আমি আমার ওয়েবসাইটের জন্য Astro ব্যবহার করি। শিকি হল একটি সিনট্যাক্স হাইলাইটার যা ডিফল্টরূপে অ্যাস্ট্রোতে তৈরি।

কিছু দ্রুত গবেষণার মাধ্যমে, আমি বুঝতে পেরেছি যে শিকি আপনাকে CSS ভেরিয়েবলের সাথে থিম তৈরি করতে দেয় – এবং আমাদের বেছে নেওয়ার জন্য শুধুমাত্র কয়েকটি রঙ ছিল।

এটা খুব জটিল বলে মনে হচ্ছে না, তাই CSS ভেরিয়েবলের উপর ভিত্তি করে Shiki থিম তৈরি করতে সাহায্য করার জন্য আমি একটি AI পেয়েছি। আপনি যদি Astro ব্যবহার করেন তাহলে এখানে CSS এবং JavaScript আপনার প্রয়োজন হবে:

:root {
  --shiki-foreground: #eeeeee;
  --shiki-background: #333333;
  --shiki-token-constant: #660000;
  --shiki-token-string: #770000;
  --shiki-token-comment: #880000;
  --shiki-token-keyword: #990000;
  --shiki-token-parameter: #aa0000;
  --shiki-token-function: #bb0000;
  --shiki-token-string-expression: #cc0000;
  --shiki-token-punctuation: #dd0000;
  --shiki-token-link: #ee0000;
}

pre.shiki,
pre.astro-code {
  padding: 1rem;
  border-radius: 0.5rem;
  color: var(--shiki-foreground);
  background-color: var(--shiki-background);
  overflow-x: auto;
}

pre.shiki code,
pre.astro-code code {
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
}

import { createCssVariablesTheme } from 'shiki/core'

const shikiVariableTheme = createCssVariablesTheme({
  name: 'css-variables',
  variablePrefix: '--shiki-',
  fontStyle: true,
})

export default defineConfig ({
  // ...
  markdown: {
    shikiConfig: {
      theme: shikiVariableTheme
    }
  }
})

আমি ইতিমধ্যে আমার ওয়েবসাইটের জন্য যে রঙগুলি ব্যবহার করেছি সেগুলির সাথে আমি একটি দ্রুত পরীক্ষা করেছি এবং এটিকে বিভিন্ন জনপ্রিয় থিমের সাথে তুলনা করেছি যেমন Dracula, Sarah’s Night Owl, এবং Moonlight 2৷

এটি আমাকে আমার বিষয়কে আরও একটু এগিয়ে নেওয়ার আত্মবিশ্বাস দিয়েছে – কারণ সিনট্যাক্স হাইলাইটিং সঠিক দিকের আকার ধারণ করছে।

কিন্তু, এটিকে আরও এগিয়ে নিতে, আমাকে CSS ভেরিয়েবল থিমিং ত্যাগ করতে হয়েছিল এবং TextMate টোকেনগুলিতে ডুব দিতে হয়েছিল। এটি প্রয়োজনীয় ছিল কারণ কিছু কোড ব্লক একেবারে ভয়ানক লাগছিল এবং টেক্সটমেট টোকেনগুলি কীভাবে এবং কী রঙ পায় তার আরও বিস্তারিত নিয়ন্ত্রণ সরবরাহ করে।

এখানেই “কঠিন” অংশ শুরু হয়।

টেক্সটমেট স্কোপের সাহায্যে এআই পাওয়া

সৌভাগ্যক্রমে, AI সাহায্য করার জন্য এখানে আছে। যদি AI এখানে না থাকত, আমি সম্ভবত এই মুহুর্তে ছেড়ে দিতাম।

এখানে আমি আমার AI কি করতে পেরেছি:

1. আমি বলেছিলাম আমি একটি কাস্টম থিম তৈরি করতে চেয়েছিলাম।
2. আমি এটিকে আমার জন্য একটি ভারা তৈরি করতে বলেছি।
3. আমি এটিকে মুনলাইট 2 এর থিম ফাইলগুলিকে একটি রেফারেন্স হিসাবে দেখতে এবং তার উপর ভিত্তি করে একটি টেক্সটমেট স্কোপ টোকেন তৈরি করতে বলেছি।

আমি এই মত শব্দার্থিক কীওয়ার্ডে ব্যবহৃত রং একত্রিত করতে এটি খুঁজে পেয়েছি foreground, background, keyword – শিকি সিএসএস ভেরিয়েবল থিমের মতো।

এবং আমি তাকে একটিতে সব রং আঁকতে বললাম color বস্তু যাতে আমি একটি পেতে পারি palette একটি বস্তু যা শুধুমাত্র শব্দার্থিক নাম ধারণ করে।

এটি মোটামুটি কী তৈরি করেছে তা এখানে:

const colors = {
  purple: '...',
  blue: '...',
  // ...
}

const palette = {
  foreground: '...',
  background: '...',
  // ...
}

export default {
  colors: {
    // Used for theming the text editor
  },
  displayName: 'Display Name of your Theme',
  name: 'your-theme-name',
  tokenColors: [
    {
      name: 'Scope name (optional)',
      scope: [/*scopes used*/],
      settings: {
        foreground: /* change color */,
        background: /* background of the text */,
        fontStyle: /* normal, bold or italic */,
      }
    }
  ]
}

জিনিসগুলি কনফিগার করার জন্য আপনাকে VS কোডের জন্য JSON প্রদান করতে হবে, তাই আমি একটি বিল্ড স্ক্রিপ্ট তৈরি করতে AI পেয়েছি যা উপরের ফর্ম্যাটটিকে একটিতে রূপান্তর করে .json ফাইল

আপনি বিল্ড স্ক্রিপ্ট এবং আমি গিটহাব রেপোতে যা ব্যবহার করেছি তা খুঁজে পেতে পারেন।

স্থানীয়ভাবে ডিবাগিং

আমার ওয়েবসাইটে সিনট্যাক্স হাইলাইট ডিবাগ করা অসম্ভব ছিল কারণ যখনই আমি একটি ভেরিয়েবল পরিবর্তন করি তখন আমাকে ম্যানুয়ালি সার্ভারটি পুনরায় চালু করতে হয়েছিল।

তাই, আমি এআইকে একটি পরামর্শ চেয়েছি।

এটি বলেছে যে আমি স্থানীয় উন্নয়নের জন্য ভিএস কোডের এক্সটেনশন হোস্ট ব্যবহার করতে পারি, তারপরে নির্মাণের জন্য এগিয়ে যাই .vscode/launch.json নিম্নলিখিত বিষয়বস্তু সহ ফাইল করুন:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Extension",
      "type": "extensionHost",
      "request": "launch",
      "args": [
        "--extensionDevelopmentPath=${workspaceFolder}"
      ]
    }
  ]
}

এটি চালানোর জন্য আপনি ব্যবহার করতে পারেন F5 (উইন্ডোজ) বা F.N + F5 (ম্যাক) এবং একটি নতুন সম্পাদক উইন্ডো পপ আপ হবে – এই নতুন উইন্ডোতে, আপনি আপনার কাস্টম থিমে থিম পরিবর্তন করতে পারেন।

কোন উইন্ডোজ এক্সটেনশন হোস্ট ব্যবহার করছে তা সনাক্ত করা বেশ সহজ কারণ:

• আপনি যদি আপনার থিম পরিবর্তন করেন, তাহলে সেই উইন্ডোটি আপনার অন্যান্য ওপেন টেক্সট এডিটরদের থেকে আলাদা থিম থাকবে।
• এক্সটেনশন হোস্ট কীওয়ার্ডটি শিরোনামে বিশিষ্ট।

এখন, এই মুহুর্তে সবকিছু ঝাপসা, তাই আমি মনে করতে পারছি না যে আপনার নিম্নলিখিতগুলি অন্তর্ভুক্ত করার দরকার আছে কিনা package.json এক্সটেনশন হোস্টে কাজ করার জন্য থিম স্যুইচ করার জন্য ফাইল। যদি হ্যাঁ, অন্তর্ভুক্ত করুন:

{
  "contributes": {
    "themes": [
      {
        "label": "Your Theme Name",
        "uiTheme": "vs-dark",
        "path": ".json"
      }
    ]
  }
}

টেক্সটমেট স্কোপ বোঝা

প্রথমে, আমি ছবিগুলি কপি-পেস্ট করেছি এবং আমি যে রঙগুলি বেছে নিয়েছি সে অনুযায়ী বিভিন্ন টোকেন সামঞ্জস্য করার জন্য AI পেতে চেষ্টা করেছি। কিন্তু এটা খুব দ্রুত হতাশাজনক হয়ে ওঠে।

দুটির মধ্যে একটি:

• এআই টেক্সটমেট স্কোপটি ভুল পেয়েছে, বা
• এটা অন্য কিছু দ্বারা ওভাররাইট করা হয়েছে.

বলতে পারিনি। কিন্তু সৌভাগ্যক্রমে আপনি “ডেভেলপার: ইন্সপেক্টর এডিটর টোকেন এবং স্কোপস” কমান্ডের সাহায্যে টেক্সটমেট স্কোপগুলি সহজেই ডিবাগ করতে পারেন।

আপনি যখন এই মোডে থাকবেন, আপনি যেকোনো পাঠ্যে ক্লিক করতে পারেন এবং একটি উইন্ডো পপ আপ হবে৷ এটিতে টেক্সটমেট সুযোগ সামঞ্জস্য করার জন্য প্রয়োজনীয় সমস্ত তথ্য রয়েছে।

এখানে কী ঘটছে তা কীভাবে পড়তে হয়:

• অগ্রভাগ: আপনাকে বর্তমান সক্রিয় পরিসীমা বলে। এই ক্ষেত্রে, সক্রিয় সুযোগ হয় variable.
• টেক্সটমেট স্কোপ: এই নির্দিষ্ট টোকেনের জন্য আপনি কোন উপলব্ধ TextMate স্কোপ ব্যবহার করতে পারেন তা আপনাকে বলে।

টেক্সটমেট স্কোপগুলি একটি আকর্ষণীয় উপায়ে কাজ করে। আমি পরীক্ষা করে নিম্নলিখিত আবিষ্কার করেছি, তাই এটি 100% সঠিক নাও হতে পারে:

1. আপনি উপলব্ধ সুযোগের যে কোনো অংশ ব্যবহার করতে পারেন. variable, variable.propএবং variable.prop.css সবাই কাজ করে।
2. আপনি আরও বৈশিষ্ট্য উল্লেখ করে নির্দিষ্টতা বৃদ্ধি করতে পারেন। variable.prop.css > variable.prop > variable স্পেসিফিকেশন শর্তাবলী.
3. নিম্ন সুযোগের চেয়ে উচ্চতর সুযোগ আরও নির্দিষ্ট। variable > meta.function.misc.css.
4. আপনি CSS নির্বাচকদের মত তাদের সাথে অন্যান্য স্কোপ যোগ করতে পারেন যদি আপনি একটি উচ্চ সুযোগ ওভাররাইট করতে হবে. meta.function variable > variable

আমি থিম জন্য রং নির্বাচন কিভাবে

একটি থিম তৈরি করার সময় এটি সবচেয়ে গুরুত্বপূর্ণ বিষয়। থিম থাকার কোন মানে নেই যদি সিনট্যাক্স হাইলাইটিং কোড পড়ার ক্ষেত্রে বিকাশকারীকে সমর্থন না করে।

এখানে আমার মনে আসা দুটি নিবন্ধ আছে:

মূলত, দুটি নিবন্ধ থেকে আমি যে নীতিগুলি নিয়েছি তা হল:

• আমরা হাইলাইট স্ট্যান্ড আউট চাই.
• আপনি যদি একই হালকাতা এবং ক্রোমা ব্যবহার করেন তবে রঙগুলি একে অপরের মতো দেখাবে এবং তাদের আলাদা করা কঠিন হবে।
• সবকিছু হাইলাইট করা হলে, কিছুই হাইলাইট করা হয় না।
• সবকিছু গুরুত্বপূর্ণ হলে, কিছুই গুরুত্বপূর্ণ নয়।

মূলত, আমরা কথা বলছি দ্বন্দ্বের নীতি ডিজাইন করার সময়। যেহেতু আমি ইতিমধ্যেই কাউকে পড়ার জন্য ডিজাইন করছি, তাই পরবর্তী ধারনাগুলো মাথায় এসেছিল:

1. আমি কিভাবে আমার চোখ গাইড করব?
2. আমার দেখতে/জানার জন্য গুরুত্বপূর্ণ উপাদানগুলি কী কী?
3. কোন উপাদান কম গুরুত্বপূর্ণ?

এটি দিয়ে, আমি কাজ শুরু করেছি:

• Functions এবং methods গুরুত্বপূর্ণ ছিল তাই তাদের শক্তিশালী হতে হবে, তাই আমি ব্যবহার করেছি cyan যা আমার প্যালেটের সবচেয়ে শক্তিশালী রঙ।
• export কীওয়ার্ডটিও গুরুত্বপূর্ণ কারণ এটি একটি রপ্তানির প্রতীক!
• Keywords লাইক import এবং function বরং চুপ করা যায় purple এটা
• Strings এটা সম্ভব green – কারণ তারা একটি JSON ফাইলের মধ্যে পাঠ্যের তালিকা হিসাবে আরও আকর্ষণীয় দেখায়।

আমি বাকি রঙগুলির সাথে কিছুটা খেলেছি, কিন্তু শেষ পর্যন্ত আমি নিম্নলিখিতগুলির সাথে স্থির হয়েছি:

• Constants হয় orange কারণ এগুলো চেনা একটু সহজ
• Variables হয় white-ইশ কারণ এটি পাঠ্যের বড় অংশ – সেগুলিতে রঙ যোগ করা টনস্কি দ্বারা উল্লিখিত “ক্রিসমাস লাইট ডায়রিয়া” প্রভাব তৈরি করে।
• Properties হয় blue কারণ তারা কাজের ঘোড়ার মতো যার রঙের পার্থক্য প্রয়োজন, কিন্তু খুব বেশি মনোযোগ আকর্ষণ করার জন্য যথেষ্ট নয়।

তারপর আমি HTML/Astro/Svelte এ চলে গেলাম:

• Tags লালগুলি সেখানে রয়েছে কারণ সেগুলি একরকম গুরুত্বপূর্ণ – এবং লালগুলি সায়ান থেকে পড়া সহজ৷
• Attributes হয় purple একই কারণে keywords.
• Components হয় orange কারণ তাদের আলাদা হতে হবে Tags.
• বোনাস পয়েন্ট: Tags এবং Components সম্পর্কিত – অতএব red এবং orange এটা এখানে অনুভূত হয়.

এবং, অবশেষে, CSS সিনট্যাক্স হাইলাইটিং। এই মুহুর্তে প্রায় সবকিছুই ঠিক বলে মনে হচ্ছে, ছাড়া:

• CSS Functions হওয়া উচিত cyan JS এর ​​মত।
• Punctuation নিঃশব্দ করা উচিত যাতে আমরা সহজেই পার্থক্য করতে পারি -- বাকি লেখা থেকে।
• Property এটা সম্ভব green কারণ নীল এই প্রসঙ্গে খুব ফ্যাকাশে – এবং green অন্যান্য শক্তিশালী রঙের তুলনায় এটি চোখে ভাল দেখায়।

এটি একটি দুঃখের বিষয় যে নেস্টেড ক্লাসগুলির জন্য সিনট্যাক্স হাইলাইট করা কিছুটা অগোছালো হতে থাকে (তারা)। greenকিন্তু তাদের হওয়া উচিত orange), কিন্তু আমি এটি সম্পর্কে অনেক কিছু করতে পারি না।

রঙ ডিবাগিং

VS কোড ইলেক্ট্রনে নির্মিত, তাই এটি ডিবাগ করা এবং রং পরীক্ষা করা সহজ। আমাকে যা করতে হবে তা হল DevTools চালু করা, আমি যে রঙটি পরিবর্তন করতে চাই তা পরিদর্শন করুন এবং সরাসরি আপডেট পেতে সেগুলি পরিবর্তন করুন!

আপ মোড়ানো

এই প্রক্রিয়ার সময় আমি যে সবচেয়ে গুরুত্বপূর্ণ জিনিসটি শিখেছি তা হল প্রবাহের সাথে যেতে। একটি খোলার ফলে অন্যটি হতে পারে, তারপরে আরেকটি, এবং যা “অসম্ভব” বলে মনে হয় তা “ওহ, হয়ে গেছে?” কয়েক ঘণ্টার মধ্যে।

আমি আমার থিম কল গোধূলি মহাবিশ্ব (এআই নামকরণে সাহায্য করেছে)। আপনি এটি এখানে পেতে পারেন:

আমি কিভাবে আমার এক্সটেনশন প্রকাশ করেছি? এটি একটি ছোট ফলো-আপ নিবন্ধের বিষয় যা আমি কাজ করছি।

ইতিমধ্যে, আমি যা করেছি তা আপনি যদি অনুসরণ করতে চান তবে এখানে গিটহাব রেপো। এছাড়াও এই থিমটি উন্নত করতে সম্পাদনা করার পরামর্শ দিতে বিনা দ্বিধায়!

অবশেষে, আপনি যদি আমার সৃষ্টি অ্যাডভেঞ্চার সম্পর্কে শুনতে আগ্রহী হন তবে আমার ইমেল নিউজলেটারের জন্য সাইন আপ করুন। 🙂

এটাই। পড়ার জন্য ধন্যবাদ এবং আমি আশা করি আপনি উপভোগ করেছেন!