Skip to content
Skip to contents
Skip to reading controls

Search skills⌘K

Setting the file. One moment.

This file

Type

Size

Lines

Position

antfu
/
antfu/skills

Code Import Snippet · Slidev · antfu/skills · Skills Docs

Repo No. 94 · Slidev

↖Back to the cover

Antfu Design
Antfu
Nitro
Nuxt
Pinia
pnpm
Slidev
Tsdown
Turborepo
Unocss
Vite
Vitepress
Vitest
Vue Best Practices
Vue Router Best Practices
Vue Testing Best Practices
Vue
Vueuse Functions
Web Design Guidelines

19 skills · 40 min

Skill 07 · Slidev

Subchapter 7.10

Code Import Snippet

references/code-import-snippet.mdMarkdown865 BView on GitHub

Import Code Snippets

Import code from external files into slides.

Basic Syntax

7Up to skill 7Slidev

On this page

Import Code Snippets
Basic Syntax
Import Region
Specify Language
With Features
Placeholder
Monaco Write

This file

Number: 7.10
Position: 10 of 55
Type: Markdown
Size: 865 B

Nearby

Previous Code Groups
Next Code Line Highlighting

Source

md

<<< @/snippets/snippet.js

@ = package root directory. Recommended: place snippets in @/snippets/.

Import Region

Use VS Code region syntax:

md

<<< @/snippets/snippet.js#region-name

Specify Language

md

<<< @/snippets/snippet.js ts

With Features

Combine with line highlighting, Monaco editor:

md

<<< @/snippets/snippet.js {2,3|5}{lines:true}
<<< @/snippets/snippet.js ts {monaco}{height:200px}

Placeholder

Use {*} for line highlighting placeholder:

md

<<< @/snippets/snippet.js {*}{lines:true}

Monaco Write

Link editor to file for live editing:

md

<<< ./some-file.ts {monaco-write}

ReferenceCode Groups ReferenceCode Line Highlighting

references/code-import-snippet.md

(opens in a new tab)

Raw file(opens in a new tab)

antfu/skills(opens in a new tab)