You can use text tiles on a dashboard to describe the other tiles and help viewers understand the information they present. Looker supports a limited version of the Markdown markup language in text tiles, giving you options to format your text or add links and images that can make your dashboards pop.
Markdown syntax supported in text tiles
This page lists the Markdown syntax that is supported for text tiles, with each example shown first in a code block and then as the result.
The styles in which the Markdown elements render on your dashboard tiles may differ from the styles shown here.
Headers
Headers are not supported in legacy dashboards.
Dashboards using the new dashboard experience support header levels 1-6:
# Header level 1
## Header level 2
### Header level 3
#### Header level 4
##### Header level 5
###### Header level 6
Tables
| Tables | Are | Cool |
| ------------- | ------------- | ----- |
| leopards | have spots | $1600 |
| zebras | have stripes | $12 |
| polar bears | are white | $1 |
Tables | Are | Cool |
---|---|---|
leopards | have spots | $1600 |
zebras | have stripes | $12 |
polar bears | are white | $1 |
Only left justification is supported in table columns.
Basic syntax highlighting
`var hw = "Hello World!"`
var hw = "Hello World!"
Emphasis
Emphasis (italics) with *asterisks* or _underscores_.
Strong emphasis (bold) with **asterisks** or __underscores__.
Combined emphasis with **asterisks and _underscores_**.
Emphasis (italics) with asterisks or underscores.
Strong emphasis (bold) with asterisks or underscores.
Combined emphasis with asterisks and underscores.
Numbered lists
1. First ordered list item
2. Another item
1. Actual numbers don't matter, just that it's a number
4. And another item
- First ordered list item
- Another item
- Actual numbers don’t matter, just that it’s a number
- And another item
Unordered lists
* Unordered list can use asterisks
- or minuses
+ or pluses
- Unordered list can use asterisks
- or minuses
- or pluses
Links
[I'm an inline-style link](https://www.google.com)
[I'm a reference-style link][Arbitrary case-insensitive reference text]
[I'm a relative reference to a public repository file](..https://docs.looker.com/assets/images/browse-dashboard-add-text-60.png)
[You can use numbers for reference-style link definitions][1]
Or just use the [link text itself].
URLs and URLs in angled brackets automatically get turned into links.
http://www.example.com or <http://www.example.com> and sometimes
example.com (but not on GitHub, for example).
Some text to show that the reference links can follow later.
[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com
I’m a relative reference to a public repository file
You can use numbers for reference-style link definitions
Or leave it empty and use the link text itself.
URLs and URLs in angled brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).
Some text to show that the reference links can follow later.
Images
Here's our logo:
Inline-style:
![alt text](..https://docs.looker.com/assets/images/Looker_Logo_Purple.png)
Reference-style:
![alt text][logo]
[logo]: ..https://docs.looker.com/assets/images/Looker_Logo_Purple.png
Here’s our logo:
Inline-style:
Reference-style:
To control the size of the image displayed in relation to the tile size, use HTML to call the image and add a percent size parameter:
Here is an example changing the size using the width="50%"
parameter:
<img src="..https://docs.looker.com/assets/images/Looker_Logo_Purple.png" width="50%">
Or, you can provide explicit height and width maximums like this:
<img src="..https://docs.looker.com/assets/images/Looker_Logo_Purple.png" width="500" height="30">
Height and width pixel parameters will NOT set the image to those exact dimensions; rather, the aspect ratio of the image will be “best fit” to those constraints. For example, if the dimensions “width=100 height=30” were set on an image that is originally 200x20 the result would be 100x10 since the logic is roughly “image width exceeds maximum > scale down until width maximum is reached.”
Code highlighting
`<script>Some code</script>.`
<script>Some code</script>.
Horizontal rule
Three or more hyphens
---
Asterisks
***
Underscores
___
Three or more hyphens
Asterisks
Underscores
Blockquotes
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.
This line is part of the same quote.
Quote break
> This is a very long line that will be quoted properly when it wraps. I will keep writing to make sure this is long enough to actually wrap for everyone. Also, you can *put* **Markdown** into a blockquote.
Unsupported Markdown syntax
The following Markdown syntax is not supported in dashboard text tiles:
- Math
- Images with alt text
- Links with alt text
- Language-specific syntax highlighting
- Headers (not supported in legacy dashboards)
- Strikethrough using two tildes
- Sublists
- Indentation