Skip to content

Frequently Asked Questions

How to set solid color as page background?

Set background color for all pages 

1
2
3
@page {
    background-color: red;
}

Set background color only on the first page (cover page) 

1
2
3
@page:first {
    background-color: red;
}

How to set a header background color? 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
@page {
    --header-background-color: red;
    --header-margin-bottom: 5mm;

    @top-left-corner { 
        content: "";
        background-color: var(--header-background-color); 
        margin-bottom: var(--header-margin-bottom);
    }
    @top-center { 
        content: ""; 
        background-color: var(--header-background-color); 
        margin-bottom: var(--header-margin-bottom);
        width: 100%;
    }
    @top-right-corner { 
        content: "";
        background-color: var(--header-background-color); 
        margin-bottom: var(--header-margin-bottom); 
    }
}
Why are my font styles (e.g. italic or bold) not working?

We provide some preinstalled fonts that should work out of the box.

If you want to use custom font, make sure to upload and include them in your CSS.

Why are my images or markdown not rendered in the report?

Your design may reference the variable incorrectly. Make sure to use this syntax: 

1
<markdown :text="report.executive_summary" />

How to format links like normal text?

If you want all links to appear as normal text, use following CSS: 

1
2
3
4
5
a {
  color: inherit;
  text-decoration: none;
  font-style: inherit;
}

If you want only target specific links, define a CSS class: 

1
2
3
4
5
.link-none {
  color: inherit;
  text-decoration: none;
  font-style: inherit;
}

Then, add the defined class to your links.

HTML: 

1
<a href="https://www.example.com" class="link-none">https://www.example.com</a>
Markdown: 
1
[example.com](https://www.example.com){.link-none}

How to reference the filename in the report?

This is not possible, unfortunately.

However, if you want to display your filename in your report, you might define a custom report field (or generate a dynamic filename like report_{report.customer_name}_{report.title}.pdf) and copy the filename from the preview to the filename textbox.

How to highlight parts of code blocks with custom style?

Highlighting within code-blocks works with the attribute highlight-manual and the marker §§ (see also):

1
2
3
```http highlight-manual
POST /§§important.php§§ HTTP/1.1
```

To customize the hightlight style, add CSS styles for the <mark> tag, e.g.: 

1
2
3
mark {
    background-color: red;
}

How to reduce the padding of code blocks?

Add following rules to CSS 

1
2
3
pre code {
  padding: 0.3em !important;
}

How to increase the space between list marker and text in lists?

Add following rules to CSS 

1
2
3
4
5
6
7
8
/* Bullet list */
ul > li {
  list-style: "\2022    ";
}
/* Numbered list */
ol > li::marker {
  content: counter(list-item) ".   \200b";
}