CODEWITHSUNDEEP
markdownjekyll
Sig
Sig

Reputation: 5986

How to inject HTML in Jekyll

On a Jekyll (2.5.3) app, I'd like to inject some HTML for styling, but I have a hard time doing so.

Here my code

_config.yml

...
markdown: kramdown
highlighter: rouge
...

page.md

[Google](https://google.com/) <div class="info">new</div>

But this produces, once built, the following

Google <div class="info">new</div>

The HTML is not parsed but simply rendered as text.

After some googling, I have tried 

<div class="info" markdown="1">new</div>

end

markdown: kramdown
kramdown:
  parse_block_html: true
highlighter: rouge

but the outcome is always the same.

Am I missing anything here?

Thanks.

Upvotes: 4

Views: 2670

Answers (2)

Waylan
Waylan

Reputation: 42637

The rules state regarding raw HTML (emphasis added):

The only restrictions are that block-level HTML elements — e.g. <div>, <table>, <pre>, <p>, etc. — must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Markdown is smart enough not to add extra (unwanted) <p> tags around HTML block-level tags.

Therefore, you would need to do:

[Google](https://google.com/)

<div class="info">new</div>

Of course, if you actually want both on the same line (or at least in the same paragraph), then you need to use inline HTML tags. As the rules state (emphasis added):

Span-level HTML tags — e.g. <span>, <cite>, or <del> — can be used anywhere in a Markdown paragraph, list item, or header. If you want, you can even use HTML tags instead of Markdown formatting; e.g. if you’d prefer to use HTML <a> or <img> tags instead of Markdown’s link or image syntax, go right ahead.

Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.

Therefore, you could do:

[Google](https://google.com/) <span class="info">new</span>

As you are using Kramdown, you may also find Kramdown's syntax documentation helpful with regard to raw HTML. Kramdown also includes support for the non-standard Attribute Lists feature, which would allow you to assign attributes to the resulting HTML without using raw HTML in your Markdown. However, the attributes can only be assigned to elements which can be represented in Markdown. As Markdown does not have any way to natively represent divs or spans, you would not be able to use those. However, you could assign your class to a paragraph:

[Google](https://google.com/)

new
{: .info }

The above would generate the following HTML:

<p><a href="https://google.com/">Google</a></p>
<p class="info">new</p>

Notice that the info class has been assigned to the second <p>.

Alternatively, you could assign a class to an inline element (such as emphasis):

[Google](https://google.com/) *new*{: .info }

Which results in the following output:

<p><a href="https://google.com/">Google</a> <em class="info">new</em></p>

Of course, you will have italics text unless your CSS for the info class turns it off, which may or may not be what you want. Sometimes, just using raw HTML directly in your Markdown is easier.

Upvotes: 5

marcanuy
marcanuy

Reputation: 23982

If you want them to appear inline, use html:

 <a href="https://google.com">Google </a><span class="info">new</div>

If they can be in two lines, using pure markdown:

 [Google](https://google.com/) 

 new
 {: .info}

Upvotes: 0

Related Questions