Package Demo: p/moul/md

This document demonstrates the features of the gno.land/p/moul/md package, showing both the source code and the rendered result for each feature.

Note: The md package provides helper functions to generate markdown programmatically, making it easier to create dynamic documentation and content.

Text Formatting

Bold Text

1md.Bold("Important text")

Result: Important text

Italic Text

1md.Italic("Emphasized text")

Result: Emphasized text

Strikethrough Text

1md.Strikethrough("Deprecated feature")

Result: Deprecated feature

Combined Formatting

1md.Bold(md.Italic("Very important"))

Result: Very important

Headers

The package supports all six levels of markdown headers:

1md.H1("Main Title")
2md.H2("Section")
3md.H3("Subsection")
4md.H4("Sub-subsection")
5md.H5("Minor heading")
6md.H6("Smallest heading")

Result:

Main Title

Section

Subsection

Sub-subsection

Minor heading

Smallest heading

Lists

Bullet Lists

1items := []string{
2    "First item",
3    "Second item",
4    "Third item with\nmultiple lines",
5}
6md.BulletList(items)

Result:

• First item
• Second item
• Third item with multiple lines

Ordered Lists

1steps := []string{
2    "First step",
3    "Second step",
4    "Third step with\nadditional details",
5}
6md.OrderedList(steps)

Result:

1. First step
2. Second step
3. Third step with additional details

Todo Lists

1tasks := []string{
2    "Completed task",
3    "Another completed task",
4    "Pending task",
5    "Another pending task",
6}
7completed := []bool{true, true, false, false}
8md.TodoList(tasks, completed)

Result:

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

Nested Lists

 1md.BulletItem("Parent item") +
 2md.Nested(
 3    md.BulletItem("Nested item 1") +
 4    md.BulletItem("Nested item 2") +
 5    md.Nested(
 6        md.BulletItem("Deeply nested"),
 7        "    ",
 8    ),
 9    "  ",
10)

Result:

• Parent item
  • Nested item 1
  • Nested item 2
    • Deeply nested

Links and Images

Regular Links

1md.Link("Gno Homepage", "https://gno.land")

Result: Gno Homepage

User Links

1md.UserLink("moul")

Result: @moul

1md.UserLink("g1jg8mtutu9khhfwc4nxmuhcpftf0pajdhfvsqf5")

Result: g1jg8mtutu9khhfwc4nxmuhcpftf0pajdhfvsqf5

Images

1md.Image("Gno Logo", "/public/imgs/gnoland.svg")

Result:

Clickable Images

1md.InlineImageWithLink("Click me!", "/public/imgs/gnoland.svg", "https://gno.land")

Result:

Code

Inline Code

1"Use " + md.InlineCode("gno test") + " to run tests"

Result: Use gno test to run tests

Simple Code Block

1md.CodeBlock("func main() {\n    println(\"Hello, Gno!\")\n}")

Result:

func main() {
    println("Hello, Gno!")
}

Language-specific Code Block

1md.LanguageCodeBlock("go", "package main\n\nfunc main() {\n    println(\"Hello!\")\n}")

Result:

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

Blockquotes

1md.Blockquote("This is an important note.")

Result:

This is an important note.

1md.Blockquote("Multi-line quotes\nare also supported\nwith proper formatting.")

Result:

Multi-line quotes are also supported with proper formatting.

Advanced Features

Collapsible Sections

1md.CollapsibleSection("Click to expand", "Hidden content here!")

Result:

Hidden content here!

Two Columns

1md.Columns([]string{
2    "Left column content",
3    "Right column content",
4}, false)

Result:

Multiple Columns (3 per row)

1md.ColumnsN([]string{
2    "Item 1", "Item 2", "Item 3",
3    "Item 4", "Item 5", "Item 6",
4}, 3, true)

Result:

Utility Functions

Horizontal Rule

1md.HorizontalRule()

Result:

Footnotes

1"This has a footnote[1].\n\n" + md.Footnote("1", "Footnote content here.")

Result: This has a footnote[1].

[1]: Footnote content here.

Paragraphs

1md.Paragraph("This ensures proper spacing.")

Result: This ensures proper spacing.

Practical Example

Here's a complete example showing how to build a rich user profile page using columns, images, and various md features:

 1// Example function that generates a rich user profile with balanced columns
 2func RenderProfile(username, name, bio string, avatar string, tasks []string, completed []bool) string {
 3    // First row: Avatar/Basic Info | Bio
 4    avatarSection := md.Image(name + " avatar", avatar) + "\n\n" +
 5        md.H3("Basic Info") +
 6        md.BulletList([]string{
 7            md.Bold("Name:") + " " + name,
 8            md.Bold("Username:") + " " + md.UserLink(username),
 9            md.Bold("Status:") + " 🟢 Active",
10            md.Bold("Joined:") + " January 2024",
11        })
12    
13    bioSection := md.H3("Bio") +
14        md.Blockquote(bio)
15    
16    // Second row: Tasks | Links
17    tasksSection := md.H3("Current Tasks") +
18        md.TodoList(tasks, completed)
19    
20    linksSection := md.H3("Links") +
21        md.BulletList([]string{
22            md.Link("GitHub", "https://github.com/" + username),
23            md.Link("Portfolio", "https://example.com/" + username),
24            md.Link("LinkedIn", "https://linkedin.com/in/" + username),
25        })
26    
27    // Combine with main title and two sets of columns
28    return md.H1("User Profile: " + name) +
29        md.HorizontalRule() +
30        md.Columns([]string{avatarSection, bioSection}, true) +
31        "\n" +
32        md.Columns([]string{tasksSection, linksSection}, true)
33}
34
35// Usage:
36profile := RenderProfile(
37    "johndoe",
38    "John Doe", 
39    "Passionate Gno developer building the future of smart contracts. Love working with blockchain technology and contributing to open source.",
40    "/public/imgs/gnoland.svg",
41    []string{"Complete Gno tutorial", "Build first realm", "Deploy to testnet", "Write documentation"},
42    []bool{true, true, false, false},
43)

Result when called with the above parameters:

User Profile: John Doe

Best Practices

1. Prioritize code readability over performance in Render() - use clear variable names, logical grouping, and readable concatenation for humans
2. Use the md package for all programmatic markdown generation in Render() methods
3. Combine functions for complex formatting: md.Bold(md.Italic("text"))
4. Use md.Paragraph() to ensure proper spacing between elements
5. Leverage md.ColumnsN() for responsive layouts

See Also

• gno.land/p/moul/md - The md package source code
• Markdown on Gno - Comprehensive guide on Gno Flavored Markdown syntax