Login
Create

Inline HTML Last updated July 21, 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>Markdown in HTML sometimes work.</span>

<p>However, **Markdown in HTML** sometimes _not_.</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 => "-"


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.

  • In most cases (DESMOS, YOUTUBE, SOUNDCLOUD, GIPHY), you only need to copy+paste the html code you get with the "copy embed" option.

  • But, for a few special cases, like IMGUR, you need the normal link to the content (not the html code), complete it with /embed and put this into the html code below.
    https://imgur.com/17FOzH4 => "https://imgur.com/17FOzH4/embed"

<iframe src="https://imgur.com/17FOzH4/embed" 
width="50%" 
height="450px" 
style="border:none;">
</iframe>

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

  • WIDTH: Your page's width is constant, so better to define WIDTH in %.
  • 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.


workshop.codes colors

HIGHTLIGHT

var(--primary)

TEXT (major)

var(--white)

TEXT (normal)

var(--text-color)

TEXT (minor)

var(--text-color-dark)

BACKGROUND (general)

var(--body-bg)

BACKGROUND (emphasized item in general)

var(--bg-dark)

BACKGROUND (emphasized area in item)

var(--bg-darker)

BORDER

var(--border-color)

Go to top

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