Markdown on Gno

Introduction

Markdown on Gno is based on standard markdown, but also has some unique features, making it the Gno Flavored Markdown. This document describes the current markdown support in Gno, demonstrating both the syntax and its rendered output.

Basic Syntax

Headings

Headings are created using hash symbols (#). The number of hash symbols indicates the heading level.

1# Heading 1
2## Heading 2
3### Heading 3
4#### Heading 4
5##### Heading 5
6###### Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Formatting

You can format text using the following syntax:

1**Bold text**
2*Italic text*
3~~Strikethrough text~~
4**Bold and _nested italic_**
5***All bold and italic***

Bold text Italic text Strikethrough text Bold and nested italic All bold and italic

Links

Links can be created using the following syntax:

1[Link text](https://example.com)
2[Link with title](https://example.com "Link title")

Link text Link with title

Lists

Unordered lists use asterisks, plus signs, or hyphens:

1* Item 1
2* Item 2
3  * Nested item 1
4  * Nested item 2

• Item 1
• Item 2
  • Nested item 1
  • Nested item 2

Ordered lists use numbers:

11. First item
22. Second item
3   1. Nested item 1
4   2. Nested item 2

1. First item
2. Second item
   1. Nested item 1
   2. Nested item 2

Blockquotes

Blockquotes are created using the > character:

1> This is a blockquote
2>
3> It can span multiple lines

This is a blockquote

It can span multiple lines

Code

Inline code uses single backticks:

1Use `func main()` to define the entry point.

Use func main() to define the entry point.

Code blocks use triple backticks with an optional language identifier:

1```go
2package main
3
4func main() {
5    println("Hello, Gno!")
6}

1package main
2
3func main() {
4    println("Hello, Gno!")
5}

Horizontal Rules

Horizontal rules are created using three or more asterisks, hyphens, or underscores:

1---

Task Lists

Gno supports task lists for tracking to-do items:

1- [x] Completed task
2- [ ] Pending task
3- [ ] Another pending task
4- [x] Another completed task

• Completed task
• Pending task
• Another pending task
• Another completed task

Footnotes

Gno supports footnotes for adding references and citations:

1Here is a sentence with a footnote[^1].
2
3[^1]: This is the footnote content.

Here is a sentence with a footnote¹.

You can also use multiple footnotes in the same document:

1This is the first sentence with a footnote[^1].
2This is another sentence with a different footnote[^2].
3
4[^1]: First footnote content.
5[^2]: Second footnote content with more details.

This is the first sentence with a footnote¹. This is another sentence with a different footnote².

Tables

Tables are created using pipes and hyphens:

1| Header 1 | Header 2 |
2| -------- | -------- |
3| Cell 1   | Cell 2   |
4| Cell 3   | Cell 4   |

Images

Images can be included using the following syntax:

1![Alt text](/public/imgs/gnoland.svg "Optional title")

Currently, only a short list of content providers are supported:

 1// Gno-related hosts
 2"https://gnolang.github.io"
 3"https://assets.gnoteam.com"
 4"https://sa.gno.services"
 5
 6// Other providers should respect DMCA guidelines
 7// NOTE: Feel free to open a PR to add more providers here :)
 8
 9// imgur
10"https://imgur.com"
11"https://*.imgur.com"
12
13// GitHub
14"https://*.github.io"
15"https://github.com"
16"https://*.githubusercontent.com"
17
18// IPFS
19"https://ipfs.io"
20"https://cloudflare-ipfs.com"

Gno-Specific Features

HTML Support

By design, most typical HTML support is disabled in Gno's markdown implementation. This is an intentional decision for both security and ecosystem cohesion.

While traditional markdown often allows arbitrary HTML tags, Gno Flavored Markdown takes a more controlled approach:

• We may progressively whitelist certain HTML components or add custom ones over time
• Our priority is to enhance our flavored markdown to natively support all essential components
• We aim to eventually support all the initially HTML-supported features, but with syntax that is:
  • More readable when viewing the source directly
  • More integrable with custom browsers such as gnobro in CLI

This approach allows for a more consistent rendering experience across different Gno interfaces while maintaining security and readability as core principles.

Columns

Gno-Flavored Markdown introduces a column layout system that uses special tags. You can create columns with <gno-columns> blocks and separate the content with |||.

Basic Syntax

1<gno-columns>
2Left content
3
4|||
5
6Right content
7</gno-columns>

• Renders as:

Key Features

1. Multiple Columns:

Depending on the screen size. A maximum of four rows can be displayed in one row.

Note: Any overflow will result in items being displayed in the next row. Also, keep in mind that on smaller screens (e.g., phones), this overflow may occur with fewer elements.

 1<gno-columns>
 2First column
 3
 4|||
 5
 6Second column
 7
 8|||
 9
10Third column
11
12|||
13
14Fourth column
15
16|||
17
18Fifth column
19</gno-columns>

• Renders as:

2. Mixed Content:

Columns can be mixed with any markdown content

Note: Nested columns are currently not possible

1<gno-columns>
2### Text Section
3Paragraph with _formatting_
4
5|||
6
7My Image ![Alt](/public/imgs/gnoland.svg)
8</gno-columns>

• Renders as:

Forms

Gno-Flavored Markdown introduces a secure form system that integrates directly with realms. The system uses custom HTML-like tags that are rendered with proper styling and validation.

Basic Usage

Create a form using the <gno-form> tag and add inputs with <gno-input>:

1<gno-form>
2  <gno-input name="name" placeholder="Enter your name" />
3  <gno-input name="email" placeholder="Enter your email" />
4</gno-form>

Form Structure

1. Form Container

   • Must start with <gno-form> and end with </gno-form>
   • Optional attributes:
     • path: Render path after form submission (e.g. path="user" will redirect to :user?[params])
   • Form data is always sent as query parameters
   • Cannot be nested (forms inside forms are not allowed)
   • Automatically includes a header showing the realm name

2. Input Fields

   • Created with <gno-input> tag
   • Required attributes:
     • name: Unique identifier for the input (required)
     • type: Type of input (optional, defaults to "text")
     • placeholder: Hint text shown in the input (optional, defaults to "Enter value")
     • description: Description of the input as title (optional - can be used as title for group of one or multiple inputs)
   • Supported input types:
     • type="text" (default): For text input
     • type="number": For numeric values only (with browser validation)
     • type="email": For email addresses (with basic browser validation)
     • type="tel": For phone numbers (no specific validation)
     • type="password": For password input (masked characters)
     • type="radio": For single selection from a group (requires value attribute)
     • type="checkbox": For multiple selections (requires value attribute)
   • Additional attributes for radio/checkbox:
     • value: The value to submit when selected (required for radio/checkbox)
     • checked: Set to "true" to pre-select the option (optional)
   • Note: Input validation is handled by the browser's HTML5 validation
   • Any other type will default to "text"
   • Each input must have a unique name
   • Inputs are rendered with labels and proper styling

3. Textarea Fields

   • Created with <gno-textarea> tag
   • Required attributes:
     • name: Unique identifier for the textarea (required)
     • placeholder: Hint text shown in the textarea (optional, defaults to "Enter value")
   • Optional attributes:
     • rows: Number of visible rows (2-10, defaults to 4)
   • Perfect for longer text input like messages, descriptions, or comments
   • Each textarea must have a unique name
   • Textareas are rendered with labels and proper styling

4. Select Fields

   • Created with <gno-select> tag (similar to radio buttons)
   • Required attributes:
     • name: Unique identifier for the select group (required). Use underscores to separate words.
     • value: The value to submit and display text (required)
   • Optional attributes:
     • description: Description of the select group (optional)
     • selected: Set to "true" to pre-select the option (optional)
   • Multiple <gno-select> elements with the same name form a select group
   • All options with the same name form a group where only one can be selected
   • The value attribute serves both as the submitted value and the displayed text

Example Use Cases

1. Form with Path and Query Parameters

1<gno-form path="user">
2  <gno-input name="username" type="text" placeholder="Enter username" />
3  <gno-input name="age" type="number" placeholder="Your age" />
4</gno-form>

This form will submit to :user?username=value&age=value on the same realm.

2. Form with Query Parameters Only

1<gno-form>
2  <gno-input name="recipient" type="text" placeholder="Enter recipient address" description="Recipient Information" />
3  <gno-input name="email" type="email" placeholder="Your email" />
4  <gno-input name="pswd" type="password" placeholder="Your password" />
5</gno-form>

This form will submit to ?recipient=value&email=value&pswd=value on the same realm.

3. Form with Radio Buttons

1<gno-form>
2  <gno-input name="color" type="radio" value="blue" description="What is your favorite color?" />
3  <gno-input name="color" type="radio" value="red" />
4  <gno-input name="color" type="radio" value="green" />
5</gno-form>

Radio buttons allow users to select one option from a group. All radio buttons with the same name form a group where only one can be selected.

4. Form with Checkboxes

1<gno-form>
2  <gno-input name="interests" type="checkbox" value="coding" description="What do you like to do?"/>
3  <gno-input name="interests" type="checkbox" value="gaming" />
4  <gno-input name="interests" type="checkbox" value="reading" />
5  <gno-input name="newsletter" type="checkbox" value="subscribe" description="Subscribe to newsletter" placeholder="To get the latest news" checked="true" />
6</gno-form>

Checkboxes allow users to select multiple options. Use checked="true" to pre-select a checkbox.

5. Form with Textarea

1<gno-form>
2  <gno-input name="message" type="text" placeholder="Subject" />
3  <gno-textarea name="content" placeholder="Enter your message here" rows="6" />
4</gno-form>

Textareas are perfect for longer text input. The rows attribute controls the height (4-10 rows, default is 4).

6. Form with Select Options

1<gno-form>
2  <gno-select name="country" value="United States" description="Select your country" />
3  <gno-select name="country" value="France" />
4  <gno-select name="country" value="Germany" />
5</gno-form>

Select options work like radio buttons but with a more semantic meaning. All <gno-select> elements with the same name form a group where only one can be selected. Use selected="true" to pre-select an option. The value attribute serves both as the submitted value and the displayed text.

7. Complex Form with Mixed Elements

 1<gno-form path="contact">
 2  <gno-input name="name" type="text" placeholder="Your full name" description="Your Information" />
 3  <gno-input name="email" type="email" placeholder="Your email address" />
 4  <gno-input name="age" type="number" placeholder="Your age" />
 5  
 6  <gno-input name="color" type="radio" value="blue" description="What is your favorite color?" />
 7  <gno-input name="color" type="radio" value="red" />
 8  <gno-input name="color" type="radio" value="green" />
 9  
10  <gno-input name="interests" type="checkbox" value="tech" description="What do you like to do?" />
11  <gno-input name="interests" type="checkbox" value="sports" />
12  <gno-input name="interests" type="checkbox" value="music"/>
13  
14  <gno-select name="country" value="us" text="United States" description="Select your country" />
15  <gno-select name="country" value="fr" text="France" />
16  <gno-select name="country" value="de" text="Germany" />
17  
18  <gno-textarea name="message" placeholder="Tell us about yourself" rows="5" />
19</gno-form>

This example shows how to combine all form element types in a single form.

Important Rules

1. Validation Rules:

   • Every <gno-input> must have a name attribute
   • Every <gno-textarea> must have a name attribute
   • Every <gno-select> must have a name and value attribute
   • Duplicate attribute names are not allowed (except for radio, checkbox, and select groups)
   • Forms must be properly closed
   • Nested forms will not render
   • Radio and checkbox inputs must have a value attribute
   • The checked attribute is only valid for radio and checkbox inputs
   • The selected attribute is only valid for <gno-select> elements
   • Textarea rows attribute must be between 2 and 10 (defaults to 4 if invalid or not specified)

2. Security Features:

   • Forms are processed on the realm where they are defined
   • Each form submission is associated with its realm
   • The realm name is displayed in the form header
   • Input validation is handled by the realm's smart contract

Alerts

Alerts are a way to highlight important information in your markdown.

There are five types of alerts:

• INFO
• NOTE
• TIP
• SUCCESS
• WARNING
• CAUTION

NOTE: The default alert type is INFO (if a wrong alert type is used).

The alert boxes are expandable/collapsible and can have a title. By default, the alert boxes are opened. The title is optional and if not provided, the alert type will be used as the title.

1> [!NOTE]
2> This is a note

1> [!NOTE]-
2> This is a closed note

1> [!NOTE] This is a note with title
2> This is a note with title

1> [!INFO]
2> This is an info

1> [!TIP]
2> This is a tip

> [!SUCCESS]
> This is a success

> [!WARNING]
> This is a warning

> [!CAUTION]
> This is a caution

1> [!FOO]
2> The default alert if a wrong alert type is used

1> [!NOTE]
2> This is a note
3> > [!NOTE]
4> > This is a scoped note

User Mentions and Bech32 Addresses

Gno markdown automatically recognizes and renders user mentions and Bech32 addresses as clickable links.

User Mentions

// You can mention users using the "@" symbol followed by a username. The username can contain letters, numbers, and underscores.

1Hello @alice, how are you doing?
2
3This is a mention of @bob_user and @test-123.
4
5You can also mention users like @user_name_123.

Hello @alice, how are you doing?

This is a mention of @bob_user.

You can also mention users like @user_name_123.

Bech32 Addresses

Gno markdown can automatically recognize and render valid Bech32 addresses as clickable links.

1This is a GNO address: g1jg8mtutu9khhfwc4nxmuhcpftf0pajdhfvsqf5
2
3You can also reference g1abc123def456ghi789jkl012mno345pqr678stu901vwx234yz5.

This is a GNO address: g1jg8mtutu9khhfwc4nxmuhcpftf0pajdhfvsqf5

You can also reference g1abc123def456ghi789jkl012mno345pqr678stu901vwx234yz5.

Smart Contract Integration

XXX: TODO

1gno.land/r/boards
2gno.land/r/boards:foo/bar
3gno.land/r/docs/markdown$source

gno.land/r/boards gno.land/r/boards:foo/bar gno.land/r/docs/markdown$source

And more...

XXX: TODO

Future Enhancements

The markdown support in Gno is being actively developed. Future enhancements may include:

• Extended support for custom components
• Interactive elements specific to blockchain functions
• Rich rendering of on-chain data
• Better integration with Gno's package system

Read more

Conclusion

Markdown on Gno provides a familiar syntax for developers who have experience with GitHub Flavored Markdown, while adding blockchain-specific extensions that make it more powerful in the context of the Gno platform.

As the Gno ecosystem grows, expect the markdown capabilities to expand accordingly, providing even richer formatting and interactive elements for documentation and user interfaces.

See Also

For programmatic markdown generation using Go code, check out the p/moul/md demo which demonstrates how to use the p/moul/md package to generate markdown content in your Gno realms.