Markdown Feature Demo

This article demonstrates all syntax and features supported by this site's Markdown engine

This site extends Python-Markdown with footnotes, semantic colors, TOC generation, and more. Let's go through them one by one.

Text Styles

Bold, italic, strikethrough, inline code, and combinations: bold italic and code.

Colors use semantic class names, auto-replaced with the current theme color at build time: accent text (c-accent), highlight text (c-highlight), code color (c-code), secondary text (c-dim), pink text (c-pink), green text (c-green).

You can also use font tags for explicit colors (preserved in normal mode, stripped in reading mode): pink / cyan

Heading Levels

You've already seen h1 and h2 above. Here are h3 through h6:

Links and Images

• External link: GitHub
• Internal link: Article Archive
• Anchor link: Jump to Conclusion

Images support alt text and title:

Code Blocks

Inline code uses backtick wrapping. Multi-line code uses fenced syntax; specifying a language enables syntax highlighting:

#!/usr/bin/env python3
"""A simple HTTP server example"""
import http.server
import socketserver
PORT = 8080
class MyHandler(http.server.SimpleHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.end_headers()
        self.wfile.write(b"Hello, 90s Web!")
with socketserver.TCPServer(("", PORT), MyHandler) as httpd:
    print(f"Serving on port {PORT}")
    httpd.serve_forever()

<table width="100%" border="1" bordercolor="#ff66cc">
  <tr><td>Hello</td><td>World</td></tr>
</table>

Code block without language label:

$ python scripts/web_server.py nolog nocount
DragonRSTER`s Void v5.1 - port 81

Lists

• Item one
• Item two, when the content is long it wraps automatically within the 700px column width. Here are some extra words to test the wrapping behavior. Here are some extra words to test the wrapping behavior.
• Item three

1. Step one: open the terminal
2. Step two: type the command
3. Step three: press Enter

Blockquotes

This is a blockquote. SMR drives should not be used for scenarios involving frequent writes and deletes. By design, this causes data shuffling, leading to degraded performance or even freezing. Blockquotes can contain bold, italic, and code. Multi-paragraph quotes only need a > at the start of each paragraph.
Nested quotes:

Second-level quote, let's see how it looks

Third-level quote

Tables

Text inside tables also supports bold and code.

Horizontal Rules

The divider above was created with ---:

Content continues below the divider.

Footnotes

This site implements a Markdown footnote system^[1]. Footnotes are automatically collected at the end of the article with bidirectional links^[2].

Click a footnote link to jump, and there's a return link at the end of each footnote.

Table of Contents Generation

Specify <!-- toc:Custom TOC --> in an HTML comment at the top of the article to manually control the table of contents. This site uses this method to generate the sidebar TOC.

If no <!-- toc: --> comment is written, the TOC is automatically extracted from h2 headings at build time.

Conclusion

This article covers all features of this site's Markdown engine: