Demo of mylmoe: self-written frontend blog system

mylmoe v0.5 (which is what you are viewing) is released now after the 5th refactoring/rewriting. The post shows demos of various supported Markdown syntax/features/extensions.

Updated on 2022-09-05 & created on 2022-08-21.

demomarkdownmdxgfmmylmoe

TOC

Features

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

Demos

Dividers

md
---

Headings

md
## h2 ### h3 #### h4

h4

You can find auto-generated TOC of the headings and styles of headings except for h4 elsewhere on the page

Code blocks

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

Paragraphs

md
paragraph a1 paragraph a2 paragraph b

paragraph a1 paragraph a2

paragraph b

Tables

md
| table | a | b | | ----- | --- | --- | | a | / | 1 | | b | 1 | / |
tableab
a/1
b1/

Blockquotes

md
> blockquote > > > blockquote > > > > > blockquote

blockquote

blockquote

blockquote

Lists

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

Inlines

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

inline code em strong del

With Link reference definitions

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

link link

Images

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.

md
![relative path, Markdown-style](../public/images/pixiv_86286793_p0.jpg) <img src="/images/pixiv_86286793_p0.jpg" alt="absolute path, HTML-style, with props" width="500px" />

relative path, Markdown-style

absolute path, HTML-style, with props

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 a.k.a. expand/collapse

md
<details> <summary>Just use HTML details & summary</summary> Then things will be done finely </details>

Admonitions

Use directives with admonition or admon as the name to create admonitions. Specify type to set the type of admonition. type is case-insensitive. Available types and respective styles are from admonitions of Material for MkDocs. Specify title to set the admonition title. Or set autoTitle to true value (only autoTitle is not enough since it is parsed to autoTitle="") to automatically get the title from the first non-empty text block (p) of the content. Like Material for MkDocs, without specifying the title, the admonition will have the title defaulting to the capitalized type name.

md
:::::admonition{type="note"} ::::admonition{type="aBsTrAcT"} Type is case-insensitive :::admon{type="info"} Nested admonitions You can abbreviate `admonition` to `admon` ::: :::: ::::: :::admonition{type="tip", title="Custom title"} Tip ::: :::admonition{type="success", autoTitle="1"} Success Automatically get the title from the first non-empty text block of the content ::: :::admonition{type="question"} Question ::: :::admonition{type="warning"} Warning ::: :::admonition{type="failure"} Failure ::: :::admonition{type="danger"} Danger ::: :::admonition{type="bug"} Bug ::: :::admonition{type="example"} Example ::: :::admonition{type="quote"} Quote :::

Note

Abstract

Type is case-insensitive

Info

Nested admonitions

You can abbreviate admonition to admon

Custom title

Tip

Success

Automatically get the title from the first non-empty text block of the content

Question

Question

Warning

Warning

Failure

Failure

Danger

Danger

Bug

Bug

Example

Example

Quote

Quote

Comments

Markdown/HTML comments can be used for Markdown posts:

md
<!-- comment -->

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

jsx
{/* comment */}

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

HTML inlines/blocks

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

  • unordered list
    • list
      • list
  1. ordered list
  2. list
  3. list

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.

LaTeX math inlines/blocks

md
$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=b±b24ac2ax = \frac{-b\plusmn\sqrt{b^2-4ac}}{2a}

x1=b3a+bc6a2b327a3d2a+Δ3+bc6a2b327a2d2a(bc6a2b327a3d2a)2+(c3ab29a2)3x_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})}}
Δ=(bc6a2b327a3d2a)2+(c3ab29a2)3\Delta = (\frac{bc}{6a^2} - \frac{b^3}{27a^3} - \frac{d}{2a})^2 + (\frac{c}{3a} - \frac{b^2}{9a^2})^3

MDX deviations

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.

Copyright (C) 2020, 2021, 2022 myl7
The posts are licensed under CC BY-SA 4.0 by default unless otherwise explicitly stated.
The posts with different licenses would contain a section named License to indicate their respective licenses.
The website source code and raw post text/image files are available on myl7/mylmoe
The website favicon is made and authorized for the use by Freepik from flaticon.com