Code Block
Home

Code Block Component for FASTN Packages

Package Name
fifthtry.github.io/code-block

The code-block package(fifthtry.github.io/code-block). Use inside FTD files for your web pages.

How to use?
Add this to your FASTN.ftd
-- fastn.dependency: fifthtry.github.io/code-block

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

cb.code Basic usage example

Component Name
-- cb.code:
Use below code snippet to use this code-block component as cb.
Input
-- cb.code: Title for the code block
lang: ftd

-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text
Output
Title for the code block
-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text

Additional attribute download:

Input
-- cb.code: Title for the code block
lang: ftd
copy: true
download: sample.ftd

-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text
Output
Title of the code block
-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text
sample.ftd

Additional attribute copy (by default true)

Input
-- cb.code: Title for the code block
lang: ftd

-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text
Output
Title for the code block
-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text

copy false without title:

Input
-- cb.code:
lang: ftd
copy: false

-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text
Output
-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text

copy false with title:

Input
-- cb.code: Some title
lang: ftd
copy: false

-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text
Output
Some title
-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text

copy true without title:

Input
-- cb.code: 
lang: ftd
copy: true

-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text
Output
-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text

download attribute without title:

Input
-- cb.code: 
lang: ftd
copy: false
download: sample.ftd

-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text
sample.ftd
Output
-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text
sample.ftd

download attribute and copy true without title:

Input
-- cb.code: 
lang: ftd
copy: true
download: sample.ftd

-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text
Output
-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text
sample.ftd

Using rendered component

We have introduced rendered component, which you can use to show rendered output of your code including it in rendered.input as body of rendered component.

In below example though we added copy: true attribute, but its true by default. So, no need to add this attribute while using rendered component.

download: <file-name> attribute is optional. Add it only where required.

How to use:
-- rendered:
copy: true
download: sample.ftd

-- rendered.input:

-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text

-- rendered.output:

-- ftd.text: Some title - rendered
role: $inherited.types.copy-regular
color: $inherited.colors.text

-- end: rendered.output

-- end: rendered
Output of rendered component:
Input
-- ftd.text: Some title
role: $inherited.types.copy-regular
color: $inherited.colors.text
sample.ftd
Output
Some title
Copyright © 2023 - FifthTry
Powered by