@importCode
Learn how to use @importCode
function
The @importCode
function allows you to import and display code from external files in your documentation. It supports both local files and remote URLs, with features for selecting specific regions and line ranges.
Basic Usage
Import a file using a relative path:
@importCode "./path/to/file.ts"
Or using an absolute path:
@importCode "/absolute/path/to/file.ts"
Importing Remote Files
You can import code from remote URLs:
@importCode "https://example.com/file.ts"
Selecting Code Regions
You can import specific regions of code by using the #
syntax:
@importCode "./file.ts#regionName"
Multiple regions can be specified using commas:
@importCode "./file.ts#region1,region2"
Line Ranges
You can select specific line ranges using curly braces:
@importCode "./file.ts{1-10}"
Different line range formats are supported:
- Single line:
{5}
- Range:
{1-10}
- From line to end:
{5:}
- From start to line:
{:10}
- Multiple ranges:
{1-5,8-10}
Combining Regions and Line Ranges
You can combine regions with line ranges:
@importCode "./file.ts#regionName{1-10}"
Path Aliases
To avoid long relative paths, you can configure path aliases in your docs.json
:
{ "paths": { "@my-package/*": ["../my-package/src/*"], "@livesession-go/*": ["https://github.com/livesession/livesession-go/*"] } }
Then use them in your imports:
@importCode "@my-package/components/Button.tsx"
Alternative Syntax
You can also use parentheses for the import path:
@importCode("./file.ts")
Language Detection
The function automatically detects the programming language based on the file extension.
Show your support! Star us on GitHub ⭐️