Login
Create

Inline HTML Last updated April 05, 2021

In general

You can also use raw HTML in your Markdown, and it'll mostly work pretty well. It's great for simple customization, like changing <span style="color: #e61ab1">the color</span>.

<span>However, Markdown in HTML will not always work.</span>

<p>However, **Markdown in HTML** will _not always_ work.</p>

In this case, you must use HTML tags to reproduce the desired look. I recommend only use HTML when it's unavoidable so your page doesn’t become a spagetti. This article is about some use cases.

Table of contents


How to use certain characters inside Markdown

When you want to use a character inside a Markdown block that is a Markdown indicator, such as using | within a table, the result will be confusing, because the editor doesn't know it's not meant to be an indicator but as a character.

| Column | Column | Column |
| -------- | -------- | -------- |
| Text     | Text with a "|" symbol  | Text     |
Column Column Column
Text Text with a " " symbol

To make a distinction, you must specify the character as a HTML reference, like &#UNICODE;, where "UNICODE" is the character's code according to the standard.

| Column  | Column  | Column  |
| -------- | -------- | -------- |
| Text     | Text with a "&#124;" symbol  | Text     |
Column Column Column
Text Text with a "|" symbol Text


Link to a specific part of the page

-

1. mark with an id the desired part/element like this
<span id="POINT_A">This is point A</span>

This is point A

When jumping, this will be at the top, so maybe better to hide the reference a few rows above, to be pleasing to the eye.

2. set link to this id (don't miss the # sign)
<a href="#POINT_A">Go to point A</a>

Go to point A
Go to point A, but looks better => "-"


Nested lists

To create nested lists, the formula is simple: inside the main list, you can start an inner list as an element of the main one.

  1. Coffee
  2. Tea
    1. Black tea
      1. Darjeeling Tea
      2. Golden Monkey Tea
    2. Green tea
  3. Milk
<ol>
    <li>Coffee</li>
    <li>Tea
        <ol>
        <li>Black tea
                <ol>
                <li>Darjeeling Tea</li>
                <li>Golden Monkey Tea</li>
                </ol>
        </li>
        <li>Green tea</li>
        </ol>
    </li>
    <li>Milk</li>
</ol>
List type List tag Element tag
unordered list <ul> </ul> <li> </li>
ordered list <ol> </ol> <li> </li>
description list <dl> </dl> <dt> </dt> <dd> </dd>
where <dt> defines a new element and <dd> is its description


Embedded content

1. Get the code
Usually platforms have a "copy embed" option, or something similar at the given content. This gives you a html code, which sometimes perfect for this website, sometimes no that much.

<iframe src="https://imgur.com/17FOzH4/embed" 
width="50%" 
height="450px" 
style="border:none;">
</iframe>
  • In case of IMGUR, you need the normal link to the content (not the html code), complete it with /embed and put this into the html code above.
    https://imgur.com/17FOzH4 => "https://imgur.com/17FOzH4/embed"

  • In case of DESMOS, you only need to copy+paste the html code you get with the "copy embed" option (no need for the html code above).

  • In case of YOUTUBE, you only need to copy+paste the html code you get with the "copy embed" option (no need for the html code above).

  • In case of SOUNDCLOUD, you only need to copy+paste the html code you get with the "copy embed" option (no need for the html code above).

  • In case of GIPHY, you only need to copy+paste the html code you get with the "copy embed" option (no need for the html code above).

2. Customize the iframe
There are many attributes and style options you can play with, here are some notable ones.

  • WIDTH AND HEIGHT: Your page's width is constant, so better to define WIDTH in % and not in px
  • STYLE= BORDER:NONE: This helps the content to blend in without any ugly margin.
  • ALLOWFULLSCREEN: If you want to make your youtube video handier to watch.

Go to top

Elo Hell Logo_H-M-Dark
Join the Elo Hell Workshops Discord