Sample Usage
Input
-- ftd.code:
lang: py
print("hello world")
Output
Attributes
The `ftd.code` component accepts the below attributes along with the
[common attributes](ftd/common/).
`text: caption or body`
This is the text or code to show. It accepts the value both in [caption
or body](ftd/built-in-types/#caption-or-body) besides in header.
Sample code using `text`
Input
-- ftd.code:
lang: py
text: print("hello world")
Output
`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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
Output
value = "hello world"
print(value)