markdown.gno
28.25 Kb · 945 lines
1package markdown
2
3import "strings"
4
5// this package can be used to test markdown rendering engines.
6
7func Render(path string) string {
8 output := `# Markdown on Gno
9
10## Introduction
11
12Markdown 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.
13
14> [!NOTE]
15> Markdown support in Gno is still evolving. New features and improvements will be added in future releases.
16
17## Basic Syntax
18
19### Headings
20
21Headings are created using hash symbols (#). The number of hash symbols indicates the heading level.
22
23±±±markdown
24# Heading 1
25## Heading 2
26### Heading 3
27#### Heading 4
28##### Heading 5
29###### Heading 6
30±±±
31
32# Heading 1
33## Heading 2
34### Heading 3
35#### Heading 4
36##### Heading 5
37###### Heading 6
38
39### Text Formatting
40
41You can format text using the following syntax:
42
43±±±markdown
44**Bold text**
45*Italic text*
46~~Strikethrough text~~
47**Bold and _nested italic_**
48***All bold and italic***
49±±±
50
51**Bold text**
52*Italic text*
53~~Strikethrough text~~
54**Bold and _nested italic_**
55***All bold and italic***
56
57### Links
58
59Links can be created using the following syntax:
60
61±±±markdown
62[Link text](https://example.com)
63[Link with title](https://example.com "Link title")
64±±±
65
66[Link text](https://example.com)
67[Link with title](https://example.com "Link title")
68
69### Lists
70
71Unordered lists use asterisks, plus signs, or hyphens:
72
73±±±markdown
74* Item 1
75* Item 2
76 * Nested item 1
77 * Nested item 2
78±±±
79
80* Item 1
81* Item 2
82 * Nested item 1
83 * Nested item 2
84
85Ordered lists use numbers:
86
87±±±markdown
881. First item
892. Second item
90 1. Nested item 1
91 2. Nested item 2
92±±±
93
941. First item
952. Second item
96 1. Nested item 1
97 2. Nested item 2
98
99### Blockquotes
100
101Blockquotes are created using the > character:
102
103±±±markdown
104> This is a blockquote
105>
106>> It can span multiple lines
107±±±
108
109> This is a blockquote
110>
111>> It can span multiple lines
112
113### Code
114
115Inline code uses single backticks:
116
117±±±markdown
118Use ±func main()± to define the entry point.
119±±±
120
121Use ±func main()± to define the entry point.
122
123Code blocks use triple backticks with an optional language identifier:
124
125<!-- XXX: make the example with 'gno' instead of 'go' -->
126
127±±±markdown
128±±±go
129package main
130
131func main() {
132 println("Hello, Gno!")
133}
134±±±
135
136±±±go
137package main
138
139func main() {
140 println("Hello, Gno!")
141}
142±±±
143
144### Horizontal Rules
145
146Horizontal rules are created using three or more asterisks, hyphens, or underscores:
147
148±±±markdown
149---
150±±±
151
152---
153
154### Task Lists
155
156Gno supports task lists for tracking to-do items:
157
158±±±markdown
159- [x] Completed task
160- [ ] Pending task
161- [ ] Another pending task
162- [x] Another completed task
163±±±
164
165- [x] Completed task
166- [ ] Pending task
167- [ ] Another pending task
168- [x] Another completed task
169
170### Footnotes
171
172Gno supports footnotes for adding references and citations:
173
174±±±markdown
175Here is a sentence with a footnote[^1].
176
177[^1]: This is the footnote content.
178±±±
179
180Here is a sentence with a footnote[^1].
181
182[^1]: This is the footnote content.
183
184You can also use multiple footnotes in the same document:
185
186±±±markdown
187This is the first sentence with a footnote[^1].
188This is another sentence with a different footnote[^2].
189
190[^1]: First footnote content.
191[^2]: Second footnote content with more details.
192±±±
193
194This is the first sentence with a footnote[^1].
195This is another sentence with a different footnote[^2].
196
197[^1]: First footnote content.
198[^2]: Second footnote content with more details.
199
200## Tables
201
202Tables are created using pipes and hyphens:
203
204±±±markdown
205| Header 1 | Header 2 |
206| -------- | -------- |
207| Cell 1 | Cell 2 |
208| Cell 3 | Cell 4 |
209±±±
210
211| Header 1 | Header 2 |
212| -------- | -------- |
213| Cell 1 | Cell 2 |
214| Cell 3 | Cell 4 |
215
216## Images
217
218Images can be included using the following syntax:
219
220±±±markdown
221
222±±±
223
224
225
226Currently, only a short list of content providers are supported:
227
228±±±markdown
229// Gno-related hosts
230"https://gnolang.github.io"
231"https://assets.gnoteam.com"
232"https://sa.gno.services"
233
234// Other providers should respect DMCA guidelines
235// NOTE: Feel free to open a PR to add more providers here :)
236
237// imgur
238"https://imgur.com"
239"https://*.imgur.com"
240
241// GitHub
242"https://*.github.io"
243"https://github.com"
244"https://*.githubusercontent.com"
245
246// IPFS
247"https://ipfs.io"
248"https://cloudflare-ipfs.com"
249±±±
250
251
252## Gno-Specific Features
253
254### HTML Support
255
256By design, most typical HTML support is disabled in Gno's markdown implementation. This is an intentional decision for both security and ecosystem cohesion.
257
258While traditional markdown often allows arbitrary HTML tags, Gno Flavored Markdown takes a more controlled approach:
259
260- We may progressively whitelist certain HTML components or add custom ones over time
261- Our priority is to enhance our flavored markdown to natively support all essential components
262- We aim to eventually support all the initially HTML-supported features, but with syntax that is:
263 - More readable when viewing the source directly
264 - More integrable with custom browsers such as gnobro in CLI
265
266This approach allows for a more consistent rendering experience across different Gno interfaces while maintaining security and readability as core principles.
267
268### Columns
269
270Gno-Flavored Markdown introduces a column layout system that uses special tags. You can create columns with
271±<gno-columns>± blocks and separate the content with ±|||±.
272
273#### Basic Syntax
274±±±markdown
275<gno-columns>
276Left content
277
278|||
279
280Right content
281</gno-columns>
282±±±
283
284- Renders as:
285
286---
287
288<gno-columns>
289Left content
290
291|||
292
293Right content
294</gno-columns>
295
296---
297
298#### Key Features
299
3001. **Multiple Columns**:
301
302Depending on the screen size. A maximum of four rows can be displayed in
303one row.
304
305***Note**: Any overflow will result in items being displayed in the next row. Also, keep in mind that on smaller screens
306(e.g., phones), this overflow may occur with fewer elements.*
307
308±±±markdown
309<gno-columns>
310First column
311
312|||
313
314Second column
315
316|||
317
318Third column
319
320|||
321
322Fourth column
323
324|||
325
326Fifth column
327</gno-columns>
328±±±
329
330- Renders as:
331
332---
333
334<gno-columns>
335First column
336
337|||
338
339Second column
340
341|||
342
343Third column
344
345|||
346
347Fourth column
348
349|||
350
351Fifth column
352</gno-columns>
353
354---
355
3562. **Mixed Content**:
357
358Columns can be mixed with any markdown content
359
360***Note**: Nested columns are currently not possible*
361
362±±±markdown
363<gno-columns>
364### Text Section
365Paragraph with _formatting_
366
367|||
368
369My Image 
370</gno-columns>
371±±±
372
373- Renders as:
374
375---
376
377<gno-columns>
378### Text Section
379Paragraph with _formatting_
380
381|||
382
383My Image 
384</gno-columns>
385
386---
387
388### Forms
389
390Gno-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.
391
392#### Basic Usage
393
394Create a form using the ±<gno-form>± tag and add inputs with ±<gno-input>±:
395
396±±±markdown
397<gno-form>
398 <gno-input name="name" placeholder="Enter your name" />
399 <gno-input name="email" placeholder="Enter your email" />
400</gno-form>
401±±±
402
403<gno-form>
404 <gno-input name="name" placeholder="Enter your name" />
405 <gno-input name="email" placeholder="Enter your email" />
406</gno-form>
407
408#### Form Structure
409
4101. **Form Container**
411 - Must start with ±<gno-form>± and end with ±</gno-form>±
412 - Optional attributes:
413 - ±path±: Render path after form submission (e.g. ±path="user"± will redirect to ±:user?[params]±)
414 - ±exec±: Specify a realm function to execute (e.g. ±exec="CreatePost"±).
415 When set, fields must be defined manually and their ±name± attributes must match the function's parameter names in the same order they appear in the function signature.
416 - Form data is always sent as query parameters
417 - Cannot be nested (forms inside forms are not allowed)
418 - Automatically includes a header showing the realm name
419
4202. **Input Fields**
421 - Created with ±<gno-input>± tag
422 - Attributes:
423 - ±name±: Unique identifier for the input (required)
424 - ±type±: Type of input (optional, defaults to "text")
425 - ±placeholder±: Hint text shown in the input (optional, defaults to "Enter value")
426 - ±value±: Default value for non-selectable inputs (optional)
427 - ±description±: Description of the input as title (optional - can be used as title for group of one or multiple inputs)
428 - ±required±: Set to "true" to mark the field as required (optional)
429 - ±readonly±: Set to "true" to make the field read-only (optional)
430 - Supported input types:
431 - ±type="text"± (default): For text input
432 - ±type="number"±: For numeric values only (with browser validation)
433 - ±type="email"±: For email addresses (with basic browser validation)
434 - ±type="tel"±: For phone numbers (no specific validation)
435 - ±type="password"±: For password input (masked characters)
436 - ±type="radio"±: For single selection from a group (requires ±value± attribute)
437 - ±type="checkbox"±: For multiple selections (requires ±value± attribute)
438 - Additional attributes for radio/checkbox:
439 - ±value±: The value to submit when selected (required for radio/checkbox)
440 - ±checked±: Set to "true" to pre-select the option (optional)
441 - Note: Input validation is handled by the browser's HTML5 validation
442 - Any other type will default to "text"
443 - Each input must have a unique name
444 - Inputs are rendered with labels and proper styling
445
4463. **Textarea Fields**
447 - Created with ±<gno-textarea>± tag
448 - Required attributes:
449 - ±name±: Unique identifier for the textarea (required)
450 - ±placeholder±: Hint text shown in the textarea (optional, defaults to "Enter value")
451 - Optional attributes:
452 - ±value±: Default content for the textarea (optional)
453 - ±rows±: Number of visible rows (2-10, defaults to 4)
454 - ±required±: Set to "true" to mark the field as required (optional)
455 - ±readonly±: Set to "true" to make the field read-only (optional)
456 - Perfect for longer text input like messages, descriptions, or comments
457 - Each textarea must have a unique name
458 - Textareas are rendered with labels and proper styling
459
4604. **Select Fields**
461 - Created with ±<gno-select>± tag (similar to radio buttons)
462 - Required attributes:
463 - ±name±: Unique identifier for the select group (required). Use underscores to separate words.
464 - ±value±: The value to submit and display text (required)
465 - Optional attributes:
466 - ±description±: Description of the select group (optional)
467 - ±selected±: Set to "true" to pre-select the option (optional)
468 - ±required±: Set to "true" to mark the field as required (optional)
469 - Multiple ±<gno-select>± elements with the same ±name± form a select group
470 - All options with the same ±name± form a group where only one can be selected
471 - The ±value± attribute serves both as the submitted value and the displayed text
472
473#### Example Use Cases
474
4751. Form with Path and Query Parameters
476±±±markdown
477<gno-form path="user">
478 <gno-input name="username" type="text" placeholder="Enter username" />
479 <gno-input name="age" type="number" placeholder="Your age" />
480</gno-form>
481±±±
482
483<gno-form path="user">
484 <gno-input name="username" type="text" placeholder="Enter username" />
485 <gno-input name="age" type="number" placeholder="Your age" />
486</gno-form>
487
488This form will submit to ±:user?username=value&age=value± on the same realm.
489
4902. Form with Query Parameters Only
491±±±markdown
492<gno-form>
493 <gno-input name="recipient" type="text" placeholder="Enter recipient address" description="Recipient Information" />
494 <gno-input name="email" type="email" placeholder="Your email" />
495 <gno-input name="pswd" type="password" placeholder="Your password" />
496</gno-form>
497±±±
498
499<gno-form>
500 <gno-input name="recipient" type="text" placeholder="Enter recipient address" description="Recipient Information" />
501 <gno-input name="email" type="email" placeholder="Your email" />
502 <gno-input name="pswd" type="password" placeholder="Your password" />
503</gno-form>
504
505This form will submit to ±?recipient=value&email=value&pswd=value± on the same realm.
506
5073. Form with Radio Buttons
508±±±markdown
509<gno-form>
510 <gno-input name="color" type="radio" value="blue" description="What is your favorite color?" />
511 <gno-input name="color" type="radio" value="red" />
512 <gno-input name="color" type="radio" value="green" />
513</gno-form>
514±±±
515
516<gno-form>
517 <gno-input name="color" type="radio" value="blue" description="What is your favorite color?" />
518 <gno-input name="color" type="radio" value="red" />
519 <gno-input name="color" type="radio" value="green" />
520</gno-form>
521
522Radio 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.
523
5244. Form with Checkboxes
525±±±markdown
526<gno-form>
527 <gno-input name="interests" type="checkbox" value="coding" description="What do you like to do?"/>
528 <gno-input name="interests" type="checkbox" value="gaming" />
529 <gno-input name="interests" type="checkbox" value="reading" />
530 <gno-input name="newsletter" type="checkbox" value="subscribe" description="Subscribe to newsletter" placeholder="To get the latest news" checked="true" />
531</gno-form>
532±±±
533
534<gno-form>
535 <gno-input name="interests" type="checkbox" value="coding" description="What do you like to do?" />
536 <gno-input name="interests" type="checkbox" value="gaming" />
537 <gno-input name="interests" type="checkbox" value="reading" />
538 <gno-input name="newsletter" type="checkbox" value="subscribe" description="Subscribe to newsletter" placeholder="To get the latest news" checked="true" />
539</gno-form>
540
541Checkboxes allow users to select multiple options. Use ±checked="true"± to pre-select a checkbox.
542
5435. Form with Textarea
544±±±markdown
545<gno-form>
546 <gno-input name="message" type="text" placeholder="Subject" />
547 <gno-textarea name="content" placeholder="Enter your message here" rows="6" />
548</gno-form>
549±±±
550
551<gno-form>
552 <gno-input name="message" type="text" placeholder="Subject" />
553 <gno-textarea name="content" placeholder="Enter your message here" rows="6" />
554</gno-form>
555
556Textareas are perfect for longer text input. The ±rows± attribute controls the height (4-10 rows, default is 4).
557
5586. Form with Select Options
559±±±markdown
560<gno-form>
561 <gno-select name="country" value="United States" description="Select your country" />
562 <gno-select name="country" value="France" />
563 <gno-select name="country" value="Germany" />
564</gno-form>
565±±±
566
567<gno-form>
568 <gno-select name="country" value="United States" description="Select your country" selected="true" />
569 <gno-select name="country" value="France" />
570 <gno-select name="country" value="Germany" />
571</gno-form>
572
573Select 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.
574
5757. Complex Form with Mixed Elements
576±±±markdown
577<gno-form path="contact">
578 <gno-input name="name" type="text" placeholder="Your full name" description="Your Information" />
579 <gno-input name="email" type="email" placeholder="Your email address" />
580 <gno-input name="age" type="number" placeholder="Your age" />
581
582 <gno-input name="color" type="radio" value="blue" description="What is your favorite color?" />
583 <gno-input name="color" type="radio" value="red" />
584 <gno-input name="color" type="radio" value="green" />
585
586 <gno-input name="interests" type="checkbox" value="tech" description="What do you like to do?" />
587 <gno-input name="interests" type="checkbox" value="sports" />
588 <gno-input name="interests" type="checkbox" value="music"/>
589
590 <gno-select name="country" value="us" text="United States" description="Select your country" />
591 <gno-select name="country" value="fr" text="France" />
592 <gno-select name="country" value="de" text="Germany" />
593
594 <gno-textarea name="message" placeholder="Tell us about yourself" rows="5" />
595</gno-form>
596±±±
597
598<gno-form path="contact">
599 <gno-input name="name" type="text" placeholder="Your full name" description="Your Information" />
600 <gno-input name="email" type="email" placeholder="Your email address" />
601 <gno-input name="age" type="number" placeholder="Your age" />
602
603 <gno-input name="color" type="radio" value="blue" description="What is your favorite color?" />
604 <gno-input name="color" type="radio" value="red" />
605 <gno-input name="color" type="radio" value="green" />
606
607 <gno-input name="interests" type="checkbox" value="tech" description="What do you like to do?" />
608 <gno-input name="interests" type="checkbox" value="sports" />
609 <gno-input name="interests" type="checkbox" value="music"/>
610
611 <gno-select name="country" value="us" text="United States" description="Select your country" />
612 <gno-select name="country" value="fr" text="France" />
613 <gno-select name="country" value="de" text="Germany" />
614
615 <gno-textarea name="message" placeholder="Tell us about yourself" rows="5" />
616</gno-form>
617
618This example shows how to combine all form element types in a single form.
619
6208. Form with Default Values
621±±±markdown
622<gno-form>
623 <gno-input name="username" type="text" placeholder="Enter username" value="Alice" />
624 <gno-input name="age" type="number" placeholder="Your age" value="42" />
625 <gno-textarea name="bio" placeholder="Short bio" rows="4" value="Super builder" />
626</gno-form>
627±±±
628
629<gno-form>
630 <gno-input name="username" type="text" placeholder="Enter username" value="Alice" />
631 <gno-input name="age" type="number" placeholder="Your age" value="42" />
632 <gno-textarea name="bio" placeholder="Short bio" rows="4" value="Super builder" />
633</gno-form>
634
6359. Form with Readonly Fields
636The ±readonly="true"± attribute makes fields non-editable while displaying their values. This is useful for showing fixed values that users should see but cannot modify.
637
638±±±markdown
639<gno-form>
640 <gno-input name="username" value="alice" readonly="true" description="Your fixed username" />
641 <gno-input name="role" type="text" value="admin" readonly="true" />
642 <gno-input name="status" type="radio" value="active" checked="true" readonly="true" description="Account status" />
643 <gno-input name="status" type="radio" value="inactive" readonly="true" />
644 <gno-input name="verified" type="checkbox" value="yes" checked="true" readonly="true" />
645 <gno-textarea name="terms" value="Terms and conditions text..." rows="3" readonly="true" />
646 <gno-select name="plan" value="premium" selected="true" readonly="true" description="Your subscription" />
647 <gno-select name="plan" value="basic" readonly="true" />
648</gno-form>
649±±±
650
651<gno-form>
652 <gno-input name="username" value="alice" readonly="true" description="Your fixed username" />
653 <gno-input name="role" type="text" value="admin" readonly="true" />
654 <gno-input name="status" type="radio" value="active" checked="true" readonly="true" description="Account status" />
655 <gno-input name="status" type="radio" value="inactive" readonly="true" />
656 <gno-input name="verified" type="checkbox" value="yes" checked="true" readonly="true" />
657 <gno-textarea name="terms" value="Terms and conditions text..." rows="3" readonly="true" />
658 <gno-select name="plan" value="premium" selected="true" readonly="true" description="Your subscription" />
659 <gno-select name="plan" value="basic" readonly="true" />
660</gno-form>
661
662**Note**: For text-based inputs and textareas, the HTML ±readonly± attribute is used. For radio buttons, checkboxes, and select dropdowns, ±disabled± is used instead since ±readonly± doesn't work on these elements in HTML.
663
66410. Form with Required Fields
665The ±required="true"± attribute marks fields as mandatory. Required fields display a "(required)" badge next to their label and use HTML5 browser validation.
666
667±±±markdown
668<gno-form>
669 <gno-input name="username" placeholder="Enter username" required="true" />
670 <gno-input name="email" type="email" placeholder="Your email" required="true" />
671 <gno-textarea name="bio" placeholder="Tell us about yourself" rows="4" required="true" />
672 <gno-select name="country" value="USA" required="true" />
673 <gno-select name="country" value="France" />
674 <gno-select name="country" value="Germany" />
675</gno-form>
676±±±
677
678<gno-form>
679 <gno-input name="username" placeholder="Enter username" required="true"/>
680 <gno-input name="email" type="email" placeholder="Your email" required="true" />
681 <gno-textarea name="bio" placeholder="Tell us about yourself" rows="4" required="true" />
682 <gno-select name="country" value="USA" required="true" />
683 <gno-select name="country" value="France" />
684 <gno-select name="country" value="Germany" />
685</gno-form>
686
687Required fields are validated by the browser before submission. The form cannot be submitted until all required fields are filled.
688
68911. Exec Form with Manual Fields
690When using the ±exec± attribute, a command preview appears for the specified function. You must manually define form fields whose ±name± attributes match the function's parameter names, placed in the same order as they appear in the function signature.
691
692±±±markdown
693<gno-form exec="CreatePost">
694 <gno-input name="title" type="text" placeholder="Post title" />
695 <gno-textarea name="content" rows="5" placeholder="Post content"></gno-textarea>
696 <gno-input name="tags" type="text" placeholder="Comma-separated tags" />
697</gno-form>
698±±±
699
700<gno-form exec="CreatePost">
701 <gno-input name="title" type="text" placeholder="Post title" />
702 <gno-textarea name="content" rows="5" placeholder="Post content"></gno-textarea>
703 <gno-input name="tags" type="text" placeholder="Comma-separated tags" />
704</gno-form>
705
706The command preview shows the full gnokey command with placeholders for each field value.
707
70812. Exec Form with All Field Types
709Here's an example demonstrating all supported field types in a single exec form:
710
711±±±markdown
712<gno-form exec="CreateProfile">
713 <gno-input name="username" placeholder="Your username" description="Profile Information" />
714 <gno-input name="age" type="number" placeholder="Your age" />
715 <gno-textarea name="bio" placeholder="Tell us about yourself" rows="4" />
716 <gno-select name="country" value="USA" description="Select your country" />
717 <gno-select name="country" value="France" />
718 <gno-select name="country" value="Germany" />
719 <gno-input name="visibility" type="radio" value="public" description="Profile visibility" required="true" />
720 <gno-input name="visibility" type="radio" value="private" />
721 <gno-input name="notifications" type="checkbox" value="email" description="Notifications" checked="true" />
722 <gno-input name="notifications" type="checkbox" value="sms" />
723</gno-form>
724±±±
725
726<gno-form exec="CreateProfile">
727 <gno-input name="username" placeholder="Your username" description="Profile Information" value="alice" />
728 <gno-input name="age" type="number" placeholder="Your age" />
729 <gno-textarea name="bio" placeholder="Tell us about yourself" rows="4" />
730 <gno-select name="country" value="USA" description="Select your country" />
731 <gno-select name="country" value="France" />
732 <gno-select name="country" value="Germany" />
733 <gno-input name="visibility" type="radio" value="public" description="Profile visibility" required="true" />
734 <gno-input name="visibility" type="radio" value="private" />
735 <gno-input name="notifications" type="checkbox" value="email" description="Notifications" checked="true" />
736 <gno-input name="notifications" type="checkbox" value="sms" />
737</gno-form>
738
739All field types update the command preview in real-time as you interact with them.
740
741#### Important Rules
742
7431. **Validation Rules**:
744 - Every ±<gno-input>± must have a ±name± attribute
745 - Every ±<gno-textarea>± must have a ±name± attribute
746 - Every ±<gno-select>± must have a ±name± and ±value± attribute
747 - Duplicate attribute names are not allowed (except for radio, checkbox, and select groups)
748 - Forms must be properly closed
749 - Nested forms will not render
750 - Radio and checkbox inputs must have a ±value± attribute
751 - The ±checked± attribute is only valid for radio and checkbox inputs
752 - The ±selected± attribute is only valid for ±<gno-select>± elements
753 - The ±readonly="true"± attribute makes fields non-editable (works on all field types)
754 - The ±required="true"± attribute marks fields as required (works on input, textarea, and select)
755 - Textarea ±rows± attribute must be between 2 and 10 (defaults to 4 if invalid or not specified)
756
7572. **Security Features**:
758 - Forms are processed on the realm where they are defined
759 - Each form submission is associated with its realm
760 - The realm name is displayed in the form header
761 - Input validation is handled by the realm's smart contract
762
763---
764
765### Alerts
766
767Alerts are a way to highlight important information in your markdown.
768
769There are five types of alerts:
770
771- INFO
772- NOTE
773- TIP
774- SUCCESS
775- WARNING
776- CAUTION
777
778**NOTE**: The default alert type is INFO (if a wrong alert type is used).
779
780The alert boxes are expandable/collapsible and can have a title.
781By default, the alert boxes are opened. The title is optional and if not provided, the alert type will be used as the title.
782
783±±±markdown
784> [!NOTE]
785> This is a note
786±±±
787
788> [!NOTE]
789> This is a note
790
791±±±markdown
792> [!NOTE]-
793> This is a closed note
794±±±
795
796> [!NOTE]-
797> This is a closed note
798
799±±±markdown
800> [!NOTE] This is a note with title
801> This is a note with title
802±±±
803
804> [!NOTE] This is a note with title
805> This is a note with title
806
807±±±markdown
808> [!INFO]
809> This is an info
810±±±
811
812> [!INFO]
813> This is an info
814
815±±±markdown
816> [!TIP]
817> This is a tip
818±±±
819
820> [!TIP]
821> This is a tip
822
823±±±
824> [!SUCCESS]
825> This is a success
826±±±
827
828> [!SUCCESS]
829> This is a success
830
831±±±
832> [!WARNING]
833> This is a warning
834±±±
835
836> [!WARNING]
837> This is a warning
838
839±±±
840> [!CAUTION]
841> This is a caution
842±±±
843
844> [!CAUTION]
845> This is a caution
846
847±±±markdown
848> [!FOO]
849> The default alert if a wrong alert type is used
850±±±
851
852> [!FOO]
853> This is the default alert
854
855±±±markdown
856> [!NOTE]
857> This is a note
858> > [!NOTE]
859> > This is a scoped note
860±±±
861
862> [!NOTE]
863> This is a note
864> > [!NOTE]
865> > This is a scoped note
866
867### User Mentions and Bech32 Addresses
868
869Gno markdown automatically recognizes and renders user mentions and Bech32 addresses as clickable links.
870
871#### User Mentions
872
873// You can mention users using the "@" symbol followed by a username. The username can contain letters, numbers, and underscores.
874
875±±±markdown
876Hello @alice, how are you doing?
877
878This is a mention of @bob_user and @test-123.
879
880You can also mention users like @user_name_123.
881±±±
882
883
884Hello @alice, how are you doing?
885
886This is a mention of @bob_user.
887
888You can also mention users like @user_name_123.
889
890#### Bech32 Addresses
891
892Gno markdown can automatically recognize and render valid Bech32 addresses as clickable links.
893
894±±±markdown
895This is a GNO address: g1jg8mtutu9khhfwc4nxmuhcpftf0pajdhfvsqf5
896
897You can also reference g1abc123def456ghi789jkl012mno345pqr678stu901vwx234yz5.
898±±±
899
900This is a GNO address: g1jg8mtutu9khhfwc4nxmuhcpftf0pajdhfvsqf5
901
902You can also reference g1abc123def456ghi789jkl012mno345pqr678stu901vwx234yz5.
903
904### Smart Contract Integration
905
906XXX: TODO
907
908±±±markdown
909gno.land/r/boards
910gno.land/r/boards:foo/bar
911gno.land/r/docs/markdown$source
912±±±
913
914gno.land/r/boards
915gno.land/r/boards:foo/bar
916gno.land/r/docs/markdown$source
917
918### And more...
919
920XXX: TODO
921
922## Future Enhancements
923
924The markdown support in Gno is being actively developed. Future enhancements may include:
925
926- Extended support for custom components
927- Interactive elements specific to blockchain functions
928- Rich rendering of on-chain data
929- Better integration with Gno's package system
930
931[Read more](https://github.com/gnolang/gno/issues/3255)
932
933## Conclusion
934
935Markdown 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.
936
937As the Gno ecosystem grows, expect the markdown capabilities to expand accordingly, providing even richer formatting and interactive elements for documentation and user interfaces.
938
939## See Also
940
941For programmatic markdown generation using Go code, check out the [±p/moul/md± demo](/r/docs/moul_md) which demonstrates how to use the ±p/moul/md± package to generate markdown content in your Gno realms.
942`
943 output = strings.ReplaceAll(output, "±", "`")
944 return output
945}
