কোড হাইলাইট

এই ফিচারটি Shiki সমন্বয় করেছে।

<script>
  const const msg: "world!"msg = 'world!'
</script>

<h1>
  Hello, {const msg: "world!"msg}
</h1>

```svelte
<script>
  const msg = 'world!'
</script>

<h1>
  Hello, {msg}
</h1>
```

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

কোড টাইটেল

<script>
  const const msg: "world!"msg = 'world!'
</script>

<h1>
  Hello, {const msg: "world!"msg}
</h1>

```svelte title="HelloWorld.svelte"
<script>
  const msg = 'world!'
</script>

<h1>
  Hello, {msg}
</h1>
```

লাইন নম্বর

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

<script>
  const const msg: "world!"msg = 'world!'
</script>

<h1>
  Hello, {const msg: "world!"msg}
</h1>

```svelte ln
<script>
  const msg = 'world!'
</script>

<h1>
  Hello, {msg}
</h1>
```

লাইন হাইলাইট

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

<script>
  const const msg: "world!"msg = 'world!' 

  function function (local function) hello(): stringhello() {
    const const foo: "bar"foo = 'bar' 
    const const bar: "bar"bar = const foo: "bar"foo

    return const foo: "bar"foo
  }
</script>

<h1>
  Hello, {const msg: "world!"msg}  
</h1>

```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>
```

পার্থক্য

নতুন লাইন যুক্ত করা দেখাতে // [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
const msg = 'world!' // [svp! df:-]
const newMsg = 'new world!' // [svp! df:+]

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

ফোকাস

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

<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>
<p>this would also be focus</p> 
<div>
  this would be blur
</div>

```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>
<p>this would also be focus</p> // [svp! fc]
<div>
  this would be blur
</div>
```

Markdown লাইভ কোড

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

const foo = 'bar' 

### Title
* item1
* item2
```js
const foo = 'bar' // [svp! hl]
```

Svelte লাইভ কোড

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

Input

```svelte live ln title=Counter.svelte
<script>
  let count = $state(0)

  const handleClick = () => {
    count++
  }
</script>
<button onclick={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>
```

Output

<script>
  let let count: numbercount = 
function $state<0>(initial: 0): 0 (+1 overload)
namespace $state
Declares reactive state.
Example:

let count = $state(0);
@seehttps://svelte.dev/docs/svelte/$state Documentation@paraminitial  The initial value$
function $state<0>(initial: 0): 0 (+1 overload)
namespace $state
Declares reactive state.
Example:

let count = $state(0);
@seehttps://svelte.dev/docs/svelte/$state Documentation@paraminitial  The initial valuestate(0)

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

Async svelte লাইভ কোড

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

Input

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

Output

<h1>এটি একটি async svelte লাইভ কোড</h1>

```md live
### Title
```

````md
```md live
### Title
```
````

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

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

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 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! ++]
}
```

কোড ইমপোর্ট

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

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

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

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

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

├─ src
│  ├─ routes
│  │  ├─ foo
│  │  │  ├─ +page.md
│  │  │  ├─ Foo.svelte

• @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 এর ১০ম থেকে ২০তম লাইন ইমপোর্ট করা

চিট লিস্ট