···
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">
17
-
margin-bottom: 30px;
20
-
margin-bottom: 40px;
25
-
<h1>Code Block Styling Test</h1>
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
32
-
function sayHello() {
33
-
console.log("Hello, world!");
36
-
// Call the function
37
-
sayHello();</code></pre>
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 */
47
-
flex-direction: column;
48
-
justify-content: center;
52
-
color: var(--accent);
57
-
<div class="test-section">
58
-
<h2>Regular Pre Tag (No Language)</h2>
60
-
<code>This is a regular code block
61
-
with no language specified
62
-
and no copy button.</code></pre>
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>
70
-
<script src="static/js/copy-button.js"></script>