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)
`text-align: optional ftd.text-align`
This property is used to align the text within `ftd.code`. It accepts the
[`ftd.text-align`](ftd/built-in-types/#ftd-text-align) type value and is
optional.
- center
- start
- right
- justify
`center`
The inline contents are centered within the line box.
Sample code using `text-align: center`
Input
-- ftd.code:
lang: py
width.fixed.px: 400
text-align: center
value = "hello world"
print(value)
Output
value = "hello world"
print(value)
`start`
The inline contents are aligned to the left edge of the line box.
Sample code using `text-align: start`
Input
-- ftd.code:
lang: py
width.fixed.px: 400
text-align: start
value = "hello world"
print(value)
Output
value = "hello world"
print(value)
`end`
The inline contents are aligned to the right edge of the line box.
Sample code using `text-align: end`
Input
-- ftd.code:
lang: py
width.fixed.px: 400
text-align: end
value = "hello world"
print(value)
Output
value = "hello world"
print(value)
`justify`
The inline contents are justified. Text should be spaced to line up
its left and right edges to the left and right edges of the line box,
except for the last line.
Sample code using `text-align: justify`
Input
-- ftd.code:
lang: py
width.fixed.px: 400
text-align: justify
value = "hello world"
print(value)
Output
value = "hello world"
print(value)