Code related

Code highlight

This feature integrate Shiki

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

<h1>
  Hello, {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 msg  = 'world!'
</script>

<h1>
  Hello, {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 msg  = 'world!'
</script>

<h1>
  Hello, {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 msg  = 'world!' 

  function hello () {
    const foo  = 'bar' 
    const bar  = foo 

    return foo 
  }
</script>

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

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

  function hello() {
    const foo = 'bar' 
    const bar = foo

    return foo
  }
</script>

<h1>
  Hello, {msg}  
</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!' 
const newMsg = 'new world!' 

function hello() {
  console.log('Hello', msg) 
  console.log('Hello', newMsg) 
}
```

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>

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

Markdown live code

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

Input

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

Output

const foo = 'bar'

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

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

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 --'  
  const newMsg1 = 'Some msg with both focus, diff ++, highlight line'  
  const newMsg2 = 'Some msg with both focus, diff ++' 
}
```

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