কোড সম্পর্কিত

ডার্ক মোড কম্পাটিবল

সকল কোড ব্লক ফিচার ডার্ক মোডের সাথে পুরোপুরি কম্পাটিবল।
স্টাইল দেখার জন্য ডার্ক মোড ব্যবহার করুন।

কোড হাইলাইট

এই ফিচারটি

Shiki
সমন্বয় করেছে।

<script>
  const  = 'world!'
</script>

<h1>
  Hello, {}
</h1>
svelte
```svelte
<script>
  const msg = 'world!'
</script>

<h1>
  Hello, {msg}
</h1>
```
md
Click fold/expand code

আপনি সাপোর্টেড ল্যাঙ্গুয়েজ এবং লাইট/ডার্ক মোডের জন্য থিম কাস্টমাইজ করতে পারবেন। আরো বিস্তারিতে জানতে

ডিফল্ট থিম রেফারেন্স - হাইলাইট অপশন

কোড টাইটেল

HelloWorld.svelte
<script>
  const  = 'world!'
</script>

<h1>
  Hello, {}
</h1>
svelte
```svelte title="HelloWorld.svelte"
<script>
  const msg = 'world!'
</script>

<h1>
  Hello, {msg}
</h1>
```
md
Click fold/expand code

লাইন নম্বর

কোড ব্লকের মেটা ফিল্ডে ln যুক্ত করার দ্বার লাইন নম্বর প্রদর্শন করানো যাবে।

<script>
  const  = 'world!'
</script>

<h1>
  Hello, {}
</h1>
svelte
1
2
3
4
5
6
7
```svelte ln
<script>
  const msg = 'world!'
</script>

<h1>
  Hello, {msg}
</h1>
```
md
Click fold/expand code

লাইন হাইলাইট

যে লাইনটি হাইলাইট করতে চান সেটাতে // [svp! hl] // [svp! ~~] ব্যবহার করুন একাধিক লাইন হাইলাইট করতে // [svp! hl:num] or // [svp! ~~:num] ব্যবহার করুন।

<script>
  const  = 'world!' 

  function () {
    const  = 'bar' 
    const  = 

    return 
  }
</script>

<h1>
  Hello, {}  
</h1>
svelte
```svelte
<script>
  const msg = 'world!' // [svp! hl]

  function hello() {
    const foo = 'bar' // [svp! hl:2]
    const bar = foo

    return foo
  }
</script>

<h1>
  Hello, {msg}  // [svp! ~~]
</h1>
```
md
Click fold/expand code

পার্থক্য

নতুন লাইন যুক্ত করা দেখাতে // [svp! df:+] or // [svp! ++] লাইন বিয়োগ করা দেখাতে // [svp! df:-] or // [svp! --]

-
+
-
+
const msg = 'world!' 
const newMsg = 'new world!' 

function hello() {
  console.log('Hello', msg) 
  console.log('Hello', newMsg) 
}
js
```js
const msg = 'world!' // [svp! df:-]
const newMsg = 'new world!' // [svp! df:+]

function hello() {
  console.log('Hello', msg) // [svp! --]
  console.log('Hello', newMsg) // [svp! ++]
}
```
md
Click fold/expand code

ফোকাস

লাইন ফোকাস করতে // [svp! fc] or // [svp! !!] ব্যবহার করুন। একাধিক লাইন ফোকাস করতে // [svp! fc:num] or // [svp! !!:num] ব্যবহার করুন।

সাপোর্ট করবে না

এক কোড ব্লকে একাধিক // [svp! fc] সাপোর্ট করবে না।

<div>
  this would be blur
</div>
<div>
  this would be blur
</div>
<h1> 
  this would be focus
</h1>
<div>
  this would be blur
</div>
<div>
  this would be blur
</div>
html
```html
<div>
  this would be blur
</div>
<div>
  this would be blur
</div>
<h1> // [svp! !!:3]
  this would be focus
</h1>
<div>
  this would be blur
</div>
<div>
  this would be blur
</div>
```
md
Click fold/expand code

Markdown লাইভ কোড

md lang এবং live prop ব্যবহার করলে কোডের রেজাল্ট এবং তার নিচে Markdown এর সোর্স কোড দেখাবে।

Input

````md live
### Title
* item1
* item2
```js
const foo = 'bar'
```
````
md

Output

Title

  • item1
  • item2
const foo = 'bar'
js
### Title
* item1
* item2
```js
const foo = 'bar'
```
md
Click fold/expand code

Svelte লাইভ কোড

svelte lang এবং live prop ব্যবহার করলে কোডের রেজাল্ট এবং তার নিচে সোর্স কোড দেখাবে।

Input

```svelte live ln title=Counter.svelte
<script>
  let count = 0

  const handleClick = () => {
    count++
  }
</script>
<button on:click={handleClick}>
  You've clicked {count} times
</button>
<style>
  button {
    background-color: purple;
    color: white;
    outline: 0;
    border: 0;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
  }
</style>
```
md

Output

Counter.svelte
<script>
  let  = 0

  const  = () => {
    ++
  }
</script>
<button on:click={}>
  You've clicked {} times
</button>
<style>
  button {
    background-color: purple;
    color: white;
    outline: 0;
    border: 0;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
  }
</style>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Click fold/expand code

Async svelte লাইভ কোড

ডেমোর অংশ রেন্ডার করে যে js ফাইল, সেটা একক js ফাইলে বান্ডল হবে এবং অ্যাসিঙ্ক্রোনাসলি পেজে লোড হবে।

Input

```svelte live async
<h1>This is an async svelte live code</h1>
```
md

Output

<h1>এটি একটি async svelte লাইভ কোড</h1>
svelte
Click fold/expand code
লাইভ কোডের ভিতরে লাইভ কোড সাপোর্ট করবে না

নিচের নেস্টেড লাইভ কোড ব্লক সাধারণ হাইলাইট কোড ব্লক হিসেবে রেন্ডার হবে।

```md live
### Title
```
md
````md
```md live
### Title
```
````
md
Click fold/expand code

একাধিক ফিচার একত্রিত করা

আপনি উল্লেখিত একাধিক ফিচার একসাথে ব্যবহার করতে পারবেনঃ

complex-example.js
-
+
+
function hello() {
  const oldMsg = 'Some msg with focus, diff --'  
  const newMsg1 = 'Some msg with both focus, diff ++, highlight line'  
  const newMsg2 = 'Some msg with both focus, diff ++' 
}
js
1
2
3
4
5
```js ln title="complex-example.js"
function hello() {
  const oldMsg = 'Some msg with focus, diff --' // [svp! --] // [svp! !!:3]
  const newMsg1 = 'Some msg with both focus, diff ++, highlight line' // [svp! ++] // [svp! ~~]
  const newMsg2 = 'Some msg with both focus, diff ++' // [svp! ++]
}
```
md
Click fold/expand code

কোড ইমপোর্ট

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

@code(/path/to/file[,startLine[,endLine]])
md

পাথ শুরু হবে . বা / দিয়ে

  • . হচ্ছে বর্তমান md ফাইলের রিলেটিভ পাথ
  • / হচ্ছে প্রজেক্টের রুটের রিলেটিভ পাথ, যেখানে আপনি vite কমান্ড চালান।

উদাহরণস্বরুপ, আপনার ফাইল ট্রি এমন হলে

├─ src
│  ├─ routes
│  │  ├─ foo
│  │  │  ├─ +page.md
│  │  │  ├─ Foo.svelte
txt
  • @code(./Foo.svelte) - Foo.svelte থেকে সকল কোড ইমপোর্ট করা
  • @code(/src/routes/foo/Foo.svelte) - Foo.svelte থেকে সকল কোড ইমপোর্ট করা
  • @code(./Foo.svelte,5,10) - Foo.svelte এর ৫ম থেকে ১০তম লাইন ইমপোর্ট করা
  • @code(/src/routes/foo/Foo.svelte,10,20) - Foo.svelte এর ১০ম থেকে ২০তম লাইন ইমপোর্ট করা
টিপ

লক্ষ্য করুন, ফাইন কন্টেন্টে শুরুর লাইন এবং শেষ লাইন উভয়টিই দেখাবে।

চিট লিস্ট

সংক্ষিপ্ত রূপ যার বিকল্প ফাংশন
~~ hl এক লাইন হাইলাইট করা
~~:num hl:num একটি নির্দিষ্ট লাইন থেকে বর্তমান লাইন হাইলাইট করা
++ df:+ লাইন যুক্ত করার ফলে সৃষ্ট পার্থক্য দেখানো
-- df:- লাইন বিয়োগ করার ফলে সৃষ্ট পার্থক্য দেখানো
!! fc এক লাইন ফোকাস করা
!!:num fc:num কটি নির্দিষ্ট লাইন থেকে বর্তমান লাইন ফোকাস করা
Last update at: 2024/07/19 00:58:09