Learn full-stack web development using fastn in a week
Learn Now

markdown in doc-site

In this video we will see how to use markdown in doc-site.

Introduction

fastn supports the Markdown. Hence, instead of learning tags, one can still create content-heavy and powerful website using plain text without missing out on formatting.

Supporting Markdown makes fastn versatile as it also supports the conversion of the marked-up text into various output formats such as HTML.

By importing the doc-site package in your fastn projects and using any of the component like ds.markdown component, you gain access to Markdown's intuitive and readable text formatting syntax.

Markdown

Markdown is a way to write the content for the web.

Markdown provides a way to style text elements such as headings, lists, links, and more, using plain text and minimal special characters.
📝
Markdown Yes, but...
We do not recommend you to style text elements such as headings, images and code-block instead we want you to use following components:
Elements Components
heading ds.h1
image ds.image
code-block ds.code

Benefits

  • Markdown's simplicity, readability, and portability as plain texts can be easily shared and opened on any platform. Hence, using it in doc-site makes it a valuable tool for content creators and developers alike.

  • Markdown is widely used in blogging, instant messaging, online forums, collaborative software, documentation pages, and readme files.

  • It gives rich styling to the text.

Let's see what all we can do by using Markdown in doc-site.

Markdown syntax in doc-site

To use the Markdown Syntax in your fastn projects using components of doc-site. The first thing is to add doc-site in your package and then use the components of doc-site package.

To add doc-site in your package. Add it as the fastn.dependency in your FASTN.ftd document.
Dependency
-- fastn.dependency: fastn-community.github.io/doc-site
Lang:
ftd
Then, import the doc-site package in your documents like index.ftd
Importing doc-site
-- import: fastn-community.github.io/doc-site as ds
Lang:
ftd
Now, start using the components like ds.page, ds.markdown, ds.h1 etc.
Syntax
-- ds.markdown:
Lang:
ftd
Plain text
Input
-- ds.markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt.
Lang:
ftd
Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Inline styles
Input
-- ds.markdown:

**Bold Text** dolor sit amet, *Italic text* elit, sed do eiusmod tempor
  incididunt.
Lang:
ftd
Output
Bold Text dolor sit amet, Italic text elit, sed do eiusmod tempor incididunt.
Inline links
Input
-- ds.markdown:

Lorem ipsum [fastn](https://fastn.com/) amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt.
Lang:
ftd
Output
Lorem ipsum fastn amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Turning a URL into a link
Input
-- ds.markdown:

https://fastn.com/
Lang:
ftd
Output
Markdown List
Input
-- ds.markdown:

**Bullet list:**

- List item 1
- List item 2
- List item 3
  - Sub List item 1
  - Sub List item 1

**Ordered list:**

1. List item
2. List item
3. List item
   1. Sub List Item
   2. Sub List Item
   3. Sub List Item
Lang:
ftd
Output

Bullet list:

  • List item 1
  • List item 2
  • List item 3
    • Sub List item 1
    • Sub List item 1
Ordered list:
  1. List item
  2. List item
  3. List item
    1. Sub List Item
    2. Sub List Item
    3. Sub List Item
We can strikethrough a word or a sentence using single ~ symbol
Strikethrough
Input
-- ds.markdown:

~The world is flat.~
Lang:
ftd
Output
The world is flat.
To create a superscript, use one caret symbol (^) before and after the characters.
Superscript
Input
-- ds.markdown:

X^2^
Lang:
ftd
Output
X^2^
Horizontal Rule
Input
-- ds.markdown:

To create a Horizontal Rule we write

***
Lang:
ftd
Output
To create a Horizontal Rule we write
This way you can make use of Markdown in your fastn projects.

Thank you guys, keep watching these videos to learn more about fastn.

Support us by giving a star ⭐ on GitHub and join our fastn community on Discord.