Code related

Dark Mode Compatible

All the code block features are fully compatible with dark mode.
Toggle dark mode to see the styles.

Code highlight

This feature integrate

Shiki

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

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

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

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

Default theme reference - highlight option

Code title

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

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

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

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
1
2
3
4
5
6
7
```svelte ln
<script>
  const msg = 'world!'
</script>

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

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

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

Focus

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

Not Supported

Multi // [svp! fc] in one single code block is not supported

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

Output

Title

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

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

Output

<h1>This is an async svelte live code</h1>
svelte
Click fold/expand code
Live code in live code is not supported

The nested live code block below would be rendered as normal highlight code block.

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

Combine features

You can use more than one features mentioned above:

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

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]])
md

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
txt
  • @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
Tip

Notice that start line and end line both would be included in the final content.

Cheat list

Alias Equals Function
~~ hl highlight single line
~~:num hl:num highlight num line from current line
++ df:+ diff add line
-- df:- diff subtract line
!! fc focus single line
!!:num fc:num focus num line from current line
Last update at: 2024/02/20 08:44:13