The site implements a dual Markdown processing strategy: Jekyll converts Markdown to HTML at build time using the Kramdown engine, while marked.min.js is loaded from CDN to enable client-side Markdown rendering capabilities. All blog post content undergoes server-side processing, with the client-side library available for potential dynamic use cases.
Related systems: Jekyll Static Site Generation, Mathematical Equation Rendering
The site implements two distinct Markdown processing layers that serve different purposes in the content delivery pipeline.
| Layer | Processor | Timing | Input | Output | Purpose |
|---|---|---|---|---|---|
| Server-Side | Jekyll (Kramdown) | Build time | _posts/**/*.md files | Static HTML in _site/ | Primary content rendering |
| Client-Side | Marked.js v7.0+ | Runtime | Dynamic content (if any) | HTML fragments | On-demand rendering capability |
The site implements two distinct Markdown processing layers that serve different purposes in the content delivery pipeline.
| Layer | Processor | Timing | Input | Output | Purpose |
|---|---|---|---|---|---|
| Server-Side | Jekyll (Kramdown) | Build time | _posts/**/*.md files | Static HTML in _site/ | Primary content rendering |
| Client-Side | Marked.js v7.0+ | Runtime | Dynamic content (if any) | HTML fragments | On-demand rendering capability |
Server-Side Markdown Processing Pipeline
Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html1-249 _site/list-en.html1-248
Jekyll performs Markdown-to-HTML conversion during the static site generation phase. This is the primary mechanism for rendering all blog post content.
Jekyll uses Kramdown as its Markdown engine. Standard configuration (inferred from output):
_posts/en/*.md and _posts/zh/*.md with YAML front matter_site/*-en.html and _site/*-zh.html| Markdown Syntax | HTML Output | Example |
|---|---|---|
### Heading | <h3 id="heading"> | _site/notes/2025-12-06-unpopular-relationship-opinions-en.html193 |
- List item | <ul><li> | _site/notes/2025-12-06-unpopular-relationship-opinions-en.html199-213 |
**bold** | <strong> | _site/notes/2025-12-06-unpopular-relationship-opinions-en.html200 |
<FileRef file-url="https://github.com/lzwjava/lzwjava.github.io/blob/b58ca646/link" undefined file-path="link">Hii</FileRef> | <a href> | _site/yin-wang-zh.html203-216 |
| Code blocks | <div class="language-*"> | Various files |
Example Conversion
Markdown input generates semantic HTML with auto-generated IDs:
Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html193-215 _site/unpopular-relationship-opinions-en.html200-222
While Jekyll handles all primary content rendering, the site loads Marked.js on every page for potential client-side Markdown processing capabilities.
Marked.js CDN Integration
All pages include this script at line 101:
| Attribute | Value | Implication |
|---|---|---|
async | Absent | Synchronous blocking load |
defer | Absent | Executes immediately upon download |
| Position | <head> line 101 | Loads before body renders |
The synchronous loading ensures marked() is available before body content executes, at the cost of blocking page render.
Script Load Sequence
Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html98-101 _site/list-en.html98-101
Marked.js provides a JavaScript API for converting Markdown strings to HTML at runtime.
Once loaded, marked.min.js exposes a global marked object:
Marked.js implements CommonMark + GitHub Flavored Markdown:
| Feature | Syntax | Output |
|---|---|---|
| Headings | ### Text | <h3> |
| Emphasis | **bold** *italic* | <strong> <em> |
| Lists | - item 1. item | <ul><li> <ol><li> |
| Links | <FileRef file-url="https://github.com/lzwjava/lzwjava.github.io/blob/b58ca646/text" undefined file-path="text">Hii</FileRef> | <a href> |
| Code | `code` | <code> |
| Tables | GFM table syntax | <table> |
The URL https://cdn.jsdelivr.net/npm/marked/marked.min.js pulls the latest NPM version without pinning. This auto-updates to new releases but may introduce breaking changes.
Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html101 _site/list-en.html101
While the provided HTML files show no direct JavaScript invocations of marked(), the library's presence suggests several possible use cases:
The library is loaded but not actively used in the static pages. Possible future applications:
marked() functionTo locate actual usage, search for: marked.parse(, marked(, marked.setOptions(
Client-Side Script Integration
Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html234-244 _site/list-en.html233-243
Complete Markdown-to-Page Flow
Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html1-249 _site/list-en.html1-248
| Setting | Value | Purpose |
|---|---|---|
markdown | kramdown | Markdown engine selection |
input | GFM | GitHub Flavored Markdown |
auto_ids | true | Generate heading IDs |
syntax_highlighter | rouge | Code block syntax highlighting |
Markdown Input:
Kramdown Output:
Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html193-213 _site/unpopular-relationship-opinions-en.html200-222
Markdown processing interacts with other content rendering systems on the page.
Content Enhancement Integration
.md to HTMLmarked() function available for dynamic use| Component | Role | Timing | Status |
|---|---|---|---|
| Kramdown | Primary content rendering | Build time | Active |
marked() | Dynamic MD conversion | Runtime | Available but unused |
| MathJax | LaTeX rendering | Runtime | Active |
Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html83-101 _site/list-en.html82-101
Server-Side (Kramdown)
Advantages:
Disadvantages:
Client-Side (Marked.js)
Advantages:
Disadvantages:
The synchronous script loading blocks page render:
Load Timeline:
1. Parse <head>
2. Encounter <script> at line 101
3. Block: Download marked.min.js (~50KB)
4. Block: Execute script
5. Continue to <body>
Optimization
Current (blocks render):
Optimized (non-blocking):
Adding defer would improve load performance since Marked.js is unused for initial render.
Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html101 _site/list-en.html101
| Entity | Type | Purpose |
|---|---|---|
_posts/en/*.md | Source | English Markdown files |
_posts/zh/*.md | Source | Chinese Markdown files |
_site/*-en.html | Output | English HTML files |
_site/*-zh.html | Output | Chinese HTML files |
Jekyll | Tool | Static site generator |
Kramdown | Engine | Markdown-to-HTML processor |
marked.min.js | Script | Client-side MD parser (line 101) |
marked.parse() | Function | Converts Markdown to HTML |
marked() | Function | Shorthand for marked.parse() |
window.marked | Global | Browser global object |
Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html1-249 _site/list-en.html1-248
Refresh this wiki
This wiki was recently refreshed. Please wait 7 days to refresh again.