This website has extremely strong markdown support!

The primary reason why I decided to use a prebuild step in the build process to compile markdown and notebooks is to allow for very heavy parsing without resulting in a ginormous amount of JavaScript from being delivered to the browser. This platform uses markdown-it along with many plugins. This page will show many of these features working (or not).

While reading this article, feel free to use inspect element to view the rendered markdown as HTML.

You can even use View Source since by default this website platform is SSG, including all markdown content.

To update the markdown configuration and/or enable / disable different markdown plugins, edit Prerenderer.tsx in /src/notebook/. Most of the markdown configuration is in the constructor of the Prerenderer class.

The markdown processing is very different from Jupyter lab. Some things may not work (LaTeX double dollar sign notation not having newlines before and after). Additionally, the markdown processing supports a lot of features that Jupyter notebook and GitHub do not support.

This platform makes the assumption that all content in Jupyter notebooks rendered can be trusted. Raw HTML in your code will be rendered as raw HTML (though it may get transformed in the React renderer which uses html-to-react with some component substitutions.

Code:

# Heading level 1
## Heading level 2
### Heading level 3
#### Heading level 4
##### Heading level 5
###### Heading level 6

Rendered:

Heading level 1
===============

Heading level 2
---------------

I really like using Markdown.

I think I’ll use it to format all of my documents from now on.

This is the first line.  
And this is the second line.

This is the first line.
And this is the second line.

First line with two spaces after.  
And the next line.

First line with the HTML tag after.<br>
And the next line.

First line with two spaces after.
And the next line.

First line with the HTML tag after.

And the next line.

I just love **bold text**.

I just love __bold text__.

Love**is**bold

Italicized text is the *cat's meow*.

Italicized text is the _cat's meow_.

A*cat*meow

This text is ***really important***.

This text is ___really important___.

This text is __*really important*__.

This text is **_really important_**.

This is really***very***important text.

I just love bold text.

I just love bold text.

Loveisbold

Italicized text is the cat’s meow.

Italicized text is the cat’s meow.

Acatmeow

This text is really important.

This text is really important.

This text is really important.

This text is really important.

This is reallyveryimportant text.

> Here is a blockquote
>
> ...continued

> Another blockquote
>
>> Nested!

> **nested markdown works too!**

Here is a blockquote

…continued

Another blockquote

Nested!

nested markdown works too!

1. First item
2. Second item
3. Third item
4. Fourth item


1. First item
1. Second item
1. Third item
1. Fourth item


1. First item
8. Second item
3. Third item
5. Fourth item


1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item


- First item
- Second item
- Third item
- Fourth item


* First item
* Second item
* Third item
* Fourth item


+ First item
+ Second item
+ Third item
+ Fourth item


- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item


- 1968\. A great year!
- I think 1969 was second best.

* This is the first list item.
* Here's the second list item.

    I need to add another paragraph below the second list item.

* And here's the third list item.

1. First item

2. Second item

3. Third item

4. Fourth item

5. First item

6. Second item

7. Third item

8. Fourth item

9. First item

10. Second item

11. Third item

12. Fourth item

13. First item

14. Second item

15. Third item

    1. Indented item
    2. Indented item

16. Fourth item

• First item
• Second item
• Third item
• Fourth item

• First item
• Second item
• Third item
• Fourth item

• First item
• Second item
• Third item
• Fourth item

• First item

• Second item

• Third item

  • Indented item
  • Indented item

• Fourth item

• 1968. A great year!

• I think 1969 was second best.

• This is the first list item.

• Here’s the second list item.

  I need to add another paragraph below the second list item.

• And here’s the third list item.

1. Open the file.

2. Find the following code block on line 21:

   <html>
       <head>
           <title>Test</title>
       </head>
   

3. Update the title to match the name of your website.

And if you put the language after the first fence block, Highlight.js will be used to perform syntax highlighting!

To a URL somewhere...

![Lorem picsum](https://picsum.photos/200/300)

From the assets directory... (won't render in Jupyter correctly)

![Lorem picsum](/lorem-picsum.jpg) 

Paste in the picture into Jupyter (notebook attachment)

![Lorem picsum](attachment:87ec911d-efa8-46e0-9b3b-bf2f784b6152.png)![image.png](attachment:d9123b38-6941-40ef-996c-21c242a6ba28.png)

Or from notebooks directory or its subdirectory

![Lorem picsum](/assets/objects/feature-test/lorem-picsum.jpg)

To a URL somewhere…

From the assets directory… (won’t render in Jupyter correctly)

Paste in the picture into Jupyter (notebook attachment)

Or from notebooks directory or its subdirectory (won’t render in Jupyter correctly)

Add code inline: At the command prompt, type `nano`.

Or by indentng each line by at least 4 spaces

    <html>
      <head>
      </head>
    </html>

Or by using a fenced block

\```html
<html>
  <head>
  </head>
</html>
\```

Add code inline: At the command prompt, type nano.

Or by indentng each line by at least 4 spaces

<html>
  <head>
  </head>
</html>

Or by using a fenced block

<html>
  <head>
  </head>
</html>

***

---

_________________


<hr />

Basic link:

* My favorite search engine is [Duck Duck Go](https://duckduckgo.com).

Quick link OR email address:

* <https://www.markdownguide.org>
* <[email protected]>


Reference-style links:

* [hobbit-hole][1]
* [hobbit-hole] [1]

[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle 'Hobbit lifestyles'
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (Hobbit lifestyles)
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> 'Hobbit lifestyles'
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> (Hobbit lifestyles)

Basic link:

• My favorite search engine is Duck Duck Go.

Quick link OR email address:

• https://www.markdownguide.org
• [email protected]

Reference-style links:

• hobbit-hole
• [hobbit-hole] 1

In the next page, we will take a look at extended markdown support.