Block with HTML markup

You can add HTML markup to an issue description or comments via a dedicated block. With HTML markup, you can create advanced layouts, for example, a report design that you can't make with the regular editor.

You can use an HTML block together with other blocks and markup elements.

Adding a block

Visual editor

Markdown markup

To add an HTML block:

On the toolbar, click → HTML.

You can also use the quick access menu: type / and select a command from the list.
Add your HTML markup and CSS styles inside the block. For example:
```
<h1>HTML block header</h1>

<p>Text in HTML markup.</p>
```

To edit an HTML block:

Click → Edit in the top right corner of the block.
Make your changes and click Save.

To delete an HTML block, click → Delete in the top right corner of the block.

Define the border of the block using markup:
```
::: html

:::
```

Add your HTML markup and CSS styles inside the block. For example:

```
::: html

<h1>HTML block header</h1>

<p>Text in HTML markup.</p>

:::
```

Warning

Please note that you can only use HTML and CSS markup in HTML blocks. YFM markup isn't supported inside a block.

To explore how else you can use HTML, go to the Markdown Editor Playground page.

Using styles

To add styles for your HTML markup elements, add the <style> tag with a description of CSS styles. For example:

::: html

<style>
    header {
        font-size: 100px;
    }
    .info-block {
        margin-bottom: 20px;
    }
</style>

<div class="info-block">
    <h1>HTML block header</h1>
</div>

:::

Allowed CSS properties

Below are CSS properties that you can use in a block. For your convenience, the list is sorted alphabetically.

List of CSS properties

align-content
align-items
align-self

background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size

border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width

box-decoration-break
box-shadow
box-sizing
box-snap
box-suppress

break-after
break-before
break-inside

color
color-interpolation-filters

column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width

columns

display
display-inside
display-list
display-outside

flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap

font
font-family
font-feature-settings
font-kerning
font-language-override
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-start
grid-row
grid-row-end
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

height

justify-content
justify-items
justify-self

letter-spacing

lighting-color

list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top

max-height
max-width

min-height
min-width

object-fit
object-position

order

orphans

padding
padding-bottom
padding-left
padding-right
padding-top

row-gap

text-align
text-align-last
text-combine-upright
text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-height
text-indent
text-justify
text-orientation
text-overflow
text-shadow
text-space-collapse
text-transform
text-underline-position
text-wrap

width

word-break
word-spacing
word-wrap

CSS variables

HTML blocks support CSS variables that follow the service's default styles. You can use them to make your content match other elements on the page. Styles set with CSS variables dynamically adapt to theme changes.

To use CSS variables when declaring styles, write var() in the property value and specify the variable name in curly brackets:

::: html

<style>
    body {
        font-size: var(--yfm-html-font-size);
    }
</style>

:::

Variable	Description
`--yfm-html-color-text-primary`	Color of the main text. It can be used for titles, paragraphs, and buttons.
`--yfm-html-color-text-secondary`	Color of additional text. It can be used for captions and definitions.
`--yfm-html-color-background`	Background color.
`--yfm-html-color-background-secondary`	Text backdrop color.
`--yfm-html-color-link`	Link color.
`--yfm-html-color-link-hover`	Link color when hovered over.
`--yfm-html-color-link-visited`	Visited link color.
`--yfm-html-font-family`	Font name.
`--yfm-html-font`	Font type.
`--yfm-html-font-size`	Font size.
`--yfm-html-line-height`	Line height.

Design themes

You can choose from multiple themes:

Theme	Description
`light`	Light
`light-hc`	High-contrast light (beta)
`dark`	Dark
`dark-hc`	High-contrast dark (beta)

To ensure that your content automatically adapts to theme changes, use one of these options:

CSS variables that already enable dynamic switching between themes.

Set custom styles for different themes using selectors that contain a theme name:

::: html

<style>
    .dark-hc .section,
    .dark .section {
        background-image: url("../dark.png");
    }

    .light-hc .section,
    .light .section {
        background-image: url("../light.png");
    }

    .header {
        color: var(--yfm-html-color-text-primary)
    }
</style>

<div class="section">
    <h1 class="header">Header</h1>
</div>

:::

Was the article helpful?

Diagrams

Setting up an issue reminder