Want to try fastn for your company's website?

Book a Demo

Explore

undefined

record

or-type

list

ftd.row

ftd.rive (animation)

Container Root Attributes

import

Using export/exposing

Functions

Built-in Functions

Built-in Rive Functions

Built-in Local Storage Functions

Built-in Variables

ftd Events

Rive Events

Use color scheme package

assets

How to make page responsive

Using JS

JS in function

Web Component

Create fastn package

Same argument & attribute types

`ftd.code`

ftd.code is a component used to render the code component in an ftd document.

Sample Usage

Input

-- ftd.code:
lang: py

print("hello world")

Lang:

ftd

Output

print("hello world")

Attributes

The ftd.code component accepts the below attributes along with the common attributes.

`text: caption or body`

This is the text or code to show. It accepts the value both in caption or body besides in header.

Sample code using text

Input

-- ftd.code:
lang: py
text: print("hello world")

Lang:

ftd

Output

print("hello world")

`lang: optional string`

The lang property defines the language of the code. It is an optional field. In case if the value is not provided, this will take txt as default value.

Sample code using lang

Input

-- ftd.code:
lang: py

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

`theme: optional string`

The theme property defines the theme for the code block. It is an optional field with default value fastn-theme.dark.

Note: Use your desired background color based on your theme when using any fastn code themes since these fastn themes doesn't define any background color by itself.

The available themes are:

fastn Themes

fastn-theme.dark
fastn-theme.light

Sample code using fastn-theme.dark theme

Input

-- ftd.code:
lang: py
theme: fastn-theme.dark
background.solid: black

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using fastn-theme.light theme

Input

-- ftd.code:
lang: py
theme: fastn-theme.light
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Other Themes

Material Theme Light
Material Theme Dark
GruvBox Theme Light
GruvBox Theme Dark
ColDark Theme Light
ColDark Theme Dark
Duotone Theme Light
Duotone Theme Dark
Duotone Theme Earth
Duotone Theme Forest
Duotone Theme Sea
Duotone Theme Space
One Theme Light
One Theme Dark
VS Theme Light
VS Theme Dark
Dracula Theme
Coy Theme
LaserWave Theme
ZTouch Theme
NightOwl Theme

Sample code using material-theme.light theme

Input

-- ftd.code:
lang: py
theme: material-theme.light
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using material-theme.dark theme

Input

-- ftd.code:
lang: py
theme: material-theme.dark
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using gruvbox-theme.light theme

Input

-- ftd.code:
lang: py
theme: gruvbox-theme.light
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using gruvbox-theme.dark theme

Input

-- ftd.code:
lang: py
theme: gruvbox-theme.dark
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using coldark-theme.light theme

Input

-- ftd.code:
lang: py
theme: coldark-theme.light
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using coldark-theme.dark theme

Input

-- ftd.code:
lang: py
theme: coldark-theme.dark
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using duotone-theme.light theme

Input

-- ftd.code:
lang: py
theme: duotone-theme.light
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using duotone-theme.dark theme

Input

-- ftd.code:
lang: py
theme: duotone-theme.dark
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using duotone-theme.earth theme

Input

-- ftd.code:
lang: py
theme: duotone-theme.earth
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using duotone-theme.forest theme

Input

-- ftd.code:
lang: py
theme: duotone-theme.forest
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using duotone-theme.sea theme

Input

-- ftd.code:
lang: py
theme: duotone-theme.sea
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using duotone-theme.space theme

Input

-- ftd.code:
lang: py
theme: duotone-theme.space
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using one-theme.light theme

Input

-- ftd.code:
lang: py
theme: one-theme.light
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using one-theme.dark theme

Input

-- ftd.code:
lang: py
theme: one-theme.dark
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using vs-theme.light theme

Input

-- ftd.code:
lang: py
theme: vs-theme.light
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using vs-theme.dark theme

Input

-- ftd.code:
lang: py
theme: vs-theme.dark
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using dracula-theme theme

Input

-- ftd.code:
lang: py
theme: dracula-theme
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using coy-theme theme

Input

-- ftd.code:
lang: py
theme: coy-theme
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using laserwave-theme theme

Input

-- ftd.code:
lang: py
theme: laserwave-theme
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using ztouch-theme theme

Input

-- ftd.code:
lang: py
theme: ztouch-theme
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)

Sample code using nightowl-theme theme

Input

-- ftd.code:
lang: py
theme: nightowl-theme
background.solid: white

value = "hello world"
print(value)

Lang:

ftd

Output

value = "hello world"
print(value)