diff --git a/docs/sources/panels-visualizations/visualizations/text/index.md b/docs/sources/panels-visualizations/visualizations/text/index.md index 0009bd4c0c5..793f8d07c47 100644 --- a/docs/sources/panels-visualizations/visualizations/text/index.md +++ b/docs/sources/panels-visualizations/visualizations/text/index.md @@ -32,11 +32,12 @@ refs: # Text -Text visualizations enable you to directly include text or HTML in your dashboards. This can be used to add contextual information and descriptions or embed complex HTML. +Text visualizations let you include text or HTML in your dashboards. +This can be used to add contextual information and descriptions or embed complex HTML. -For example, if you want to display important links to your dashboard, you can use a text visualization to add these links: +For example, if you want to display important links on your dashboard, you can use a text visualization to add these links: -{{< figure src="/static/img/docs/text-panel/text-panel.png" max-width="1025px" alt="A text panel showing important links" >}} +{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-text-visualization-v11.6.png" max-width="750px" alt="A text panel showing important links" >}} {{< docs/play title="Text Panel" url="https://play.grafana.org/d/adl33bxy1ih34b/" >}} @@ -46,36 +47,25 @@ Use a text visualization when you need to: - Provide instructions or guidance on how to interpret different panels, configure settings, or take specific actions based on the displayed data. - Announce any scheduled maintenance or downtime that might impact your dashboards. -## Panel options +## Configuration options -{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="" >}} - -## Text options - -Use the following options to refine your text visualization. - -### Mode +{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="" >}} -**Mode** determines how embedded content appears. +### Panel options -{{< admonition type="note" >}} -To allow embedding of iframes and other websites, you need set `allow_embedding = true` in your Grafana `config.ini` or environment variables (depending on your employment). -{{< /admonition >}} - -### Markdown - -This option formats the content as [markdown](https://en.wikipedia.org/wiki/Markdown). - -### HTML +{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="" >}} -This setting renders the content as [sanitized](https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/text/sanitize.ts) HTML. If you require more direct control over the output, you can set the -[disable_sanitize_html](ref:disable_sanitize_html) flag which enables you to directly enter HTML. +### Text options -### Code +Use the following options to refine your text visualization. -This setting renders content inside a read-only code editor. Select an appropriate language to apply syntax highlighting -to the embedded text. + -## Variables +| Option | Description | +| ------ | ----------- | +| Mode | Determines how embedded content appears. Choose from:
  • **Markdown** - Formats the content as [markdown](https://en.wikipedia.org/wiki/Markdown).
  • **HTML** - Renders the content as [sanitized](https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/text/sanitize.ts) HTML. If you require more direct control over the output, you can set the [disable_sanitize_html](ref:disable_sanitize_html) flag which enables you to directly enter HTML.
  • **Code** - Renders content inside a read-only code editor. [Variables](ref:variables) in the content are expanded for display.

To allow embedding of iframes and other websites, you need set `allow_embedding = true` in your Grafana `config.ini` or environment variables (depending on your employment).

| +| Language | When you choose **Code** as your text mode, select an appropriate language to apply syntax highlighting to the embedded text. | +| Show line numbers | Displays line numbers in the panel preview when you choose **Code** as your text mode. | +| Show mini map | Displays a small outline of the embedded text in the panel preview when you choose **Code** as your text mode. | -[Variables](ref:variables) in the content will be expanded for display. +