Code highlight

This feature integrate 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>
```

You can customize the supported languages and theme in light/dark mode. More info reference to Default theme reference - highlight option

Code title

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

Line numbers

Add ln in code block meta field would add line numbers in the rendered result.

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

Line highlight

Use // [svp! hl] // [svp! ~~] to highlight the line you want Use // [svp! hl:num] or // [svp! ~~:num] to highlight the num lines from the current line you want

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

Diff

Use // [svp! df:+] or // [svp! ++] for diff add Use // [svp! df:-] or // [svp! --] for diff subtract

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

Focus

Use // [svp! fc] or // [svp! !!] to focus line Use // [svp! fc:num] or // [svp! !!:num] to focus num lines from current line

<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 live code

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

const foo = 'bar' 

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

Svelte live code

Use svelte lang and live prop would render the result and the source codes under the result.

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 live code

The js file that render the demo part would be bundled into a single js file and load async in the page

Input

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

Output

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

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

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

Combine features

You can use more than one features mentioned above:

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

Import code

This feature can allow you to import some code directly from a file. And use the file extension name as lang to highlight the code. And you can specify the startLine and endLine to intercept the code you want.

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

Path can starts with . or /

• . is the relative path to the current md file
• / is the relative path to project root, where you start the vite command

For example you have file tree like this

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

• @code(./Foo.svelte) - import all code from Foo.svelte
• @code(/src/routes/foo/Foo.svelte) - import all code from Foo.svelte
• @code(./Foo.svelte,5,10) - import the line 10 to line 20 in Foo.svelte
• @code(/src/routes/foo/Foo.svelte,10,20) - import the line 10 to line 20 in Foo.svelte

Cheat list