Skip to content

Commit 1aa022d

Browse files
author
R. S. Doiel
committed
Quick Save
1 parent 63e99cd commit 1aa022d

13 files changed

+513
-41
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
*.tmp
22
*.bak
33
*.swp
4+
*.env
45
bin
56
dist
67
scratch

‎enhance_code_blocks.html‎

Lines changed: 233 additions & 0 deletions
Large diffs are not rendered by default.

‎enhance_code_blocks.md‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
2+
# Enhancing code blocks with CSS and JavaScript
3+
4+
This document describes how to use the `code-blocks.css` and `copyToClipboard.js` files to style code blocks and add a "Copy to Clipboard" button to them.
5+
6+
## Overview
7+
8+
The provided CSS and JavaScript files allow you to style `<pre>` and `<code>` elements and add a button to copy the code to the clipboard. This is useful for displaying code snippets on a webpage with a consistent style and enhanced functionality.
9+
10+
## Files
11+
12+
`code-blocks.css`
13+
: A CSS file that styles the `<pre>` and `<code>` elements and the copy button.
14+
15+
`copyToClipboard.js`
16+
: A JavaScript module that adds a "Copy to Clipboard" button to each `<pre>` block containing a `<code>` element.
17+
18+
## CSS Variables
19+
20+
The `code-blocks.css` file uses CSS variables to define the styling properties. These variables can be easily overridden to customize the appearance of the code blocks and the copy button.
21+
22+
### Code Block Variables
23+
24+
`--code-font-family`
25+
: Font family for the code block. Default is `monospace`.
26+
27+
`--code-border-color`
28+
: Border color for the code block. Default is `#ccc`.
29+
30+
`--code-background-color`
31+
: Background color for the code block. Default is `#f5f5f5`.
32+
33+
### Copy Button Variables
34+
35+
`--copy-button-bg-color`
36+
: Background color for the copy button. Default is `#fff`.
37+
38+
`--copy-button-border-color`
39+
: Border color for the copy button. Default is `#ccc`.
40+
41+
`--copy-button-text-color`
42+
: Text color for the copy button. Default is `#000`.
43+
44+
`--copy-button-hover-bg-color`
45+
: Background color for the copy button on hover. Default is `#f0f0f0`.
46+
47+
## Usage
48+
49+
### Step 1: Include the CSS File
50+
51+
Link the `code-blocks.css` file in the `<head>` section of your HTML document:
52+
53+
```html
54+
<link rel="stylesheet" href="path/to/code-blocks.css">
55+
```
56+
57+
### Step 2: Include the JavaScript Module
58+
59+
Include the `copyToClipboard.js` module in your HTML document. This script should be included at the end of the `<body>` section or use the `DOMContentLoaded` event to ensure the DOM is fully loaded before executing the script.
60+
61+
```html
62+
<script type="module" src="path/to/copyToClipboard.js"></script>
63+
```
64+
65+
### Step 3: Add Code Blocks to Your HTML
66+
67+
Add `<pre>` and `<code>` elements to your HTML document. The JavaScript module will automatically add a "Copy to Clipboard" button to each `<pre>` block containing a `<code>` element.
68+
69+
```html
70+
<pre><code>public class HelloWorld {
71+
public static void main(String[] args) {
72+
System.out.println("Hello, world!");
73+
}
74+
}</code></pre>
75+
76+
<pre><code>public class AnotherExample {
77+
public static void main(String[] args) {
78+
System.out.println("Another example!");
79+
}
80+
}</code></pre>
81+
```
82+
83+
### Example: Full HTML Document
84+
85+
Here is an example of a complete HTML document that includes the CSS and JavaScript files:
86+
87+
```html
88+
<!DOCTYPE html>
89+
<html lang="en">
90+
<head>
91+
<meta charset="UTF-8">
92+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
93+
<title>Code Blocks Example</title>
94+
<link rel="stylesheet" href="path/to/code-blocks.css">
95+
</head>
96+
<body>
97+
98+
<h1>Code Examples</h1>
99+
100+
<pre><code>public class HelloWorld {
101+
public static void main(String[] args) {
102+
System.out.println("Hello, world!");
103+
}
104+
}</code></pre>
105+
106+
<pre><code>public class AnotherExample {
107+
public static void main(String[] args) {
108+
System.out.println("Another example!");
109+
}
110+
}</code></pre>
111+
112+
<script type="module" src="path/to/copyToClipboard.js"></script>
113+
</body>
114+
</html>
115+
```
116+
117+
### Step 4: Customize the Styling (Optional)
118+
119+
You can override the CSS variables to customize the appearance of the code blocks and the copy button. Add a `<style>` block to your HTML document and redefine the variables as needed.
120+
121+
```html
122+
<style>
123+
:root {
124+
--code-font-family: 'Courier New', monospace;
125+
--code-border-color: #ff5733;
126+
--copy-button-bg-color: #e7e7e7;
127+
--copy-button-border-color: #ff5733;
128+
}
129+
</style>
130+
```
131+
132+
## JavaScript Functionality
133+
134+
The `copyToClipboard.js` module performs the following actions:
135+
136+
1. Waits for the `DOMContentLoaded` event to ensure the DOM is fully loaded.
137+
2. Finds all `<pre>` elements in the document.
138+
3. For each `<pre>` element, checks if it contains a `<code>` element.
139+
4. Creates a button with the clipboard emoji (📋) and appends it to the `<pre>` element.
140+
5. Adds an event listener to the button to copy the text content of the `<code>` element to the clipboard when clicked.
141+
6. Provides feedback by changing the button text to "Copied!" for a short period after copying.
142+
143+
## Conclusion
144+
145+
By following these steps, you can style code blocks and add a "Copy to Clipboard" button to them using the provided CSS and JavaScript files. This enhances the user experience by making it easy to copy code snippets from your webpage.
146+
147+
### Example: Customized HTML Document
148+
149+
Here is an example of a complete HTML document with customized styling:
150+
151+
```html
152+
<!DOCTYPE html>
153+
<html lang="en">
154+
<head>
155+
<meta charset="UTF-8">
156+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
157+
<title>Customized Code Blocks Example</title>
158+
<link rel="stylesheet" href="path/to/code-blocks.css">
159+
<style>
160+
:root {
161+
--code-font-family: 'Courier New', monospace;
162+
--code-border-color: #ff5733;
163+
--copy-button-bg-color: #e7e7e7;
164+
--copy-button-border-color: #ff5733;
165+
}
166+
</style>
167+
</head>
168+
<body>
169+
170+
<h1>Customized Code Examples</h1>
171+
172+
<pre><code>public class CustomHelloWorld {
173+
public static void main(String[] args) {
174+
System.out.println("Custom Hello, world!");
175+
}
176+
}</code></pre>
177+
178+
<pre><code>public class CustomExample {
179+
public static void main(String[] args) {
180+
System.out.println("Another customized example!");
181+
}
182+
}</code></pre>
183+
184+
<script type="module" src="path/to/copyToClipboard.js"></script>
185+
</body>
186+
</html>
187+
```
188+
189+
This setup allows you to maintain a clean and organized stylesheet with reusable variables and provides the flexibility to override these variables as needed.

‎invalidate_cdn.bash‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
#!/bin/bash
2+
3+
#
4+
# Publish takes the content in the htdocs directory and copies it to the S3 bucket indicated by the environment
5+
# variable BUCKET.
6+
#
7+
BUCKET="s3://media.library.caltech.edu"
8+
if [ -f "media.env" ]; then
9+
echo "Loading environment from media.env"
10+
. media.env
11+
fi
12+
if [ "$BUCKET_NAME" = "" ]; then
13+
echo "No bucket to publish, set BUCKET_NAME"
14+
exit 1
15+
fi
16+
17+
# Invalidate cloud front
18+
do_invalidate_cdn() {
19+
INVALID_PATH="$1"
20+
if [ "$DISTRIBUTION_ID" != "" ]; then
21+
echo "Invalidating CDN"
22+
aws cloudfront create-invalidation \
23+
--distribution-id "$DISTRIBUTION_ID" \
24+
--paths "${INVALID_PATH}"
25+
else
26+
echo "skipping invalidation, DISTRIBUTION_ID not set"
27+
fi
28+
}
29+
30+
31+
echo "Invalidating CDN for $BUCKET_NAME"
32+
33+
if [ "$1" != "" ]; then
34+
do_invalidate_cdn "$1"
35+
else
36+
do_invalidate_cdn '/*'
37+
fi

‎pagefind/fragment/en-US_878f63a.pf_fragment‎

2.75 KB
Binary file not shown.

‎pagefind/fragment/en-US_b9f7cde.pf_fragment‎

2.75 KB
Binary file not shown.

‎pagefind/fragment/en-US_fde6ffd.pf_fragment‎

574 Bytes
Binary file not shown.

‎pagefind/index/en-US_c19f3c2.pf_index‎

24.9 KB
Binary file not shown.

‎pagefind/pagefind-entry.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"version":"1.3.0","languages":{"en-US":{"hash":"en-US_60a3c12911df0","wasm":"en-US","page_count":37}}}
1+
{"version":"1.3.0","languages":{"en-US":{"hash":"en-US_4e89775237710","wasm":"en-US","page_count":38}}}

‎pagefind/pagefind.en-US_4e89775237710.pf_meta‎

373 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)