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, readibility, 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](https://fastn.com/) amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt.
Turning a URL into a link
Input
-- ds.markdown:
https://fastn.com/
Lang:
ftd
Output
https://fastn.com/
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](https://github.com/fastn-stack/fastn/) and join our fastn community
on [Discord](/discord/).
