mirror of
https://github.com/litruv/lit.ruv.wtf.git
synced 2026-07-24 02:36:02 +10:00
Max Litruv Boonzaayer
a16445dd78
- Updated build process to bundle main and blog scripts separately using esbuild. - Modified HTML files to reference new bundled JavaScript files for improved performance. - Implemented a new blogPage.js script to handle markdown rendering and copy functionality. - Replaced inline markdown rendering with JSON payloads for better separation of content and presentation. - Added Prism.js for syntax highlighting in blog posts. - Improved CSS styles for better layout and scrolling behavior on blog pages.
46 lines
5.2 KiB
HTML
46 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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>
|
|
<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> |