Code blocks

The :code directive displays copyable, syntax-highlighted code snippets and terminal output. It supports text, leaf and container declarations.

Properties

Name	Type	Description	Default
`language`	string	Language for syntax highlighting (leaf/container only). Full list below.	-
`showLineNumbers`	boolean	Displays line numbers (leaf/container only).	`true` if `language` is set
`showCopyAction`	boolean	Displays the copy button.	`true` if `showLineNumbers` is `true`
`highlightLines`	string	Comma-separated line numbers and ranges to highlight.	-
`highlightLinesStart`	number	Starting index used to track highlighted lines.	-
`lineNumberStart`	number	First line number to display (>= 1).	`1`
`copyAutoReturn`	boolean	Appends a newline to the copied text (auto-executes in a terminal).	-

Inline code variant (text)

Rendered:

Your current region is us-west-2.

Source:

1
Your current region is :code[us-west-2]{showCopyAction=true}.

Basic leaf with highlighting

Rendered:

1
console.log('Hello world!')

Source:

1
::code[console.log('Hello world!')]{language=js}

Container with a language

Rendered:

1
2
3
4
5
6
7
package main

import "fmt"

func main() {
    fmt.Println("hello world")
}

Source:

1
2
3
4
5
6
7
8
9
:::code{language=go}
package main

import "fmt"

func main() {
    fmt.Println("hello world")
}
:::

Highlighting only (no line numbers, no copy)

Rendered:

const MyCoolComponent = (props) => (
    <section>
        <h1>{props.title}</h1>
    </section>
);

Source:

1
2
3
4
5
6
7
:::code{language=jsx showLineNumbers=false showCopyAction=false}
const MyCoolComponent = (props) => (
    <section>
        <h1>{props.title}</h1>
    </section>
);
:::

Mermaid diagram

Rendered:

Source:

1
2
3
4
5
6
7
8
:::code{language=mermaid}
graph TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    C --> D[Rethink];
    D --> B;
    B -- No ----> E[End];
:::

Custom starting line number

Rendered:

54
55
56
57
58
// Creates a distribution from an S3 bucket.
const myBucket = new s3.Bucket(this, 'myBucket');
new cloudfront.Distribution(this, 'myDist', {
  defaultBehavior: { origin: new origins.S3Origin(myBucket) },
});

Source:

1
2
3
4
5
6
7
:::code{language=ts lineNumberStart=54}
// Creates a distribution from an S3 bucket.
const myBucket = new s3.Bucket(this, 'myBucket');
new cloudfront.Distribution(this, 'myDist', {
  defaultBehavior: { origin: new origins.S3Origin(myBucket) },
});
:::

Line highlighting

Highlight individual lines and ranges with highlightLines.

Rendered:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Creating a custom origin request policy for a Distribution -- all parameters optional
declare const bucketOrigin: origins.S3Origin;
const myOriginRequestPolicy = new cloudfront.OriginRequestPolicy(this, 'OriginRequestPolicy', {
  originRequestPolicyName: 'MyPolicy',
  comment: 'A default policy',
  cookieBehavior: cloudfront.OriginRequestCookieBehavior.none(),
  headerBehavior: cloudfront.OriginRequestHeaderBehavior.all('CloudFront-Is-Android-Viewer'),
  queryStringBehavior: cloudfront.OriginRequestQueryStringBehavior.allowList('username'),
});

new cloudfront.Distribution(this, 'myDistCustomPolicy', {
  defaultBehavior: {
    origin: bucketOrigin,
    originRequestPolicy: myOriginRequestPolicy,
  },
});

Source:

1
2
3
:::code{language=ts highlightLines=4-8,13,14}
// ... code here ...
:::

Line highlighting with an explicit start index

highlightLinesStart=1 tracks the highlighted lines from 1 regardless of the displayed lineNumberStart.

Rendered:

105
106
107
108
109
110
111
112
EC2Instance:
    Type: AWS::EC2::Instance
    Properties:
        ImageId: !FindInMap [ AWSRegionArch2AMI, !Ref 'AWS::Region' , !FindInMap [ AWSInstanceType2Arch, !Ref InstanceType, Arch ] ]
        KeyName: !Ref KeyName
        InstanceType: !Ref InstanceType
        SecurityGroups:
        - !Ref Ec2SecurityGroup

Source:

1
2
3
:::code{language=yaml lineNumberStart=105 highlightLines=4-6,8 highlightLinesStart=1}
# ... yaml here ...
:::

Auto-return on copy

copyAutoReturn=true appends a newline to the copied text so a command runs as soon as it is pasted into a terminal. It does not add a visible line to the display.

Rendered:

npm start

Source:

1
::code[npm start]{showCopyAction=true copyAutoReturn=true}

Plain Markdown fences also work

If you use a standard Markdown fenced block with a language, Workshop Studio enables line numbers and the copy action automatically.

Rendered:

1
2
3
4
# Some lovely python code
def hello_world():
    '''A hello world program'''
    print("Hello world!")

Source:

1
2
3
4
5
6
```python
# Some lovely python code
def hello_world():
    '''A hello world program'''
    print("Hello world!")
```

Supported languages

Use any of these values for language. Aliases in the right column resolve to the same highlighter.

Language	Aliases
`arduino`	`ino`
`bash`	`sh`, `shell`
`c`	-
`cedar`	-
`cpp`	-
`css`	-
`csharp`	`cs`, `dotnet`
`dart`	-
`diff`	-
`docker`	`dockerfile`
`git`	-
`go`	-
`graphql`	-
`java`	-
`javascript`	`js`
`jq`	-
`json`	`webmanifest`
`jsx`	-
`kotlin`	`kt`, `kts`
`less`	-
`lisp`	`elisp`, `emacs`, `emacs-lisp`
`llvm`	-
`lua`	-
`makefile`	-
`markdown`	`md`
`markup`	`atom`, `html`, `mathml`, `rss`, `ssml`, `svg`, `xml`
`nginx`	-
`objectivec`	`objc`
`perl`	-
`php`	-
`powershell`	-
`python`	`py`
`r`	-
`regex`	-
`ruby`	`rb`
`rust`	-
`sass`	-
`scss`	-
`sql`	-
`swift`	-
`template`	-
`toml`	-
`tsx`	-
`typescript`	`ts`
`vim`	-
`wasm`	-
`yaml`	`yml`