Markup reference

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\ l8v n7c30utmeeih2vl 7text styles docid\ l8v n7c30utmeeih2vl 7links docid\ l8v n7c30utmeeih2vl 7images docid\ l8v n7c30utmeeih2vl 7videos docid\ l8v n7c30utmeeih2vl 7lists docid\ l8v n7c30utmeeih2vl 7tables docid\ l8v n7c30utmeeih2vl 7code docid\ l8v n7c30utmeeih2vl 7callouts docid\ l8v n7c30utmeeih2vl 7math docid\ l8v n7c30utmeeih2vl 7mermaid diagrams docid\ l8v n7c30utmeeih2vl 7archbee components docid\ l8v n7c30utmeeih2vl 7 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\ l8v n7c30utmeeih2vl 7 \[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 using inlineimage \ inlineimage\[]{src="/files/icons/ptt button light png"} this is how an inline image appears in a paragraph use the following icons for flipper one controls ptt light button ( ptt button light png ) ptt orange button ( ptt button orange png ) touchpad ( touchpad png ) touchpad left right movement ( touchpad left right png ) touchpad up down movement ( touchpad up down png ) touchpad four way movement ( touchpad four way movement png ) esc button ( esc button png ) view button ( rview button png ) power button with led off ( power button led off png ) power button with green led ( power button led green png ) power button with yellow led ( power button led yellow\ png ) edit button ( edit button png ) run button ( run button png ) app switcher button ( app switcher button png ) back light button ( back button light png ) back orange button ( back button orange png ) ok button on the d pad ( dpad ok button png ) down button on the d pad ( dpad down button png ) left button on the d pad ( dpad left button png ) up button on the d pad ( dpad up button png ) right button on the d pad ( dpad right button png ) right or left buttons on the d pad ( dpad left right button png ) up or down buttons on the d pad ( dpad up down button png ) 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 item b item a 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