diff --git a/docs/_docset.yml b/docs/_docset.yml index 46fee7df3..08fee4e09 100644 --- a/docs/_docset.yml +++ b/docs/_docset.yml @@ -13,6 +13,8 @@ subs: serverless-short: Serverless ece: "Elastic Cloud Enterprise" eck: "Elastic Cloud on Kubernetes" + ech: "Elastic Cloud Hosted" + kib: "Kibana" features: primary-nav: false @@ -68,6 +70,7 @@ toc: - folder: syntax children: - file: index.md + - file: quick-ref.md - file: headings.md - file: admonitions.md - file: applies.md diff --git a/docs/syntax/img/annotations.png b/docs/syntax/img/annotations.png new file mode 100644 index 000000000..1218597ff Binary files /dev/null and b/docs/syntax/img/annotations.png differ diff --git a/docs/syntax/img/bear.png b/docs/syntax/img/bear.png new file mode 100644 index 000000000..117c9465a Binary files /dev/null and b/docs/syntax/img/bear.png differ diff --git a/docs/syntax/img/headings.png b/docs/syntax/img/headings.png new file mode 100644 index 000000000..2e07aba99 Binary files /dev/null and b/docs/syntax/img/headings.png differ diff --git a/docs/syntax/img/nav-title.png b/docs/syntax/img/nav-title.png new file mode 100644 index 000000000..d97c4abc2 Binary files /dev/null and b/docs/syntax/img/nav-title.png differ diff --git a/docs/syntax/quick-ref.md b/docs/syntax/quick-ref.md new file mode 100644 index 000000000..3a94d5b4b --- /dev/null +++ b/docs/syntax/quick-ref.md @@ -0,0 +1,702 @@ +--- +navigation_title: "Quick reference" +--- + +# Syntax quick reference + +This page offers quick guidance on Elastic Docs v3 syntax, including usage tips. Elements are in alphabetical order. The [full syntax guide](index.md) provides implementation details. + +## Admonitions + +Use admonitions to caution users, or to provide helpful tips or extra information. + +::::{dropdown} Types + +These examples show the syntax first, followed by the rendered admonition. + + **Warning** + + ```markdown + :::{warning} + Users could permanently lose data or leak sensitive information. + ::: + ``` + :::{warning} + Users could permanently lose data or leak sensitive information. + ::: + + **Important** + + ```markdown + :::{important} + Less dire than a warning. Users might encounter issues with performance or stability. + ::: + ``` + :::{important} + Less dire than a warning. Users might encounter issues with performance or stability. + ::: + + **Note** + ```markdown + :::{note} + Supplemental information that provides context or clarification. + ::: + ``` + :::{note} + Supplemental information that provides context or clarification. + ::: + + **Tip** + ```markdown + :::{tip} + Advice that helps users work more efficiently or make better choices. + ::: + ``` + :::{tip} + Advice that helps users work more efficiently or make better choices. + ::: + + **Custom** + ```markdown + :::{admonition} Special note + Custom admonition with custom label. + ::: + ``` + :::{admonition} Special note + Custom admonition with custom label. + ::: + +:::: + +**DOs**
+✅ Use custom admonitions as needed + +**DON'Ts**
+❌ Stack admonitions
+❌ Overload a page with too many admonitions
+
+ +--- + +## Anchors + +A default anchor is automatically created for each [heading](#headings), in the form `#heading-text` (hyphenated, lowercase, special characters and spaces trimmed). To create a custom anchor, add it in square brackets at the end of a heading: `[my-better-anchor]` + +:::{dropdown} Default anchor +```markdown +#### Hello world! + +``` +::: + + +:::{dropdown} Custom anchor +```markdown +#### Hello world! [get-started] +``` +::: + +**DOs**
+✅ Create custom anchors for repeated structural headings like "Example request"
+ +**DON'Ts**
+❌ Include punctuation marks in custom anchors
+❌ Define custom anchors in text that is not a heading + +[More details: Links →](links.md#same-page-links-anchors) +
+
+ +--- + +## Applies to + +Tags that identify technical contexts: the feature base (stack/serverless), deployments, and project types that a piece of content "applies to." Use `applies_to` tags to help users determine whether content is right for their deployments and configuration. For more guidance, see +[](../versions/content-patterns.md) and the [full syntax guide](applies.md). + +:::{tip} +The `applies_to` tags are scope signals for readers, not comprehensive metadata. If a page contains general information that applies to all contexts, it doesn't need tags. +::: + +### Page-level tag + +:::{dropdown} Syntax + +This example includes version and release phase facets, which aren't always needed. + +```yaml +--- +applies_to: + stack: 9.0 + deployment: + ece: preview + eck: beta 9.0.1 + ess: + self: 9.0 + serverless: + elasticsearch: + observability: deprecated + security: + product: +--- +``` +::: + + +### Section tag + +:::{dropdown} Syntax +````markdown +# Stack-only content +```{applies_to} +stack: +``` +```` +::: + +:::{dropdown} Output +#### Stack-only content +```{applies_to} +stack: +``` +::: + +### Inline tag + +For details on inline tags, see the [full syntax reference](applies.md). + +**DOs**
+✅ Define a set of page-level `applies_to` tags in a front matter block
+✅ Add `{applies_to}` after a heading to indicate that section's contexts
+✅ Indicate versions (`major.minor` with an optional `[.patch]`) and release phases like `beta` + +**DON'Ts**
+❌ Add `applies_to` tags to general, broadly applicable content
+❌ Use `applies_to` tags as metadata or to represent "aboutness"
+❌ Include `applies_to` tags in admonitions
+❌ Use `Coming (x.x.x)` tags, except in special cases (don't pre-announce features)
+ + +[More details: Applies to →](applies.md) +
+
+ +--- + +## Code blocks + +Multi-line blocks for code, commands, configuration, and similar content. Use three backticks ` ``` ` on separate lines to start and end the block. For syntax highlighting, add a language identifier after the opening backticks. + +:::{dropdown} Syntax +```markdown + ```yaml + server.host: "0.0.0.0" + elasticsearch.hosts: ["http://localhost:9200"] + ``` +``` +::: + +:::{dropdown} Output +```yaml +server.host: "0.0.0.0" +elasticsearch.hosts: ["http://localhost:9200"] +``` +::: + + +**DOs**
+✅ Include code blocks within lists or other block elements as needed
+✅ Add language identifiers like `yaml`, `json`, `bash` + +**DON'Ts**
+❌ Place code blocks in admonitions
+❌ Use inline code formatting (single backticks) for multi-line content
+ +[More details: Code →](code.md) +
+
+ +--- + +## Code callouts + +Inline annotations that highlight or explain specific lines in a code block. + +### Explicit callout +To explicitly create a code callout, add a number marker in angle brackets (`<1>`, `<2>`, ...) at the end of a line. Add the corresponding callout text below the code block, in a numbered list that matches the markers. + +:::{dropdown} Syntax + + ```markdown callouts=false + ```json + { + "match": { + "message": "search text" <1> + } + } + ``` + 1. Searches the `message` field for the phrase "search text" +::: + +:::{dropdown} Output + +```json +{ + "match": { + "message": "search text" <1> + } +} +``` +1. Searches the `message` field for the phrase "search text"
+::: + +### Magic (comment-based) callout [magic-callout] +Add comments with `//` or `#` to magically create callouts. + +:::{dropdown} Syntax + ````markdown callouts=false + ```json + { + "match": { + "message": "search text" // Searches the message field + } + } +::: + +:::{dropdown} Output +```markdown + ```json + { + "match": { + "message": "search text" // Searches the message field + } + } + ``` +``` + +::: + +**DOs**
+✅ Keep callout text short and specific
+✅ Use only one type of callout per code block (don't mix [explicit](#explicit-callout) and [magic](#magic-callout))
+✅ For explicit callouts, make sure you have a corresponding list item for each callout marker in the code. + +**DON'Ts**
+❌ Overuse callouts -- they can impede readability
+ +[More details: Code callouts→](code.md#code-callouts) +
+
+ +--- + +## Comments + +Use `%` to add single-line comments. Use HTML-style `` for multi-line comments. + +:::{dropdown} Syntax +```markdown + % This is a comment + This is regular text + + + Regular text after multi-line comment +``` +::: + +:::{dropdown} Output +% This is a comment +This is regular text + + +Regular text after multi-line comment + +::: + +**DOs**
+✅ Add a space after `%` to start a single-line comment
+ +**DON'Ts**
+❌ Use `#` or `//` for comments; they're reserved for [magic callouts](#magic-callout)
+ +
+ +--- + +## Dropdowns + +Collapsible blocks for hiding and showing content. + +::::{dropdown} Syntax +```markdown + :::{dropdown} Title or label + Collapsible content + ::: +``` +:::: + +::::{dropdown} Output +:::{dropdown} Title or label +Collapsible content +::: +:::: + +**DOs**
+✅ Use dropdowns for text, lists, images, code blocks, and tables
+✅ Add `:open:` to auto-expand a dropdown by default + +**DON'Ts**
+❌ Use dropdowns for very long paragraphs or entire sections
+ +[More details: Dropdowns →](dropdowns.md) +
+
+ +--- + +## Headings +Title of a page or a section. To create a heading, add number signs `#` at the beginning of the line (one `#` for each heading level). + +:::{dropdown} Syntax +```markdown +# Heading 1 +## Heading 2 +### Heading 3 +#### Heading 4 +``` +::: + +::::{dropdown} Output +:::{image} img/headings.png +:screenshot: +:alt: Heading levels +:width: 300px +::: + +:::: + +**DOs**
+✅ Start every page with a Heading 1
+✅ Use only one Heading 1 per page
+✅ Define custom anchors for repeated headings
+ +**DON'Ts**
+❌ Use headings in tabs or dropdowns
+❌ Go deeper than Heading 4 + +[More details: Headings →](headings.md) +
+
+ +--- + +## Images +Standard Markdown images: `[alt text]` in square brackets, followed by the image path in parentheses. + +:::{dropdown} Syntax +```markdown +![Bear emerging from hibernation](img/bear.png) +``` +::: + +:::{dropdown} Output +![Bear emerging from hibernation](img/bear.png) +::: + +**DOs**
+✅ Store images in a centralized directory
+✅ Follow v3 [best practices for screenshots](../versions/index.md#screenshots)
+✅ Specify `:screenshot:` in an [image directive](images.md#screenshots) to add a border
+ +**DON'Ts**
+❌ Use lots of UI screenshots that create a maintenance burden
+❌ Include confidential info or PII in an image
+❌ Add a drop shadow or torn edge effect + +[More details: Images →](images.md) +
+
+ +--- + + +## Inline formatting +Elastic Docs v3 supports standard Markdown inline formatting. + +`_emphasis_`     _italics_
+`**strong**`    **bold**
+\` `monospace` \`     `inline code` (single backticks)
+`~~strikethrough~~`     ~~strikethrough~~
+`\* escaped`     \* escaped character
+ +**DOs**
+✅ Use `_emphasis_` to introduce a term
+✅ Use inline `code` in headings and other elements as needed + +**DON'Ts**
+❌ Overuse `**strong**` or `_emphasis_` -- aim for readability +
+
+ +--- + +## Links + +Standard Markdown links to doc pages, sections (anchors), or external content. Prefer absolute paths for links within the doc set. + +:::{dropdown} Syntax +```markdown + [link text](/absolute/file.md#anchor) + [link text](https://external-site.com) + [link text](other-repo://path/file.md) + (#same-page-anchor) +``` +::: + +**DOs**
+✅ Use inline formatting in link text: `[**bold link**](bold-page.md)`
+✅ Autogenerate link text from the page or section title: `[](use-title.md#section)`
+✅ Define a custom [anchor](#anchors) by adding `[anchor-text]` at the end of a heading line + +**DON'Ts**
+❌ Use unclear, inaccessible link text like "click here" or "this"
+❌ Include terminal punctuation in link text + +[More details: Links →](links.md) +
+
+ +--- + +## Lists + +Standard Markdown ordered (numbered) and unordered (bulleted) lists. Indent with four spaces to nest paragraphs and other elements under a list item. Unordered lists can start with hyphens `-`, asterisks `*`, or plus signs `+`. + +:::{dropdown} Syntax + + ``` + - Unordered item 1 + ····Paragraph within item 1 + - Unordered item 2 + ``` + + ``` + 1. Ordered item 1 + 2. Ordered item 2 + ``` +::: + +**DOs**
+✅ Add code blocks, images, admonitions, and other content within a list item
+✅ Nest lists, mixing ordered and unordered as needed
+✅ Use parallel structure and phrasing in list items
+✅ Capitalize only the first word of list items (sentence case)
+✅ Use terminal punctuation consistently and only for complete sentences
+ +**DON'Ts**
+❌ Use lists solely for layout purposes
+❌ Use lists for structured data or comparisons — use tables instead + +[More details: Lists →](lists.md) +
+
+ +--- + +## Navigation title + +Optional [front matter](frontmatter.md) element that sets a custom title for docs navigation features: appears in the left nav (table of contents), breadcrumbs, and previous/next links. Compare [headings](#headings) (H1 = page title). + +:::{dropdown} Syntax + +Page front matter (yaml): + +```yaml + --- + navigation_title: "Minimalist identifier" + --- +``` + +Page title (Markdown H1): + +```markdown + # Full descriptive page title with product context +``` + +::: + +:::{dropdown} Output + +![Rendered nav title](img/nav-title.png) + +::: + + +**DOs**
+✅ Use active phrasing and shorter forms
+✅ Make sure the navigation title clearly identifies the page topic
+✅ Omit product names that appear in the full H1 page title + +**DON'Ts**
+❌ Duplicate the H1 page title
+❌ Use a long navigation title or lots of punctuation
+❌ Abbreviate with periods or ellipses + +[More details: Title →](./titles.md) +
+
+ +--- + +## Substitutions +Key-value pairs that define reusable variables. They help ensure consistency and enable short forms. To use a substitution (or "sub"), surround the key with curly brackets: `{{variable}}`
+ +% TODO: link to our global docset.yml? + +### Define a sub + +:::{dropdown} Syntax + +In `docset.yml`: + +``` +subs: + ccs: "cross-cluster search" + ech: "Elastic Cloud Hosted" + kib: "Kibana" +``` +::: + + +### Use a sub + +This example uses the sub defined in `docset.yml` above. + +:::{dropdown} Syntax + +In `myfile.md`: + +``` +{{ech}} supports most standard {{kib}} settings. +``` +::: + +:::{dropdown} Output +% TODO replace with actual subs once _docset.yml is updated + +Elastic Cloud Hosted supports most standard Kibana settings. +::: + +**DOs**
+✅ Check the global `docset.yml` file for existing product and feature name subs
+✅ Use substitutions in code blocks by setting `subs=true`
+✅ Define new page-specific substitutions as needed + +**DON'Ts**
+❌ Override a `docset.yml` sub by defining a page-level sub with the same key (causes build errors)
+❌ Use substitutions for common words that don't need to be standardized + +[More details: Substitutions →](./substitutions.md) +
+
+ +--- + +## Tabs + +Block element that displays content in switchable tabs to help users zero in on the right context (such as a deployment or language). [Synced tab groups](https://elastic.github.io/docs-builder/syntax/tabs/#tab-groups) are supported. + +:::::{dropdown} Syntax +```markdown + ::::{tab-set} + + :::{tab-item} Tab 1 title + Tab 1 content + ::: + + :::{tab-item} Tab 2 title + Tab 2 content + ::: + + :::: +``` +::::: + +:::::{dropdown} Output +::::{tab-set} + +:::{tab-item} Tab 1 title +Tab 1 content +::: + +:::{tab-item} Tab 2 title +Tab 2 content +::: + +:::: +::::: + +**DOs**
+✅ Use clear, descriptive tab labels
+✅ Make sure all tabs have the same type of content and similar goals
+✅ Keep tab content scannable and self-contained (don't make the user switch tabs to follow steps or compare content)
+✅ Include other block elements in tabs, like [admonitions](#admonitions) + +**DON'Ts**
+❌ Nest tabs
+❌ Split step-by-step procedures across tabs
+❌ Use more than 6 tabs (use as few as possible)
+❌ Use tabs in [dropdowns](#dropdowns) + + +[More details: Tabs →](tabs.md) +
+
+ +--- + +## Tables + +Standard table layout for structured data. Automatically scrolls horizontally if needed. The **header** row is optional. + +:::{dropdown} Syntax +```markdown + | Header | Header | + | ------ | ------ | + | Data | Info | + | Info | Data | +``` +::: + +:::{dropdown} Output +| Header | Header | +| ------ | ------ | +| Data | Info | +| Info | Data | +::: + +**DOs**
+✅ Use leading and trailing pipes for clarity
+✅ Add spaces for readability (they're trimmed)
+✅ Keep cell content scannable and parallel
+✅ Use standard Markdown text alignment when necessary (`:-- --: :--:`)
+ +**DON'Ts**
+❌ Insert block elements or multiple paragraphs in a table cell
+❌ Use a table solely for position or spacing purposes
+ +[More details: Tables →](tables.md) +
+
+ +---