Markdown Content Demo

Welcome to the Markdown Content Demo!

This demonstrates content/design separation with text inclusion using Super-Simple Includes.

What this example adds to the minimal site:

External Assets: CSS files and fonts in the assets/ directory
Markdown Support: Rich content formatting with .md files
Security Features: HTML escaping for .txt files
Better Organization: Separate files for different types of content

File Format Examples

Links: Visit the project repository
Emphasis: This is italicized and this is bold
Lists: You can create bulleted and numbered lists

Markdown files like this one support rich formatting while plain text files provide security through automatic HTML escaping

The 📜 emoji syntax makes it easy to include content while keeping your HTML clean and focused on structure. Choose the right approach for your content:

.txt files: Plain text that gets HTML-escaped for security
.md files: Rich markdown content that supports formatting like this

Next, try the variables example to see how dynamic content can be added!

About This Example

This example demonstrates text inclusion and markdown with Super-Simple Includes. This builds on the minimal example by adding external assets and markdown support.

Key Features Demonstrated

Text Inclusion: Both .txt and .md files
Markdown Processing: Rich content with links, lists, and formatting
Asset Management: External CSS and fonts
Security: HTML escaping for .txt files

When to Use This Approach

This pattern works well for:

📖 Documentation sites with rich markdown content
📝 Simple blogs where content is written in markdown
🔧 Sites with mixed content - Some plain text, some formatted content
🎨 Custom styling needs - External CSS gives full design control

Content Organization Benefits

Separating content from design makes it easier for:

Content creators to focus on writing without HTML knowledge
Designers to focus on styling without content concerns
Developers to maintain clean HTML structure

The 📜 emoji syntax makes it easy to include content while keeping your HTML clean and focused on structure. Choose the right approach for your content:

.txt files: Plain text that gets HTML-escaped for security
.md files: Rich markdown content that supports formatting

This separation makes websites easier to maintain and update.

Key Features

This example site demonstrates these features:

✅ Text Inclusion: Both .txt and .md file includes
✅ Markdown Support: Rich content formatting with markdown
✅ Asset Management: External CSS and fonts
✅ Content/Design Separation: Content in text files, design in CSS
✅ HTML Escaping: Security through automatic escaping of .txt files

Progression from Minimal Example

This example builds on the minimal site by adding:

External Assets: CSS file and fonts in assets/ directory
Markdown Support: .md files for rich content formatting
Security Demonstration: Shows HTML escaping in action

Core Features

Text Includes: Using 📜filename.txt and 📜filename.md syntax
Markdown Processing: Rich content formatting vs plain text (HTML-escaped)
Asset Management: External CSS, fonts, and other static files
Content/Design Separation: Pure content files vs HTML structure

File Format Guide

Format	Suitable For	Security	Processing
`.txt`	Simple text, code examples	HTML-escaped (safe)	Plain text only
`.md`	Articles, rich content	Raw HTML allowed	Markdown to HTML
`assets/`	CSS, fonts, images	Copied as-is	No processing

Good For

📖 Documentation sites with rich formatting
📝 Simple blogs with markdown articles
🛡️ Security-sensitive applications with controlled content
👥 Teams where content creators write markdown
🎨 Sites that need custom styling and fonts

Next Steps

Try the variables example to see how dynamic content can be added while maintaining clean separation between content, configuration, and design.

HTML Security Demonstration

The content below is included from a .txt file to show how HTML is safely escaped:

This text contains HTML that will be automatically escaped: <script>alert('This would be dangerous if not escaped!');</script> <h1>This heading tag will be visible as text</h1> <a href="https://example.com">This link won't work</a> <img src="evil.jpg" onerror="alert('XSS attempt')"> All these HTML tags are safely escaped and displayed as plain text. This protects against XSS attacks and ensures content remains safe.