Troubleshooting

Troubleshooting

HTML Rendering Issues

Unexpected behavior can occur in rendered pages due to a number of different reasons. One of these reasons is when the rendered pages are not valid HTML.

Incorrect HTML markup can be due to:

  • nesting block-level elements inside <p> or <span> elements
  • missing <tbody> tags
Example: block-level elements inside <span> elements

<span id="example">

Animal | Trainable? | Price | Remarks
:------|:----------:|------:|--------
Ants   |     no     |     5 |
Bees   |     no     |    20 |
Cats   |    yes     |   100 |
</span>

The table specified by the Markdown syntax above will be rendered as a block-level element, which will be included in a inline span element. This makes the HTML output invalid.

Underlying Error (Example)


A possible fix for the above situation is to wrap the table in a <div> element instead:


<div id="example">

Animal | Trainable? | Price | Remarks
:------|:----------:|------:|--------
Ants   |     no     |     5 |
Bees   |     no     |    20 |
Cats   |    yes     |   100 |
</div>
Markdown Rendering Issues

If you encounter issues in rendering Markdown in a component, it is likely that the Markdown is not being properly recognized due to syntax errors. Signposting is required to inform Markdown to parse the content of a presentation component as Markdown rather than plain text.

You could signpost Markdown either by:

  • using the <markdown>(block level elements) or <md>(inline level elements) tags to wrap the Markdown content.
  • using an empty line without any indentation before the Markdown content
Example: correct Markdown rendering using tags or newline:

CODE:

<box>

**Example1**
</box>

<box> 
<md> **Example2** </md> 
</box>

<box> 
<markdown> **Example3** </markdown> 
</box>

OUTPUT:

Example1

Example2

Example3

Example: Markdown not rendered without singposting

If you notice that relative links in a page pointing to another page no longer works after adding it into a page via <include>, it may be because the relative link no longer points to the correct address in the new page with <include>.

To solve this, change the relative URL into an absolute URL by adding {{ baseUrl }}. This will ensure that the link will always point to the same address regardless of the page it is included in.

Example of using absolute links in <include>