How to write and format your posts on daxayoni.blog?
Our blog is supposed to be a pure writing experience. We are using writefreely for the exact same reason. However, more often than not, formatting your writing just makes it look beautiful. Writefreely supports markdown. Markdown is a lightweight markup language that was created by John Gruber and Aaron Swartz in 2004. Its primary objective is to provide a simple and human-readable syntax to format text without the need for complex HTML or formatting tools. Markdown files can be easily converted to other formats, such as HTML, making it ideal for writing content that will be published online or in various documents. Do you know you can use markdown in the WhatsApp chat, to make text bold, italic, strikethrough, or monospace?
How to use Markdown?
Markdown is human-readable. Which means, you just need to use symbols that we regularly use in our daily digital conversations, but not necessarily while writing ideas. You can use other text editors or note apps before writing on daxayoni to practice. We recommend Obsidian. We can see how it works below:
Headings
You can create six variations of headings using the Pound (#) symbol. You need to use it once before the sentence followed by a space. The number of Pounds determine their hierarchy. For example:
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
The above command will render like the following:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Emphasis
To create bold, italic, or strikethrough text, you need to use three symbols. Asterisks (*), Underscores (_), and Tilde (~). Using a single asterisk or underscore makes the text italics, whereas using double asterisks or underscores makes the text bold. For example:
*This is in Italics*
_This is also in Italics_
**This is in Bold**
__This is also in Bold__
_This is in **Bold** and Italics_
The above will be rendered as:
This is in Italics This is also in Italics This is in Bold This is also in Bold This is in Bold and Italics
To use strikethrough, you need to use two Tildes
~~This is Strikethrough~~
As usual, it will render as:
This is Strikethrough
Note that Emphasizing syntax is open ended. If you do not close the emphasising like a bracket, the style will continue.
Lists
We have a few options to create different kinds of Lists. For Ordered lists, you can use Numbers followed by a period like so:
- Item 1
- Item 2
- Item 3
- Item 4
For an Unordered list, you can use single Asterisk (*), single Hyphen (–), or a single Plus (+) sign followed by a space to create unordered lists. You can see example below:
- List number 1
- List number 2
- List Number 3
To create a nested list, you use indentation by pressing the tab key in the next line where you need to nest the item. Other syntaxes follow as usual. An example is as follows:
- Top Item 1
- Nested Item 1
- Sub-Nested Item 1
- Sub-Sub-Nested Item 1
- Sub-Sub-Nested Item 2
- Sub-Sub-Nested Item 3
- Sub-Nested Item 2
- Sub Nested Item 3
- Sub-Nested Item 1
- Nested Item 2
- Sub-Nested Item 4
- Sub-Nested Item 5
- Nested Item 1
- Top Item 2
- Top Item 3
You can keep them nested as much as you want.
Links
To be honest there are three kinds of links we will be dealing with, and two ways of showcasing them. Any text links can be put as a link as long as they're accompanied with the 'https://'. They will render as clickable links. We encourage this as it shows the complete link, making it transparent.
https://daxayoni.blog is an example.
However if you want to hide the link behind clickable custom text, then the syntax is,
This is a [Custom Link Text](https://daxayoni.blog)
Which will render as:
This is a Custom Link Text
As this is a writing platform, we do not allow Image and Video uploads. However using the link feature currently to keep storage costs down, however, you can embed Images and Videos using the link syntax.
for an image, You need to use the link syntax followed by an Exclamation mark (!). The syntax is as followed:
![Image of a cycle](https://images.unsplash.com/photo-1689085383708-8d62ccea8035)
Which will render as
Another example could be:
![Alt Text](https://i.imgur.com/nnmcBLe.jpeg)
The Alt-Text here exists as an accessible feature. In case the images do not load, or a blind person is navigating the website, they have a context of what is being shown.
To use images, you need to upload your images on imgur or imgbb or unsplash or similar photo hosting services that allow you to open your images separately on a new tab. You need to copy the link address to the separate image tab to use the image. Markdown images are rendered directly from the file, so you need to put in the correct address in the link. Otherwise the images will not render. We know this is an issue. We will implement a separate image sharing service in the near future if everything goes okay.
Videos are added as an embed link. You can't really add them as a regular link and it uses html. You can embed any video from YouTube as long as they are public. Here is a video about the Fediverse:
In YouTube you can click on the share button and copy the embed link and just paste it as html code just like the example below.
<iframe width="560" height="315" src="https://www.youtube.com/embed/pX_agVMr2r0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Quotes
Quotes or most commonly known as blockquotes can be created by using the greater than (>) symbol with followed by a space.
> This is a block quote
This is a block quote
Press Enter twice to get out of the block quote editor. You can also nest quotes within quotes.
Code Blocks
To showcase codes or functions, we use the backtick (`) symbol. To showcase an inline code, we use triple backticks. These are also open ended like the emphatic syntax, so you need to close them. Example is as follows:
` ` ` This is a code block ` ` `
Which will be rendered as follows:
this is a code block
We have been using code blocks to showcase markdown syntaxes this whole time. Except the code block example itself. We nullified the syntax effect by adding a Forward Slash (\) before each of the backticks.
Tables
You can create tables by using vertical bars (|) to separate columns and hyphens (–) for the header row. For example:
| Name | Number | Details |
|----------|-----|-------------|
| AAAA | 30 | Poet |
| BBBBB | 25 | Designer |
| CCCCC | 10 | Writer |
Name | Number | Details |
---|---|---|
AAAA | 30 | Poet |
BBBBB | 25 | Designer |
CCCCC | 10 | Writer |
You can also align the tables with the colons (:) as shown below
| Left Alignment | Center Alignment | Right Alignment |
|:---------------|:----------------:|----------------:|
| AAAA | 30 | Poet |
| BBBBB | 25 | Designer |
| CCCCC | 10 | Writer |
Left Alignment | Center Alignment | Right Alignment |
---|---|---|
AAAA | 30 | Poet |
BBBBB | 25 | Designer |
CCCCC | 10 | Writer |
Footnotes
Footnotes let you add additional information or references. To create a footnote, use square brackets with a caret (^) and a unique identifier, then place the content at the bottom of the document using the same identifier inside square brackets. Here's an example:
Here is some text with a footnote[^1].
[^1]: This is the footnote content.
Here is some text with a footnote[^1].
[^1]: This is the footnote content.
You can also add links in the footnotes like below:
Here is a footnote with a link[^1].
[^1]: This is the footnote content with a [link](https://www.daxayoni.com).
Here is a footnote with a link[^1].
[^1]: This is the footnote content with a link.
Conclusion
For regular writing you would not need more than a few syntaxes. The blog is designed for a distraction free writing experience. Formatting follows the same principle. By being able to format text while typing without using any specialized menu will make your writing experience better and minimal. We can't wait to see what literature you will create.