website/docs: updates style guide code block section (#14088)

* Removed multiline code block section. Added docusaurus style codeblock section. Fixed some capitalisation.

* Update website/docs/developer-docs/docs/style-guide.mdx

Co-authored-by: Dominic R <dominic@sdko.org>
Signed-off-by: Dewi Roberts <dewi@goauthentik.io>

* Added highlighting info and fixed formatting.

* Typo and prettier.

---------

Signed-off-by: Dewi Roberts <dewi@goauthentik.io>
Co-authored-by: Dominic R <dominic@sdko.org>
This commit is contained in:
Dewi Roberts
2025-04-22 18:10:06 +01:00
committed by GitHub
parent 77ee868573
commit fffcb00f39

View File

@ -133,7 +133,7 @@ When writing out steps in a procedural topic, avoid starting with "Once...". Ins
## Formatting guidelines
### Fonts and Font Styling
### Fonts and font styling
- When referring to internal components in authentik, like the policy engine, or blueprints, do not use any special formatting. Link to the relevant documentation when possible.
@ -190,27 +190,57 @@ When you want to show an example (say, a code snippet), start on a new line, use
return False
```
## Component-Based Formatting
## Code blocks
When you want to show sections of code use **Code blocks** to provide syntax highlighting, a copy button, line numbering and line highlighting:
```text
` ` ` yaml showLineNumbers {5} title="/etc/wazuh-indexer/opensearch-security/roles_mapping.yml"
all_access:
reserved: true
hidden: false
backend_roles:
- "wazuh-admin"
- "admin"
hosts: []
users: []
and_backend_roles: []
description: "Maps admin to all_access"
` ` `
```
Which is rendered as:
```yaml showLineNumbers {5} title="/etc/wazuh-indexer/opensearch-security/roles_mapping.yml"
all_access:
reserved: true
hidden: false
backend_roles:
- "wazuh-admin"
- "admin"
hosts: []
users: []
and_backend_roles: []
description: "Maps admin to all_access"
```
- `` ` ` ` yaml `` defines the language used for syntax highlighting. Other languages can be used such as; `jsx`, `python`, `bash` and `text`.
Optional configurations:
- `showLineNumbers`: enables the line numbering on the left-hand side of the code block.
- `title=" "`: defines the title displayed at the top of the code block. This is useful for defining filenames and paths.
- `{5}`: defines the line number that will be highlighted. Ranges and lists can also be used (e.g. `{5, 7, 9-11}`).
- `// highlight-next-line`: is used within a code block to highlight the next line.
- `// highlight-start` and `// highlight-end`: are used within a code block to highlight one or more lines.
More information on codeblocks can be found in the [Docusaurus code block documentation](https://docusaurus.io/docs/markdown-features/code-blocks).
## Component-based formatting
This section covers the usage of React components within our documentation. Files that use component-based formatting must use the `.mdx` extension.
### Multiline Code Blocks
For displaying multiline code blocks, especially when variables need to be defined, use the **`IntegrationsMultilineCodeblock`** React component. Insert the following lines wherever you want the code block to appear:
```jsx
import IntegrationsMultilineCodeblock from "@site/src/components/MultilineCodeblock";
<IntegrationsMultilineCodeblock>
{`
OIDC_DISCOVERY_URL=https://<em>authentik.company</em>/application/o/<em>your-application-slug</em>/
`}
</IntegrationsMultilineCodeblock>;
```
This is especially useful for configuration files like JSON, YAML, or `.env` files, where placeholders must be replaced.
### Tabs for Multiple Configurations
### Tabs for multiple configurations
Use **Tabs** to display different configurations (e.g., setting up authentication with OIDC vs. SAML) to help users navigate between options. Default to the easier or more common option. Insert the following lines wherever you want the code block to appear:
@ -232,7 +262,7 @@ import TabItem from "@theme/TabItem";
Tabs improve readability when presenting different configurations or setup options.
## Error Message Formatting and Troubleshooting
## Error message formatting and troubleshooting
When documenting error messages:
@ -259,14 +289,14 @@ Example:
- Reset your password if necessary
- Contact an administrator if your account is locked
## Accessibility Best Practices
## Accessibility best practices
- Avoid using color as the sole method of conveying information (e.g., "Click the red button"). Instead, use descriptive labels to ensure accessibility.
- Provide **descriptive link text**. Avoid using generic terms like "Click here". Be specific about where the link will take the user.
- **DON'T:** "Click here."
- **DO:** "See the [Authentication Settings](/) for more details."
## Notes and Warnings
## Notes and warnings
For notes and important information: