`: ```text This is one line.
This is the next line. ``` This is one line.
This is the next line. # Best Practices ## Organizing content - Use headers to establish hierarchy - Maintain logical order (avoid skipping levels, e.g., H2 → H4) - Always write meaningful, descriptive headers ## Formatting text - Use **bold** for key emphasis only - Use _italics_ for emphasis or technical terms - Limit formatting combinations to maintain readability ## Links usage - Avoid vague text like “click here” - Prefer root-relative paths for internal links - Regularly validate links to ensure they are not broken --- # Lists and tables > Present structured information using lists or tables. Source: https://docs.doccupine.com/lists-and-tables # Lists and Tables Present structured information using lists or tables. ## Lists Markdown supports both _ordered_ and _unordered_ lists, as well as nested list structures. ### Ordered List Start each item with a number followed by a period to create an ordered list. ```md 1. First item 2. Second item 3. Third item 4. Fourth item ``` 1. First item 2. Second item 3. Third item 4. Fourth item ### Unordered List Use dashes (`-`), asterisks (`*`), or plus signs (`+`) before each item for unordered lists. ```md - First item - Second item - Third item - Fourth item ``` - First item - Second item - Third item - Fourth item ### Nested List Indent items under another to create nested lists. ```md - First item - Second item - Additional item - Additional item - Third item ``` - First item - Second item - Additional item - Additional item - Third item ## Tables Markdown tables use pipes (`|`) to separate columns and hyphens (`---`) to define the header row. Place a pipe at the start and end of each row for better compatibility. ```md | Property | Description | | -------- | -------------------------------------- | | Name | Full name of the user | | Age | Age in years | | Joined | Indicates if user joined the community | ``` | Property | Description | | -------- | -------------------------------------- | | Name | Full name of the user | | Age | Age in years | | Joined | Indicates if user joined the community | --- # Code > Learn how to display inline code and code blocks in documentation. Source: https://docs.doccupine.com/code # Code Learn how to display inline code and code blocks in documentation. ## Adding Code Samples Both inline code snippets and full code blocks are supported. Code blocks offer customization for syntax highlighting and more to improve readability and user experience. ### Inline Code Highlight code within text by wrapping it with backticks: ```text Enclose any `word` or `phrase` in backticks to format it as code. ``` Enclose any `word` or `phrase` in backticks to format it as code. ## Code Blocks To present larger code samples, use triple backticks for fenced code blocks. Each block can be copied, and—if assistant features are enabled—users can request explanations. You may specify the language for highlighting: ````text ```java class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); } } ``` ```` ```java class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); } } ``` ## Highlighting Diffs Show a visual diff of added or removed lines in your code blocks. Each changed line becomes a full-width row tinted with your theme's success or error color, with a matching accent bar down the edge of the window. Set the language to `diff` and prefix each changed line with `+` or `-`: ````text ```diff function calculateTotal(items) { - return items.reduce((sum, item) => sum + item.price, 0); + const total = items.reduce((sum, item) => sum + item.price, 0); + return Math.round(total * 100) / 100; } ``` ```` ```diff function calculateTotal(items) { - return items.reduce((sum, item) => sum + item.price, 0); + const total = items.reduce((sum, item) => sum + item.price, 0); + return Math.round(total * 100) / 100; } ``` ## File Names Add a `title` to a code block to display a file name in the window bar, styled to match the GitHub-style header. Pass it through the `
```
### Theme-aware images
Show different images depending on whether the user is in light or dark mode. Add the `light-only` or `dark-only` className to display an image exclusively in that theme.
```md
```