On 2022-01-04 7:29 am, Erika Pirnes wrote:
Would it be terribly difficult to have a color setting on the
documentation page, so that people can choose between black and color?
It is fairly straightforward with CSS and a little JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic styles</title>
<style>
body { font-size: 36pt; }
.button {
background: #999; border-radius: 9pt;
cursor: pointer; display: inline-block;
padding: 9pt; user-select: none;
}
.colors > code > .type { color: purple; }
.colors > code > .identifier { color: blue; }
.colors > code > .keyword { color: brown; }
.colors > code > .number { color: darkgoldenrod; }
.colors > code > .string { color: green; }
.colors > code > .punctuation { color: gray; }
</style>
</head>
<body>
<script>
function toggleColors() {
if (document.body.classList.contains('colors')) {
document.body.classList.remove('colors');
} else {
document.body.classList.add('colors');
}
}
</script>
<div class="button" onclick="toggleColors()">Toggle Colors</div><br/>
<code>
<span class="type">int</span>
<span class="identifier">main</span><span class="punctuation">()
{</span><br/>
<span class="identifier">printf</span><span
class="punctuation">(</span><span class="string">"Hello,
World!\n"</span><span class="punctuation">);</span><br/>
<span class="keyword">return</span>
<span class="number">0</span><span class="punctuation">;</span><br/>
<span class="punctuation">}</span>
</code>
</body>
</html>
-- Aaron Hill
