Inline HTML is escaped by Jekyll

user_247159 0
Viewed 1198

I have a problem with inline HTML in a github page, where inline HTML bullet lists are escaped in tables. The rows of the following table:

| Name | Value                 |
|------|-----------------------|
| one  | <i>foo</i>            |
| two  | <ul><li>bar</li></ul> |

is rendered as:

<tr>
  <td>one</td>
  <td><i>foo</i></td>
</tr>
<tr>
  <td>two</td>
  <td>&lt;ul&gt;&lt;li&gt;bar&lt;/li&gt;&lt;/ul&gt;</td>
</tr>

The bullet list is rendered as expected by the GitHub UI, but in gh-pages, the <ul> is escaped. Why?

jekyll github-pages
3 Answers

This is by design as implemented by Kramdown, which is the Markdown processor that renders Markdown in GitHub pages.

Kramdown treats each new line as a row and doesn't render Markdown bullet lists inside table cells, and instead of rendering HTML, it is escaped and outputted as a single line of text.

You can tell Kramdown to leave the HTML alone and output as is, with the nomarkdown extension. Just wrap the HTML code with {::nomarkdown} ... {:/}

e.g.

| Name | Value                                   |
|------|-----------------------------------------|
| one  | {::nomarkdown}<i>foo</i>{:/}            |
| two  | {::nomarkdown}<ul><li>bar</li></ul>{:/} |
user_2116720

The way I did it (works for GitHub markdown and GitHub Pages (Jekyll)):

<!-- {% raw %} -->
```html
<div no-ui-slider
     slider-options="{{ optionsWithoutStart }}"
     ng-model="sliderPositions"></div>
```
<!-- {% endraw %}) -->

The <!-- --> is seen by GitHub as a comment and the {% raw %} {% endraw %} prevents Jekyll from parsing the curly braces.

On both GitHub and Jekyll (GitHub Pages), the output is:

<div no-ui-slider
     slider-options="{{ optionsWithoutStart }}"
     ng-model="sliderPositions"></div>
user_32063150

I have this three tables as a markdown file. Inside the table there a no HTML elements but HTML encoding.

## Special Symbols

| Symbol | Unicode |  HTML   |
| :----: | ------- | ------- |
|   ™    | 2122    | &#8482; |
|   ©    | 00A9    | &#169;  |
|   ♻    | 267B    | &#9851; |

## Special Symbols (nomarkdown-wrapped)

| Symbol | Unicode |           HTML            |
| :----: | ------- | ------------------------- |
|   ™    | 2122    | {::nomarkdown}&#8482;{:/} |
|   ©    | 00A9    | {::nomarkdown}&#169;{:/}  |
|   ♻    | 267B    | {::nomarkdown}&#9851;{:/} |

## Special Symbols (raw-wrapped)

| Symbol | Unicode |             HTML             |
| :----: | ------- | ---------------------------- |
|   ™    | 2122    | {% raw %}&#8482;{% endraw %} |
|   ©    | 00A9    | {% raw %}&#169;{% endraw %}  |
|   ♻    | 267B    | {% raw %}&#9851;{% endraw %} |

I tried it with {::nomarkdown} ... {:/} and {% raw %} ... {% endraw %} both shows still the symbol and not the HTML as plain text. How can I enforce the plain HTML.

I know that is NOT an answer, but it is to complicated for a comment.

user_106557420
Related