Support us by giving us a

Overview

Design

Why Use `fastn` for Your Next Frontend?

`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

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](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")

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)

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.