Sample 00 — A Guide to the Six Samples
Start here: choose a sample, follow a reading path, and find the Markdown component or interaction you want to use.
Source: https://lapotron.com/article/sample-guide/
These six sample articles are a small field guide to writing with Glass. They cover everything from a highlighted phrase to a mathematical proof, an interactive chart, or a gallery of images.
Each sample combines an explanation, copyable source, and a rendered result. You can read them in order, follow a path below, or find a particular component in the quick reference. All seven entries in this collection are marked as sample content so they remain distinct from the author's own work.
Choose a starting point
| Sample | What you will learn | A useful first experiment |
|---|---|---|
| 01 — Rich Writing and Reader Conversations | Callouts, highlights, disclosures, rich tabs, Q&A, footnotes, and discussions. | Open a disclosure, change a tab, and follow a footnote. |
| 02 — Mathematics and Scientific Notes | Equations, proofs, tables, macros, STEM packages, numbered references, and citations. | Follow an equation reference and compare its derivation with the table. |
| 03 — Code, Algorithms, and Small Projects | Code presentation, related TypeScript files, folds, terminal frames, and pseudocode. | Expand a folded region and copy the complete source. |
| 04 — Diagrams for Explaining Ideas | Mindmaps, tree layouts, timelines, comparisons, and Mermaid diagrams. | Collapse a mindmap branch, then search for a hidden node. |
| 05 — Images, Galleries, and Visual Comparisons | Figure sizing, captions, galleries, the image viewer, and a comparison divider. | Open a gallery image and move the comparison boundary with the keyboard. |
| 06 — Interactive Data and Learning Widgets | Function plots, representative chart types, quizzes, plain-text tabs, and exports. | Compare a tooltip with the exact-value data table. |
If Markdown itself is new to you, begin with Sample 01 and its ordinary paragraphs and lists. You do not need to learn every component before writing an ordinary paragraph.
Follow a path that fits your work
For essays and tutorials
Begin with Sample 01 to organize an explanation. Continue to Sample 05 when an illustration will help, then use Sample 04 if the relationships deserve a diagram. Add a quiz from Sample 06 only when the reader has something useful to test.
For scientific or mathematical notes
Begin with Sample 02 for assumptions, notation, references, and a worked argument. Use Sample 03 when the note includes an algorithm or implementation. Continue to Sample 06 to present a small dataset alongside its interpretation.
For software explanations
Begin with Sample 03 for copyable source and article-local virtual projects. Use Sample 04 for flows or message exchanges. Add the callouts and disclosures from Sample 01 when a reader needs context or an optional implementation detail.
For visual stories
Begin with Sample 05 for image proportions, captions, and viewing. Continue to Sample 04 for a sequence or comparison. Use Sample 06 when a parameter or dataset gives the reader a meaningful relationship to explore.
Find a component quickly
| You want to… | Start with |
|---|---|
| Highlight a phrase, show keyboard keys, or define an abbreviation | Sample 01: inline notation |
| Explain a warning, optional detail, procedure, or common question | Sample 01: callouts, disclosures, steps, and Q&A |
| Connect an authored question to Giscus or explain reader annotations | Sample 01: reader conversations |
| Typeset a derivation, piecewise expression, matrix, or local macro | Sample 02: equations and notation |
| State and prove a claim, cite a source, or reference a numbered table | Sample 02: scholarly structure |
| Name a code file, mark changed lines, wrap a long line, or fold details | Sample 03: code fences |
| Connect typed examples or present an algorithm in two styles | Sample 03: virtual projects and pseudocode |
| Explore a hierarchy or draw a flow or sequence | Sample 04: mindmaps and Mermaid |
| Compare alternatives or show a process in order | Sample 04: comparisons and timelines |
| Limit a single image's size, collect images, or reveal a before/after view | Sample 05: figures, galleries, and image comparison |
| Explore values, series, intervals, a grid, or a hierarchy | Sample 06: charts |
| Let a reader change a curve, check an answer, or switch a short summary | Sample 06: plots, quizzes, and tabs |
Understand the source-and-result pattern
Most sections show a source fence followed immediately by the live result. To reproduce the presentation, copy the Markdown example, including its outer component or code-fence markers. To copy a program for use elsewhere, use the toolbar on the rendered program block instead.
There are three small pieces of vocabulary to recognize:
- Ordinary Markdown supplies paragraphs, headings, lists, links, and tables.
- Directives use colon fences such as
:::noteor inline forms such as:kbd[Ctrl]. - Interactive widgets use an
interactivecode fence containing validated JSON data.
Containers with nested children use a longer outer colon fence. Mathematics uses $...$ or display $$ delimiters; optional notation packages are selected in article Settings. The samples demonstrate these forms directly rather than replacing the Markdown with opaque application blocks.
Know which controls belong to readers
Public readers can explore charts and mindmaps, view images, open disclosures, switch tabs, and use discussions when configured. Reader preferences, the outline, footnotes, and the annotation rail help navigate the article.
Studio controls serve authors: source completion, math suggestions, image and table previews, TypeScript intelligence, search, minimap, and revision history. A sample may explain those controls, but it does not turn a public code block into a running IDE or execute the code for its reader.
Reuse examples with a clear purpose
- Replace the sample words and datasets with material relevant to your article.
- Keep a caption close to each visual and describe what the reader should notice.
- Preserve a component's stable label when existing references or discussions depend on it.
- Enable the math packages that the source actually needs.
- Check the copied source and the rendered result, including a phone-width view.
The charts use explicitly invented data. The media illustrations are original synthetic drawings, with no camera metadata. Neither is evidence of a real experiment or audience measurement. The mathematics sample distinguishes its own worked calculations from its cited background source.
Review the drafts, then publish a complete collection
The collection starts as seven drafts in Studio's Articles list, titled Sample 00 through Sample 06. Open any one there to edit its source or preview its presentation.
This overview links to the six samples' public article addresses. Publish those destinations before, or together with, the overview when you want readers to navigate the collection. A private preview keeps other drafts private, so a draft's future public address does not become a public page simply because it appears in this guide.
During review, check one representative interaction from each sample as well as its static reading form. A successful example should remain understandable in print or PDF and whenever an optional enhancement is unavailable.
You can now keep the examples you need, remove the ones you do not, and let the article's actual subject determine its structure.