Stuck Trying to Create Custom Notic

[PragmaticCoding]

I have a variant on the MM "notice" type that includes an logo to the left to make it stand out some more. Then I wanted to create a new include along the same lines, but with constant text because I expect to include it in many pages, but in random locations. So I created this file:

<div class="notice--kotlin">
 <img src="/assets/logos/Kotlin.png" alt="Kotlin" style="float:left;margin-right: 10px;margin-top: 10px;" >
 <p style="overflow:auto; float:none">
   While code is this article is written in Kotlin, all of the JavaFX concepts are exactly the same.
   Most of the Kotlin should be intuitively obvious to Java programmers,
   <a href={% link docs/_pages/kotlin-examples.markdown %}>HERE</a>
   but if you need help understanding it, refer to this page:<br> http://www.pragmaticcoding.ca/kotlin/kotlin-examples
 </p>
</div>

But it ends up looking like this:

And the page source looks like this:

<div class="notice--kotlin">
 <img src="[/assets/logos/Kotlin.png](view-source:http://localhost:4000/assets/logos/Kotlin.png)" alt="Kotlin" style="float:left;margin-right: 10px;margin-top: 10px;" />
 <p style="overflow:auto; float:none">
   While code is this article is written in Kotlin, all of the JavaFX concepts are exactly the same.
   Most of the Kotlin should be intuitively obvious to Java programmers,
   &lt;a href=/kotlin/kotlin-examples&gt;HERE&lt;/a&gt;
   but if you need help understanding it, refer to this page:<br /> http://www.pragmaticcoding.ca/kotlin/kotlin-examples
 </p>
</div>

How do I stop it escaping the "<>" stuff in the content?