There are a number of display widgets and shortcodes available. All the shortcodes mentioned on this page are defined in [/docs/layouts/_shortcodes](https://github.com/yugabyte/yugabyte-db/tree/master/docs/layouts/_shortcodes/). ## Heading (Skipping ToC) To remove unnecessary headings from ToC. ```md # For Heading 2 {{}}Consistency{{}} # For Heading 3 {{}}Consistency{{}} # For Heading 4 {{}}Consistency{{}} # For Heading 5 {{}}Consistency{{}} # For Heading 6 {{}}Consistency{{}} ``` ## Admonition boxes Use the note, tip, and warning shortcodes to create admonition boxes. ### Tip {{< tip title="Tip" >}} A tip box gives a hint or other helpful but optional piece of information. {{< /tip >}} ```md {{}} A tip box gives a hint or other useful but optional piece of information. {{}} ``` ### Note {{< note title="Note" >}} A note box gives some important information that is often not optional. {{< /note >}} ```md {{}} This is a note with a [link](https://www.yugabyte.com). {{}} ``` ### Warning {{< warning title="Warning" >}} A warning box informs the user about a potential issue or something to watch out for. {{< /warning >}} ```md {{}} This is a warning with a [link](https://www.yugabyte.com). {{}} ``` ## Iconified links You can add a link to a url with an icon using the `link` shortcode which takes url as a string argument. Internal and external links will have different icons. You can use the `:version` variable to expand to all versions. - {{}} : _External link_ `{{}}` - {{}} : _Relative internal link_ `{{}}` - {{}} : _Full path internal link_ `{{}}` ## Tables Markdown supports [tables](https://www.markdownguide.org/extended-syntax/#tables). By design, Markdown table rows are on a single line, and adding bullets and multi-line code blocks in table cells has to be done using HTML on a single line. To make creating custom tables simpler, use the _table_ shortcode. For example: ```md {{}} | col-1 | col-2 | | ----- | ----- | | - 1 - 2 - 3 | ```output k | v ---+--- 1 | 2 (1 row) ```| | ```sql insert ```| ```sql update ```| | {{}} start and end rows with the pipe symbol {{}} | {{}} Use 3 ticks for code blocks with pipe symbols {{}} | {{}} ``` The above markdown should render a table as follows: {{}} | col-1 | col-2 | | ----- | ----- | | - 1 - 2 - 3 | ```output k | v ---+--- 1 | 2 (1 row) ```| | ```sql insert ```| ```sql update ```| | {{< warning title="Beware" >}} start and end rows with the pipe symbol {{}} | {{< tip title="Awesome tip" >}} Use 3 ticks for code blocks with pipe symbols {{}} | {{

}} ## Inline section switcher An inline section switcher lets you switch between content sections **without a separate URL**. If you want to link to sub-sections inside a switcher, use tabs. This widget looks as follows: ![Inline section switcher](https://raw.githubusercontent.com/yugabyte/docs/master/contributing/inline-section-switcher.png) The corresponding code for this widget is as follows. Note that the actual content must be placed in a file with the `.md` extension inside a subdirectory; name the subdirectory such that it can be associated with the switcher title. ```html

``` ## Include content from other files The [includeCode](#includecode) shortcode inserts the contents of a file as plain text, while `readfile` and [includeMarkdown](#includemarkdown) insert the contents of a file _and renders it as markdown_. ### includeCode Because it doesn't make its own code block, you can use this shortcode to build a code block from several sources. The base path is `/docs/static/`. This shortcode strips trailing whitespace from the input file. **Call `includeCode`** in a fenced code block: ````markdown ```sql {{%/* includeCode file="code-samples/include.sql" */%}} ``` ```` **To nest the code block**, tell the shortcode how many spaces to indent: ````markdown 1. To do this thing, use this code: ```sql {{%/* includeCode file="code-samples/include.sql" spaces=4 */%}} ``` ```` **To specify highlighting options**, do so on the fenced code block. This is a Hugo feature, not part of the shortcode. For example, add a highlight to lines 1 and 7-10: ````markdown ```sql {hl_lines=[1,"7-10"]} {{%/* includeCode file="code-samples/include.sql" */%}} ``` ```` {{< tip >}} For more information on highlight options, see the Hugo docs on [highlighting in code fences](https://gohugo.io/content-management/syntax-highlighting/#highlighting-in-code-fences) and [supported syntax highlighting languages](https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages). {{< /tip >}} ### includeMarkdown Inserts the contents of a markdown file, rendered as part of the calling page. We use this primarily for [syntax diagrams](../syntax-diagrams/). ## Landing Page sections ### Learn through section This widget looks as follows: ![Learn through section](/images/contribute/learn-through-section.png) The corresponding code for this widget is as follows. ```go {{}} ``` To change image background to transparent, add `imageTransparent=true` in the code as shown below ```go {{}} ``` ## Other shortcodes Note that the way you invoke a shortcode matters. Use angle brackets (< and >) to output plain text, and percent signs (%) to have Hugo render the output as Markdown. For example, use `{{}}` to output a bare URL for inclusion in a Markdown-style link, such as `[YugabyteDB Community Slack]({{}})`: [YugabyteDB Community Slack]({{< slack-invite >}}). Use `{{%/* slack-invite */%}}` to output a clickable URL: {{% slack-invite %}}. ### Incomplete list of other shortcodes slack-invite : Inserts the address for community slack invitations. support-cloud : Inserts the address to open a YugabyteDB Aeon support ticket. support-general : Inserts the address to open a support ticket with no pre-selected product. support-platform : Inserts the address to open a YugabyteDB Anywhere support ticket. yb-version : Inserts the current version of a particular release series. : This shortcode has quite a few options. Refer to the [comments at the top of the file](https://github.com/yugabyte/yugabyte-db/blob/master/docs/layouts/_shortcodes/yb-version.html) for usage details.