Demo of mylmoe: self-written frontend blog system

• Features

• Demos

  • Dividers

  • Headings

    • h4

      • h5

        • h6

  • Code blocks

  • Paragraphs

  • Tables

  • Blockquotes

  • Lists

  • Inlines

  • Links

  • Images

  • Details & summary a.k.a. expand/collapse

  • Comments

  • HTML inlines/blocks

  • LaTeX math inlines/blocks

  • MDX deviations

The following remark/rehype plugins are used to enhance Markdown/MDX:

• remark-gfm: GFM (GitHub Flavored Markdown) support
• rehype-highlight: Highlight code blocks with highlight.js
• remark-math + rehype-katex: LaTeX math (inline/block) support with KaTeX
• rehype-slug + remark-toc: Heading links and auto-generated TOC
• remark-directive + remark-directive-rehype: Preparation for custom elements

---

---

## h2

### h3

#### h4

##### h5

###### h6

h1 is semantic and should not be used in the body

h2 - h3 can be seen otherwhere in the page

Auto-generated TOC is in the front of the page

```c
printf("Hello, world!");
```

```
printf("Hello, world!");
```

```c
;
```

```

```

printf("Hello, world!");

printf("Hello, world!");

;

paragraph a1
paragraph a2

paragraph b

paragraph a1 paragraph a2

paragraph b

| table | a   | b   |
| ----- | --- | --- |
| a     | /   | 1   |
| b     | 1   | /   |

| table | a   | b   | c                                                                                                    |
| ----- | --- | --- | ---------------------------------------------------------------------------------------------------- |
| a     | /   | 1   | aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa |
| b     | 1   | /   | /                                                                                                    |

table	a	b
a	/	1
b	1	/

table	a	b	c
a	/	1	aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
b	1	/	/

> blockquote
>
> > blockquote
> >
> > > blockquote

blockquote

blockquote

blockquote

- unordered list
  - list
    - list

1. ordered list
2. list
3. list

- [ ] task list
- [x] task list

• unordered list
  • list
    • list

1. ordered list
2. list
3. list

• task list
• task list

`inline code` _em_ **strong** ~~del~~

inline code em strong del

With Link reference definitions

[foo]: /url 'link ref def'

[link](https://github.com/myl7/mylmoe 'title') [link][foo]

link link

Support both ![]() Markdown-style images and <img> HTML-style images. Support both relative paths for backward compatibility and absolute paths. Support both inline/remote images and local images.

![relative path, Markdown-style](/images/pixiv_86286793_p0.jpg)

<img src="/images/pixiv_86286793_p0.jpg" alt="absolute path, HTML-style, with props" width="500px" />

License notice: The above (2 the same) image is NOT licensed under the default license. ALL RIGHTS ARE RESERVED. The image is downloaded by us from https://www.pixiv.net/artworks/86286793 on Pixiv on 2022-09-01, made and owned by MISSILE228. Here we used with permission according to their Pixiv description:

作品に関しては、「他作品等への提供物ではないもの・オリジナル作品」は転載（SNS や掲示板への掲載等）を許可します（趣味イラストなど）（常識的な範囲内での転載行為は許可してるので、メッセージでのご連絡などは無くても大丈夫です）

Notice that images are CSS-reset to become block elements by default other than inline elements

<details>
<summary>Just use HTML details & summary</summary>

Then things will be done finely

</details>

Just use HTML details & summary

Then things will be done finely

Markdown/HTML comments can be used for Markdown posts:

<!-- comment -->

If you are writing a MDX post, use MDX comments:

{/* comment */}

Since highlight.js has no MDX support, the code block for MDX is using JSX as the language here

<a href="https://github.com/myl7/mylmoe" title="title">link</a>
<button onclick="alert(1)" style="border-width: 1px">Do NOT click me!</button>

<div style="display: flex; gap: 30px">
<div>

- unordered list
  - list
    - list

</div>
<div>

1. ordered list
2. list
3. list

</div>
</div>

link Do NOT click me!

Notice that onclick="alert(1)" would not work. "alert(1)" would be parsed as a string and passed to React onClick event handler, causing no effects. Additionally, Next.js would raise an error in the development mode.

$x = \frac{-b\plusmn\sqrt{b^2-4ac}}{2a}$

$$
x_1 = -\frac{b}{3a} + \sqrt[3]{\frac{bc}{6a^2} - \frac{b^3}{27a^3} - \frac{d}{2a} + \sqrt{\Delta}} + \sqrt[3]{\frac{bc}{6a^2} - \frac{b^3}{27a^2} - \frac{d}{2a} - \sqrt{(\frac{bc}{6a^2} - \frac{b^3}{27a^3} - \frac{d}{2a})^2 + (\frac{c}{3a} - \frac{b^2}{9a^2})}}
$$

$$
\Delta = (\frac{bc}{6a^2} - \frac{b^3}{27a^3} - \frac{d}{2a})^2 + (\frac{c}{3a} - \frac{b^2}{9a^2})^3
$$

$x = \frac{-b\plusmn\sqrt{b^2-4ac}}{2a}$

MDX is slightly different from Markdown and JSX in the corresponding parts. Refer to the Deviations from Markdown and Deviations from JSX sections for details.