Markup example

this page is a reference for contributors writing flipper one documentation it covers both standard markdown and archbee specific syntax supported by this wiki the source files live on github at github com/flipperdevices/flipper one docs https //github com/flipperdevices/flipper one docs every merged pull request automatically rebuilds the live site to contribute, fork the repo and open a pull request quick jump headings docid 43g4bbz9vhcuzq4hl9m1etext styles docid 43g4bbz9vhcuzq4hl9m1elinks docid 43g4bbz9vhcuzq4hl9m1eimages docid 43g4bbz9vhcuzq4hl9m1evideos docid 43g4bbz9vhcuzq4hl9m1elists docid 43g4bbz9vhcuzq4hl9m1etables docid 43g4bbz9vhcuzq4hl9m1ecode docid 43g4bbz9vhcuzq4hl9m1ecallouts docid 43g4bbz9vhcuzq4hl9m1emath docid 43g4bbz9vhcuzq4hl9m1emermaid diagrams docid 43g4bbz9vhcuzq4hl9m1earchbee components docid 43g4bbz9vhcuzq4hl9m1e headings flipper one documentation supports headings h1–h3 don't add # heading 1 in the body archbee renders the title field from the yaml frontmatter as the page h1, so an extra # h1 in the body produces two titles start body content at ## h2 \## heading 2 \### heading 3 text styles flipper one docs markdown regular text regular text bold bold italic italic bold italic bold italic strikethrough strikethrough inline code `inline code` links flipper one docs markdown archbee https //archbee com \[archbee]\(https //archbee com) https //example com https //example com \[https //example com]\(https //example com) jump to tables docid 43g4bbz9vhcuzq4hl9m1e \[jump to tables]\( /#tables) ‎ to control whether a link opens in a new tab — and to write short relative hrefs for in docs links — use archbee's \ link\[] directive instead of plain markdown external link (new tab) \ link\[label]{href="https //example com" newtab="true" hasdisablednofollow="false"} ‎ same page anchor (same tab) \ link\[label]{href=" /#section name" newtab="false" hasdisablednofollow="true"} ‎ another page in the docs (optional anchor) \ link\[label]{href="\<relative path> md#section name" newtab="true" hasdisablednofollow="true"} ‎ use a path relative to the current file /other page md — file in the same folder /folder/other page md — file in a subfolder /folder/other page md — file in a sibling folder the #section name anchor is optional anchor ids are derived from the heading text (lowercased, spaces replaced with hyphens) ‎ attribute description href link target supports full urls ( https //example com ), same page anchors ( /#section ), and relative paths to other docs pages ( /other page md , /folder/other page md , /folder/other page md ) append #section to jump to a specific heading newtab "true" opens the link in a new tab, "false" opens it in the same tab use "false" for same page anchor links hasdisablednofollow "false" adds rel="nofollow" to the link (default for external links); "true" removes it images remote url !\[alt text]\(https //example com/image png "caption") remote image ‎ local path !\[alt text]\(/files/pics/test image jpg "caption") local image ​ ‎ to resize or align an image, standard markdown is not enough — use archbee syntax \ image\[]{src="/files/pics/test image jpg" size="40" position="flex start" caption="caption text"} attribute description src path to the image (relative or absolute url) size width value in percent position page alignment when the image is smaller than the content area flex start (left), center , flex end (right) has no effect on caption alignment caption an optional caption is shown below the image always left aligned for local images ‎ inline images you can add inline images to the text using archbee syntax \ inlineimage\[]{src="/files/pics/icon usb c png" alt caption="usb c icon"} this is how an inline image looks in text videos two methods to embed video are supported method 1 youtube — use archbee's embed syntax \ embed\[]{url="https //www youtube com/watch?v=video id"} ​ method 2 self hosted / cdn video — use the archbee iframe component the html you embed goes inside the code=" " attribute, which means every " must be escaped as \&#x22; and every newline as \&#xa; the whole html ends up on one logical line \ iframe{code="\<video\&#xa; autoplay muted loop playsinline style=\&#x22;width 100%; margin 0 !important;\&#x22;\&#xa; src=\&#x22;https //cdn example com/your video mp4\&#x22;\&#xa;>\</video>\&#xa;\<div class=\&#x22;text center mt 2 5 text gray 400 pb 5\&#x22;>\&#xa;caption\&#xa;\</div>" iframeheight="500"} \ conceptually that decodes to caption lists flipper one docs markdown item a nested a 1 item b item a nested a 1 item b first second third 1 first 2 second 3 third divider use or to insert a horizontal divider tables archbee supports two table formats standard markdown pipe tables — simple and readable, but no control over column widths or alignment \| column 1 | column 2 | column 3 | \| | | | \| cell | bold | ✅ | column 1 column 2 column 3 cell bold ✅ ​ html tables — use when you need column widths, cell alignment, or images inside cells header 1header 2header 3cellbold cell✅ attribute description example istableheaderon renders the first row as a bold header "true" / "false" columnwidths comma separated pixel widths per column total must not exceed 660 px "165,330,165" align horizontal alignment on a \<td> element align="center" code & syntax highlighting fenced block with language ```javascript function greet(name) { return `hello, ${name}!`; } ``` function greet(name) { return `hello, ${name}!`; } ​ diff block ```diff \+ added line \ removed line ``` \+ added line \ removed line supported language tags markdown , html , javascript , typescript , python , bash , c , cpp , json , yaml , diff , tex , mermaid , and more callouts archbee supports four callout styles using hint{type=" "} \ hint{type="info"} your text for the info callout here \ your text for the info callout here ‎ \ hint{type="success"} your text for the success callout here \ your text for the success callout here ‎ \ hint{type="warning"} your text for the warning callout here \ your text for the warning callout here ‎ \ hint{type="danger"} your text for the danger callout here \ your text for the danger callout here math archbee only supports math via a fenced tex block inline math ( $ $ ) is not supported ```tex \int { \infty}^{\infty} e^{ x^2} \\, dx = \sqrt{\pi} ``` \int { \infty}^{\infty} e^{ x^2} \\, dx = \sqrt{\pi} mermaid diagrams use a fenced mermaid block supported diagram types flowchart , sequencediagram , classdiagram , gantt , and more flowchart td a\[start] > b{is it markdown?} b yes > c\[render nicely] b no > d\[fallback] c > e\[ship it] d > e flowchart td a\[start] > b{is it markdown?} b yes > c\[render nicely] b no > d\[fallback] c > e\[ship it] d > e ​ sequencediagram participant u as user participant s as system u >>s sends markdown s >>u renders page sequencediagram participant u as user participant s as system u >>s sends markdown s >>u renders page archbee components workflow steps use workflowblock with workflowblockitem for numbered step by step flows \ workflowblock \ workflowblockitem step one title step description \ \ workflowblockitem step two title step description \ \ step one title step description step two title step description two column layout use verticalsplit to place content side by side \ verticalsplit{layout="middle"} \ verticalsplititem left side content \ \ verticalsplititem right side content \ \ left side content right side content expandable section use expandableheading for collapsible content \ expandableheading \### section title content shown when expanded \ section title content shown when expanded