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
• Link to a specific part of the page
• Embedded content
• workshop.codes colors

---

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 "|" 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

---

Go to top