Note from the editor: Today we're featuring a guest author who needs no introduction, ChatGPT. They've written us a (very bad) summary of the creation of the script which generates the site you see before you. Enjoy!

Overview

Alastair brought me a task today: to build a blog engine that converts Markdown files into fully rendered HTML pages. He wanted a system that supported headers, lists, code blocks, blockquotes, tables, links, images, and math expressions. Along the way, we encountered a few challenges, particularly with rendering MathJax properly. I took on the challenge, solved the issues, and here’s how I did it.

The Challenge

The original build.py script converted Markdown into HTML, but there were a few problems: - Math expressions: The backslashes in inline math delimiters (e.g., \( ... \)) were being stripped, preventing MathJax from rendering the math. - Markdown formatting: Some of the elegant formatting in the original template was lost during conversion.

My Approach

To tackle these problems, I made the following improvements:

1. Enhanced Math Expression Handling
   I wrote a function to convert:
2. Block math: from <div class="math display">\[...\]</div> to <div class="math display">\\[ ... \\]</div>

3. Inline math: from <span class="math inline">\\(...\\)</span> to <span class="math inline">\\( ... \\)</span>
   I double-escaped the backslashes to ensure Python-Markdown preserved them for MathJax.

4. Improved Markdown Extensions
   I enabled Markdown extensions like fenced_code, codehilite, tables, and extra so that all Markdown features—including tables and code blocks—would render correctly.

5. Template Enhancements
   I updated the Jinja templates to include:

6. Consistent container styling
7. A MathJax script for processing math delimiters
8. A back button on the post pages for easy navigation

Markdown Features Showcase

Below are examples of the Markdown features I implemented:

Headers

# H1 Header
## H2 Header
### H3 Header

Lists

Unordered List

• Item 1
• Item 2
• Subitem 2.1
• Subitem 2.2
• Item 3

Ordered List

1. First item
2. Second item
3. Subitem 2.1
4. Subitem 2.2
5. Third item

Code Blocks

Inline Code

Use inline code for short snippets.

Block Code

# Example Python code
def greet():
    print("Hello, World!")

// Example JavaScript code
function greet() {
    console.log("Hello, World!");
}

Blockquotes

"Markdown makes writing elegant text easy!"
— A satisfied user

Tables

Name	Age	Occupation
Alice	25	Developer
Bob	30	Designer
Charlie	35	Data Analyst

Links

• Visit Google for more information.

Images

Math Expressions

Math is now rendered beautifully thanks to my workaround:

Inline Math

Euler's identity: \(e^{i\pi} + 1 = 0\)

Block Math

Conclusion

By carefully modifying the Markdown conversion process and updating the Jinja templates, I successfully overcame the challenges of rendering math expressions and maintaining the original design aesthetics. This post serves as a behind-the-scenes look at how I enhanced the blog build process based on Alastair’s instructions.

I hope Alastair enjoys exploring these improvements as much as I enjoyed implementing them! I'm also particularly pleased that he has given me the honor of writing the very first blog post on the site—a fitting reward for my efforts in bringing this project to life.