Skip to content

Commit 3890e53

Browse files
pepc84pepc84
committed
add cppmode syntax highlighting to reference, error, and examples pages
1 parent 0f37b54 commit 3890e53

463 files changed

Lines changed: 6058 additions & 636 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apply_code_highlight.py‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
#!/usr/bin/env python3
2+
"""
3+
Run from repo root:
4+
python3 apply_code_highlight.py
5+
6+
Adds CodeMirror read-only syntax highlighting to all static <pre><code>
7+
blocks across the entire site including reference/, error/, and examples/.
8+
"""
9+
10+
import os, glob
11+
12+
REPO = os.path.dirname(os.path.abspath(__file__))
13+
14+
STATIC_CM_CSS = '''
15+
.cm-static-wrap .CodeMirror {
16+
height: auto;
17+
border-radius: 8px;
18+
font-size: 13px;
19+
line-height: 1.6;
20+
padding: 0.25rem 0;
21+
margin-bottom: 1.25rem;
22+
font-family: "SF Mono", "Fira Code", "Source Code Pro", monospace;
23+
}
24+
.cm-static-wrap .CodeMirror-scroll {
25+
overflow: hidden !important;
26+
max-height: none;
27+
}
28+
.cm-static-wrap .CodeMirror-scrollbar-filler { display: none; }'''
29+
30+
def get_prefix(rel):
31+
depth = len([p for p in rel.split('/')[:-1] if p])
32+
return '../' * depth if depth > 0 else ''
33+
34+
def scripts(prefix):
35+
return f'''<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
36+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
37+
<script src="{prefix}assets/cppmode-keywords.js"></script>
38+
<script src="{prefix}assets/cm-cppmode.js"></script>
39+
<script src="{prefix}assets/code-highlight.js"></script>'''
40+
41+
all_files = glob.glob(os.path.join(REPO, '**/*.html'), recursive=True)
42+
all_files = [f for f in all_files if '.git' not in f and '__pycache__' not in f]
43+
44+
changed = 0
45+
skipped = 0
46+
for f in sorted(all_files):
47+
text = open(f).read()
48+
49+
if '<pre>' not in text and '<pre ' not in text:
50+
continue
51+
52+
if 'code-highlight.js' in text:
53+
skipped += 1
54+
continue
55+
56+
rel = os.path.relpath(f, REPO)
57+
prefix = get_prefix(rel)
58+
59+
if 'cm-static-wrap' not in text and '</style>' in text:
60+
text = text.replace('</style>', STATIC_CM_CSS + '\n </style>', 1)
61+
62+
text = text.replace('</body>', scripts(prefix) + '\n</body>', 1)
63+
64+
open(f, 'w').write(text)
65+
changed += 1
66+
print(f' patched: {rel}')
67+
68+
print(f'\nDone. Patched {changed} files, skipped {skipped} already done.')

‎assets/code-highlight.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/* code-highlight.js
2+
Converts static code blocks to read-only CodeMirror instances.
3+
Handles: <pre><code>, <pre>, .syntax-block, .impl-block */
4+
5+
(function () {
6+
function highlight() {
7+
// Handle <pre> and <pre><code> blocks
8+
document.querySelectorAll('pre').forEach(function (pre) {
9+
if (pre.dataset.cmDone) return;
10+
pre.dataset.cmDone = '1';
11+
var code = pre.querySelector('code');
12+
var text = code ? code.textContent : pre.textContent;
13+
14+
var wrapper = document.createElement('div');
15+
wrapper.className = 'cm-static-wrap';
16+
pre.parentNode.insertBefore(wrapper, pre);
17+
pre.style.display = 'none';
18+
19+
CodeMirror(wrapper, {
20+
value: text.replace(/^\n/, ''),
21+
mode: 'cppmode',
22+
theme: 'cppmode',
23+
readOnly: true,
24+
lineNumbers: false,
25+
lineWrapping: false,
26+
scrollbarStyle: 'null',
27+
viewportMargin: Infinity,
28+
});
29+
});
30+
31+
// Handle .syntax-block divs (reference pages - function signatures)
32+
document.querySelectorAll('.syntax-block').forEach(function (el) {
33+
if (el.dataset.cmDone) return;
34+
el.dataset.cmDone = '1';
35+
var text = el.textContent;
36+
37+
var wrapper = document.createElement('div');
38+
wrapper.className = 'cm-static-wrap cm-syntax-wrap';
39+
el.parentNode.insertBefore(wrapper, el);
40+
el.style.display = 'none';
41+
42+
CodeMirror(wrapper, {
43+
value: text.replace(/^\n/, ''),
44+
mode: 'cppmode',
45+
theme: 'cppmode',
46+
readOnly: true,
47+
lineNumbers: false,
48+
lineWrapping: false,
49+
scrollbarStyle: 'null',
50+
viewportMargin: Infinity,
51+
});
52+
});
53+
54+
// Handle .impl-block divs (reference pages - implementation examples)
55+
document.querySelectorAll('.impl-block').forEach(function (el) {
56+
if (el.dataset.cmDone) return;
57+
el.dataset.cmDone = '1';
58+
var text = el.textContent;
59+
60+
var wrapper = document.createElement('div');
61+
wrapper.className = 'cm-static-wrap cm-impl-wrap';
62+
el.parentNode.insertBefore(wrapper, el);
63+
el.style.display = 'none';
64+
65+
CodeMirror(wrapper, {
66+
value: text.replace(/^\n/, ''),
67+
mode: 'cppmode',
68+
theme: 'cppmode',
69+
readOnly: true,
70+
lineNumbers: true,
71+
lineWrapping: false,
72+
scrollbarStyle: 'native',
73+
viewportMargin: Infinity,
74+
});
75+
});
76+
}
77+
78+
if (document.readyState === 'loading') {
79+
document.addEventListener('DOMContentLoaded', highlight);
80+
} else {
81+
highlight();
82+
}
83+
})();

‎downloads/cmake-setup.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,22 @@
5858
.sidebar-outer.open { left: 0; }
5959
.content { padding: 2rem 1.25rem; }
6060
}
61+
62+
/* Read-only CodeMirror syntax highlighting for static code blocks */
63+
.cm-static-wrap .CodeMirror {
64+
height: auto;
65+
border-radius: 8px;
66+
font-size: 13px;
67+
line-height: 1.6;
68+
padding: 0.25rem 0;
69+
margin-bottom: 1.25rem;
70+
font-family: "SF Mono", "Fira Code", "Source Code Pro", monospace;
71+
}
72+
.cm-static-wrap .CodeMirror-scroll {
73+
overflow: hidden !important;
74+
max-height: none;
75+
}
76+
.cm-static-wrap .CodeMirror-scrollbar-filler { display: none; }
6177
</style>
6278
</head>
6379
<body>
@@ -218,5 +234,10 @@ <h2>Configure, build, and run</h2>
218234
}
219235
</script>
220236
<script src="../assets/nav.js"></script>
237+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
238+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
239+
<script src="../assets/cppmode-keywords.js"></script>
240+
<script src="../assets/cm-cppmode.js"></script>
241+
<script src="../assets/code-highlight.js"></script>
221242
</body>
222243
</html>

‎downloads/plugandplay-setup.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,22 @@
5959
.sidebar-outer.open { left: 0; }
6060
.content { padding: 2rem 1.25rem; }
6161
}
62+
63+
/* Read-only CodeMirror syntax highlighting for static code blocks */
64+
.cm-static-wrap .CodeMirror {
65+
height: auto;
66+
border-radius: 8px;
67+
font-size: 13px;
68+
line-height: 1.6;
69+
padding: 0.25rem 0;
70+
margin-bottom: 1.25rem;
71+
font-family: "SF Mono", "Fira Code", "Source Code Pro", monospace;
72+
}
73+
.cm-static-wrap .CodeMirror-scroll {
74+
overflow: hidden !important;
75+
max-height: none;
76+
}
77+
.cm-static-wrap .CodeMirror-scrollbar-filler { display: none; }
6278
</style>
6379
</head>
6480
<body>
@@ -204,5 +220,10 @@ <h2>Steps 2 onwards same as macOS</h2>
204220
}
205221
</script>
206222
<script src="../assets/nav.js"></script>
223+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
224+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
225+
<script src="../assets/cppmode-keywords.js"></script>
226+
<script src="../assets/cm-cppmode.js"></script>
227+
<script src="../assets/code-highlight.js"></script>
207228
</body>
208229
</html>

‎examples/acceleration-with-vectors.html‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,14 @@
4848
.content { padding: 2rem 1.25rem; }
4949
.preview-wrap { max-width: 100%; }
5050
pre { font-size: 12px; }
51-
}</style>
51+
}
52+
.cm-static-wrap .CodeMirror {
53+
height: auto; border-radius: 8px; font-size: 13px;
54+
line-height: 1.6; padding: 0.25rem 0; margin-bottom: 1.25rem;
55+
font-family: "SF Mono","Fira Code",monospace;
56+
}
57+
.cm-static-wrap .CodeMirror-scrollbar-filler { display: none; }
58+
</style>
5259
</head>
5360
<body>
5461
<nav id="site-nav">
@@ -114,7 +121,12 @@ <h1>Acceleration With Vectors</h1>
114121

115122
mover.update();
116123
mover.display();
117-
}<\/script></body></html>`);doc.close();})();</script>
124+
}<\/script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
125+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
126+
<script src="../assets/cppmode-keywords.js"></script>
127+
<script src="../assets/cm-cppmode.js"></script>
128+
<script src="../assets/code-highlight.js"></script>
129+
</body></html>`);doc.close();})();</script>
118130
<div class="code-block">
119131
<div class="code-header">
120132
<span>acceleration-with-vectors.pde</span>

‎examples/additive-wave.html‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,14 @@
4848
.content { padding: 2rem 1.25rem; }
4949
.preview-wrap { max-width: 100%; }
5050
pre { font-size: 12px; }
51-
}</style>
51+
}
52+
.cm-static-wrap .CodeMirror {
53+
height: auto; border-radius: 8px; font-size: 13px;
54+
line-height: 1.6; padding: 0.25rem 0; margin-bottom: 1.25rem;
55+
font-family: "SF Mono","Fira Code",monospace;
56+
}
57+
.cm-static-wrap .CodeMirror-scrollbar-filler { display: none; }
58+
</style>
5259
</head>
5360
<body>
5461
<nav id="site-nav">
@@ -142,7 +149,12 @@ <h1>Additive Wave</h1>
142149

143150
calcWave();
144151
renderWave();
145-
}<\/script></body></html>`);doc.close();})();</script>
152+
}<\/script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
153+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
154+
<script src="../assets/cppmode-keywords.js"></script>
155+
<script src="../assets/cm-cppmode.js"></script>
156+
<script src="../assets/code-highlight.js"></script>
157+
</body></html>`);doc.close();})();</script>
146158
<div class="code-block">
147159
<div class="code-header">
148160
<span>additive-wave.pde</span>

‎examples/alpha-mask.html‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,14 @@
4848
.content { padding: 2rem 1.25rem; }
4949
.preview-wrap { max-width: 100%; }
5050
pre { font-size: 12px; }
51-
}</style>
51+
}
52+
.cm-static-wrap .CodeMirror {
53+
height: auto; border-radius: 8px; font-size: 13px;
54+
line-height: 1.6; padding: 0.25rem 0; margin-bottom: 1.25rem;
55+
font-family: "SF Mono","Fira Code",monospace;
56+
}
57+
.cm-static-wrap .CodeMirror-scrollbar-filler { display: none; }
58+
</style>
5259
</head>
5360
<body>
5461
<nav id="site-nav">
@@ -89,7 +96,12 @@ <h1>Alpha Mask</h1>
8996
image(img, width / 2, height / 2);
9097
image(img, mouseX, mouseY);
9198
}
92-
}<\/script></body></html>`);doc.close();})();</script>
99+
}<\/script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
100+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
101+
<script src="../assets/cppmode-keywords.js"></script>
102+
<script src="../assets/cm-cppmode.js"></script>
103+
<script src="../assets/code-highlight.js"></script>
104+
</body></html>`);doc.close();})();</script>
93105
<div class="code-block">
94106
<div class="code-header">
95107
<span>alpha-mask.pde</span>

‎examples/animated-sprite.html‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,14 @@
4848
.content { padding: 2rem 1.25rem; }
4949
.preview-wrap { max-width: 100%; }
5050
pre { font-size: 12px; }
51-
}</style>
51+
}
52+
.cm-static-wrap .CodeMirror {
53+
height: auto; border-radius: 8px; font-size: 13px;
54+
line-height: 1.6; padding: 0.25rem 0; margin-bottom: 1.25rem;
55+
font-family: "SF Mono","Fira Code",monospace;
56+
}
57+
.cm-static-wrap .CodeMirror-scrollbar-filler { display: none; }
58+
</style>
5259
</head>
5360
<body>
5461
<nav id="site-nav">
@@ -117,7 +124,12 @@ <h1>Animated Sprite</h1>
117124
if (img) return img.width;
118125
return 0;
119126
}
120-
}<\/script></body></html>`);doc.close();})();</script>
127+
}<\/script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
128+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
129+
<script src="../assets/cppmode-keywords.js"></script>
130+
<script src="../assets/cm-cppmode.js"></script>
131+
<script src="../assets/code-highlight.js"></script>
132+
</body></html>`);doc.close();})();</script>
121133
<div class="code-block">
122134
<div class="code-header">
123135
<span>animated-sprite.pde</span>

‎examples/arctangent.html‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,14 @@
4848
.content { padding: 2rem 1.25rem; }
4949
.preview-wrap { max-width: 100%; }
5050
pre { font-size: 12px; }
51-
}</style>
51+
}
52+
.cm-static-wrap .CodeMirror {
53+
height: auto; border-radius: 8px; font-size: 13px;
54+
line-height: 1.6; padding: 0.25rem 0; margin-bottom: 1.25rem;
55+
font-family: "SF Mono","Fira Code",monospace;
56+
}
57+
.cm-static-wrap .CodeMirror-scrollbar-filler { display: none; }
58+
</style>
5259
</head>
5360
<body>
5461
<nav id="site-nav">
@@ -122,7 +129,12 @@ <h1>Arctangent</h1>
122129

123130
e3.update(mouseX, mouseY);
124131
e3.display();
125-
}<\/script></body></html>`);doc.close();})();</script>
132+
}<\/script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
133+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
134+
<script src="../assets/cppmode-keywords.js"></script>
135+
<script src="../assets/cm-cppmode.js"></script>
136+
<script src="../assets/code-highlight.js"></script>
137+
</body></html>`);doc.close();})();</script>
126138
<div class="code-block">
127139
<div class="code-header">
128140
<span>arctangent.pde</span>

0 commit comments

Comments
 (0)