Files
lit.ruv.wtf/website/blog/markdown-test/index.html

59 lines
5.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<title>Markdown Formatting Test - Blog</title>
<meta name="description" content="Lit.ruv.wtf blog posts.">
<link rel="canonical" href="https://lit.ruv.wtf/blog/markdown-test/">
<link rel="icon" type="image/png" sizes="32x32" href="/logos/32px.png">
<link rel="icon" type="image/png" sizes="64x64" href="/logos/64px.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<link rel="stylesheet" href="/styles/main.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-jsx.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
</head>
<body class="blog-page">
<nav class="quick-links" aria-label="Primary">
<a href="/blog.html" class="quick-link">blog</a>
<a href="/docs/" class="quick-link">docs</a>
<a href="https://github.com/litruv" target="_blank" rel="noopener" class="quick-link">github</a>
<a href="https://bsky.app/profile/lit.mates.dev" target="_blank" rel="noopener" class="quick-link">bluesky</a>
<a href="/materials" class="quick-link">materials</a>
</nav>
<header class="blog-scroll-topbar" data-blog-scroll-topbar>
<a class="blog-scroll-logo-link" href="/" aria-label="Back to main site">
<img src="/logos/LogoFull.svg" alt="lit.ruv.wtf" class="blog-scroll-logo" />
</a>
<nav class="blog-scroll-links" aria-label="Scrolled navigation">
<a href="/blog.html" class="quick-link">blog</a>
<a href="/docs/" class="quick-link">docs</a>
<a href="https://github.com/litruv" target="_blank" rel="noopener" class="quick-link">github</a>
<a href="https://bsky.app/profile/lit.mates.dev" target="_blank" rel="noopener" class="quick-link">bluesky</a>
<a href="/materials" class="quick-link">materials</a>
</nav>
</header>
<main class="blog-shell">
<a class="blog-logo-link" href="/" aria-label="Back to main site">
<img src="/logos/LogoFull.svg" alt="lit.ruv.wtf" class="blog-logo" />
</a>
<article class="blog-card" aria-labelledby="blog-post-title">
<header class="blog-post-header">
<h1 id="blog-post-title" class="blog-post-title">Markdown Formatting Test</h1>
<p class="blog-post-meta"><span>September 11, 2026</span><span aria-hidden="true">-</span><span>Test Author</span></p>
<div class="blog-post-tags"><span class="blog-tag">test</span><span class="blog-tag">formatting</span><span class="blog-tag">markdown</span></div>
</header>
<section class="blog-post-content" data-blog-post-content></section>
<script id="blogPostMarkdown" type="application/json">"# Heading 1 test 123\n\n## Heading 2\n\n### Heading 3\n\n#### Heading 4\n\n##### Heading 5\n\n###### Heading 6\n\n## Text Formatting\n\nThis is **bold text** and this is *italic text* and this is ***bold italic text***.\n\nHere's some `inline code` in a sentence.\n\n## Links\n\nHere's a [regular link](https://example.com) and here's a [YouTube link](https://youtube.com/watch?v=test).\n\n## Lists\n\nUnordered list:\n\n* First item\n\n* Second item\n\n* Third item\n\nOrdered list:\n\n1. First step\n2. Second step\n3. Third step\n\n## Code Blocks\n\nStandard JavaScript:\n\n```javascript\nconst hello = \"world\";\nconsole.log(hello);\n\nfunction test() {\n return true;\n}\n```\n\nPython with syntax highlighting:\n\n```python\ndef hello_world():\n print(\"Hello, World!\")\n return True\n```\n\nCode with max height (200px):\n\n```javascript\n// This is a long code block that will scroll\nconst data = [1, 2, 3, 4, 5];\n\nfunction processData(arr) {\n return arr.map(x => x * 2);\n}\n\nconsole.log(processData(data));\n\n// Adding more lines to demonstrate scrolling\nfor (let i = 0; i < 10; i++) {\n console.log(`Iteration ${i}`);\n}\n\n// Even more content\nconst obj = {\n name: \"Test\",\n value: 42,\n nested: {\n deep: true\n }\n};\n```\n\n## Blockquotes\n\n> This is a blockquote.\n> It can span multiple lines.\n> And continues here.\n\n## Horizontal Rule\n\n***\n\n## Images\n\n![1.00](data/blog/media/test.gif \"Caption Test\")\n\n![0.43](data/blog/media/paste-1778405550240-ddf8h.png \"Gobby\")\n\n## Mixed Content\n\n<br />\n\nYou can mix **bold**, *italic*, and `code` in the same paragraph. Here's a [link with](https://example.com) **[bold](https://example.com)** [text](https://example.com) too.\n\n### Nested Lists\n\n* Top level itemsss\n\n* Another top level\n\n * Nested item (if supported)\n\n * Another nested\n\n1. Numbered item\n2. Another numbered\n\n * Mixed with bullets\n\n * More bullets\n\n## Special Characters\n\nTesting special chars: < > & \" '\n\n## Long Paragraph\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n"</script>
</article>
</main>
<script type="module" src="/scripts/blogPage.js"></script>
</body>
</html>