commit 67ba17f8f843247d5bf0f28fd9993b10196e379f · dunkirk.sh/zera

compressedfav.jpg

This is a binary file and will not be displayed.

-72

test-code-blocks.html

···

       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

     

       32
       -
       function sayHello() {

     

       33
       -
         console.log("Hello, world!");

     

       34
       -
       }

     

       35
       -
       

     

       36
       -
       // Call the function

     

       37
       -
       sayHello();</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

     

       61
       -
       with no language specified

     

       62
       -
       and 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>