the home site for me: also iteration 3 or 4 of my site
dunkirk.sh
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Code Block Test</title>
7 <link rel="stylesheet" href="sass/css/reset.css">
8 <link rel="stylesheet" href="sass/css/suCSS.css">
9 <link rel="stylesheet" href="sass/css/mods.css">
10 <link rel="stylesheet" href="sass/css/syntax-theme.css">
11 <link rel="stylesheet" href="sass/css/code-blocks.css">
12 <style>
13 body {
14 padding: 20px;
15 }
16 h1 {
17 margin-bottom: 30px;
18 }
19 .test-section {
20 margin-bottom: 40px;
21 }
22 </style>
23</head>
24<body>
25 <h1>Code Block Styling Test</h1>
26
27 <div class="test-section">
28 <h2>With JavaScript (Copy Button)</h2>
29 <blockquote>A comment about this code</blockquote>
30 <pre class="language-javascript" data-lang="javascript">
31<code>// This is some JavaScript code
32function sayHello() {
33 console.log("Hello, world!");
34}
35
36// Call the function
37sayHello();</code></pre>
38 </div>
39
40 <div class="test-section">
41 <h2>Without JavaScript (No Copy Button)</h2>
42 <blockquote>A comment about this CSS</blockquote>
43 <pre class="language-css" data-lang="css">
44<code>/* This is some CSS code */
45.container {
46 display: flex;
47 flex-direction: column;
48 justify-content: center;
49}
50
51.item {
52 color: var(--accent);
53 margin: 10px;
54}</code></pre>
55 </div>
56
57 <div class="test-section">
58 <h2>Regular Pre Tag (No Language)</h2>
59 <pre>
60<code>This is a regular code block
61with no language specified
62and no copy button.</code></pre>
63 </div>
64
65 <div class="test-section">
66 <h2>Inline Code Example</h2>
67 <p>Here's some <code>inline code</code> that should be styled differently.</p>
68 </div>
69
70 <script src="static/js/copy-button.js"></script>
71</body>
72</html>