Documentation

-- code can be used as code-block inside your fastn web projects.

Package Name:

fastn-community.github.io/code-block

Overview

Code blocks are typically defined by using specific syntax or indentation rules, depending on the programming language.

Note: The code component is already included within the doc-site. Therefore, if you are utilizing doc-site, there is no need to include the code-block as a fastn dependency.

Using our lang property you can define which language code snippet you want to show your users.

For e.g.

Input

-- cb.code:
lang: java

if (condition) {
    // code block
    statement1;
    statement2;
    // ...
}

Lang:

ftd

Output

if (condition) {
    // code block
    statement1;
    statement2;
    // ...
}

Lang:

java

How to use

Add code-block dependency into your FASTN.ftd

-- fastn.dependency: fastn-community.github.io/code-block

Lang:

ftd

Import code-block into your .ftd document

-- import: fastn-community.github.io/code-block as cb

-- cb.code:
lang: ftd
download: sample.ftd

-- ftd.text: Hello World
role: $inherited.types.copy-regular
color: $inherited.colors.text

Lang:

ftd

Properties:

Below are details of all properties of this component.

caption

type:

Caption (optional)

It's used to show title for the code block.

lang

type:

String (required)

It's used to define which programming language is used for the code example.

download

type:

String (optional)

It's used to define a file-name which can be downloaded and will contain the code shwon inside code-block.

body

type:

Body (required)

Body inside code-block is the code which you show as a example.

copy

type:

Boolean (default: true)

If you want to disable copy feature of code shown inside code-block, you can add this property and change its default value from true to false.

max-height

type:

ftd.resizing (optional)

You can add max-height property inside code-block if you want to restrict max-height of the code-block. This property type is ftd.resizing which means your can define it as below:

max-height.fixed.px: 200 it will restrict max-height to 200 pixels, you can use other CSS units e.g. em, rem etc.
max-height.fixed.percent: 30 it will restrict max-height to 30%.
max-height: fill-container max-height will be 100 %.

max-width

type:

ftd.resizing (optional)

You can add max-width property inside code-block if you want to restrict max-width of the code-block. This property type is ftd.resizing which means your can define it as below:

max-width.fixed.px: 200 it will restrict max-width to 200 pixels, you can use other CSS units e.g. em, rem etc.
max-width.fixed.percent: 30 it will restrict max-width to 30%.
max-width: fill-container max-width will be 100%.