my website
better code syntax highlighting
+187
-19
-14
buildblog.sh
-14
buildblog.sh
···
13
13
index_template="$(jq -r '.["$index-template"]' <<<"$defaults")"
14
14
! [ -e "$index_template" ] && echo "${0}: error: ${rel_root}${index_template} does not exist" >&2 && exit 1
15
15
16
-
# generate the code syntax highlighting css
17
-
# unfortunately pandoc did not like --template=<(echo ...)
18
-
# shellcheck disable=SC2016
19
-
echo '$highlighting-css$' > ./highlighting.css
20
-
# time to prank pandoc epic style
21
-
echo $'``` c\n```' | pandoc -f djot -t html5 \
22
-
--template=./highlighting.css -o ./highlighting.css \
23
-
--highlight-style=tango # to be replaced, probably
24
-
25
-
# ...because of this. and because it looks eh
26
-
cat >> ./highlighting.css <<EOF
27
-
.sourceCode { color: black; }
28
-
EOF
29
-
30
16
sed "/${template_start}/q" "${index_template}" > ./index.html
31
17
32
18
# this... thing turns the template in the html into a json string with jq string interpolation, to be passed back into jq
+30
-2
src/blog/2025-09-14-test/content.djot
+30
-2
src/blog/2025-09-14-test/content.djot
···
11
11
12
12
I am Steve Jobs? I am Steve Jobs.
13
13
14
+
{.numberSource}
14
15
``` c
15
16
// a more realistic code example
17
+
// TODO somethinbg
18
+
#define SOMETHING 1
16
19
for (i = 0; i < samplecount; i++) {
17
20
int8_t s = samples[i];
18
-
19
-
// correlation: multiply by sine and cosine f=1200Hz and 2200Hz
21
+
22
+
// correlation: multiply by sine and cosine f=1200Hz and 2200Hz
20
23
// 1200.0 * SPS = samplerate
21
24
// & (1<<int(SPS/8+1) - 1)
22
25
int_mark_i[i & 0b111] = sin(TWOPI * i * (1200.0 / (1200.0 * SPS))) * s;
···
37
40
float sum_mark = sum_mark_i*sum_mark_i + sum_mark_q*sum_mark_q;
38
41
float sum_space = sum_space_i*sum_space_i + sum_space_q*sum_space_q;
39
42
/* ... */
43
+
```
44
+
45
+
``` python
46
+
import math
47
+
from typing import Callable
48
+
49
+
nothing = None
50
+
# ever happens
51
+
52
+
TWOPI = 2 * math.pi
53
+
54
+
@something
55
+
def make_table(name: str, end: int, f: Callable[[int], float]) -> None:
56
+
"""
57
+
create C table from the values of a function
58
+
"""
59
+
print(f"int8_t {name}[] = {{\n ", end="")
60
+
for i in range(end):
61
+
n = math.floor(f(i) * 127)
62
+
print(f"{n:4}, ", end=("\n " if i % 10 == 9 else ""))
63
+
print("\n};")
64
+
65
+
make_table("cos_1200_4", 4, lambda x: math.cos(TWOPI * (1200/9600) * x))
66
+
make_table("cos_2200_24", 24, lambda x: math.cos(TWOPI * (2200/9600) * x))
67
+
make_table("sin_2200_24", 24, lambda x: math.sin(TWOPI * (2200/9600) * x))
40
68
```
41
69
42
70
i promise i'll change this syntax highlighting theme i know it looks bad
+151
src/blog/highlighting.css
+151
src/blog/highlighting.css
···
1
+
/* warning: hacky bs ahead */
2
+
3
+
pre > code.sourceCode {
4
+
white-space: pre-wrap;
5
+
display: block;
6
+
}
7
+
8
+
pre.numberSource code { counter-reset: source-line 0; }
9
+
pre.numberSource {
10
+
margin-left: 3rem;
11
+
padding-left: 1rem;
12
+
border-left: 1px dashed #5e5c64;
13
+
}
14
+
pre.numberSource code > span {
15
+
counter-increment: source-line;
16
+
display: inline-block;
17
+
text-indent: -3rem;
18
+
}
19
+
pre.numberSource code > span > a:first-child {
20
+
margin-right: 1rem;
21
+
margin-left: -0.5rem;
22
+
}
23
+
pre.numberSource code > span > a:first-child::before {
24
+
box-sizing: border-box;
25
+
width: 2.5rem;
26
+
display: inline-block;
27
+
padding-right: 0.5rem;
28
+
text-align: right;
29
+
content: counter(source-line);
30
+
color: #5e5c64;
31
+
}
32
+
33
+
/*
34
+
colors mainly from the gnome color palette
35
+
https://developer.gnome.org/hig/reference/palette.html
36
+
*/
37
+
38
+
div.sourceCode {
39
+
text-align: initial;
40
+
background-color: #f3f3f3;
41
+
color: black;
42
+
}
43
+
44
+
code span.do, /* Documentation */
45
+
code span.co /* Comment */
46
+
{ color: #3d3846; font-style: italic; }
47
+
48
+
code span.in, /* Information */
49
+
code span.an, /* Annotation */
50
+
code span.cv /* CommentVar */
51
+
{ color: #3d3846; }
52
+
53
+
code span.wa, /* Warning */
54
+
code span.al /* Alert */
55
+
{ color: #a51d2d; }
56
+
57
+
code span.sc /* SpecialChar */
58
+
{ color: #237000; font-weight: bold; }
59
+
code span.ch, /* Char */
60
+
code span.ss, /* SpecialString */
61
+
code span.vs, /* VerbatimString */
62
+
code span.st /* String */
63
+
{ color: #237000; }
64
+
65
+
code span.dt /* DataType */
66
+
{ color: #1a5fb4; }
67
+
code span.at /* Attribute */
68
+
{ color: #204a87; }
69
+
code span.dv, /* DecVal */
70
+
code span.fl, /* Float */
71
+
code span.bn /* BaseN */
72
+
{ color: #9141ac; }
73
+
code span.im, /* Import */
74
+
code span.kw, /* Keyword */
75
+
code span.cf /* ControlFlow */
76
+
{ color: #9141ac; font-weight: bold; }
77
+
code span.pp, /* Preprocessor */
78
+
code span.cn, /* Constant */
79
+
code span.ex, /* Extension */
80
+
code span.bu /* BuiltIn */
81
+
{ color: #813d9c; }
82
+
83
+
code span.op /* Operator */
84
+
{ color: #865e3c; }
85
+
code span.er /* Error */
86
+
{ color: #c01c28; font-weight: bold; }
87
+
88
+
code span.fu, /* Function (doesn't work?) */
89
+
code span.ot, /* Other (also couldn't find) */
90
+
code span.va /* Variable (for some reason this behaves like Constant) */
91
+
{ color: #241f31; }
92
+
93
+
@media (prefers-color-scheme: dark) {
94
+
pre.numberSource { border-color: #9a9996; }
95
+
pre.numberSource code > span > a:first-child::before { color: #9a9996; }
96
+
97
+
div.sourceCode {
98
+
text-align: initial;
99
+
background-color: #252525;
100
+
color: white;
101
+
}
102
+
103
+
code span.do, /* Documentation */
104
+
code span.co /* Comment */
105
+
{ color: #deddda; font-style: italic; }
106
+
107
+
code span.in, /* Information */
108
+
code span.an, /* Annotation */
109
+
code span.cv /* CommentVar */
110
+
{ color: #deddda; }
111
+
112
+
code span.wa, /* Warning */
113
+
code span.al /* Alert */
114
+
{ color: #f66151; }
115
+
116
+
code span.sc /* SpecialChar */
117
+
{ color: #33d17a; font-weight: bold; }
118
+
code span.ch, /* Char */
119
+
code span.ss, /* SpecialString */
120
+
code span.vs, /* VerbatimString */
121
+
code span.st /* String */
122
+
{ color: #33d17a; }
123
+
124
+
code span.dt /* DataType */
125
+
{ color: #99c1f1; }
126
+
code span.at /* Attribute */
127
+
{ color: #62a0ea; }
128
+
code span.dv, /* DecVal */
129
+
code span.fl, /* Float */
130
+
code span.bn /* BaseN */
131
+
{ color: #dc8add; }
132
+
code span.im, /* Import */
133
+
code span.kw, /* Keyword */
134
+
code span.cf /* ControlFlow */
135
+
{ color: #dc8add; font-weight: bold; }
136
+
code span.pp, /* Preprocessor */
137
+
code span.cn, /* Constant */
138
+
code span.ex, /* Extension */
139
+
code span.bu /* BuiltIn */
140
+
{ color: #dc8add; }
141
+
142
+
code span.op /* Operator */
143
+
{ color: #cdab8f; }
144
+
code span.er /* Error */
145
+
{ color: #e01b24; font-weight: bold; }
146
+
147
+
code span.fu, /* Function */
148
+
code span.ot, /* Other */
149
+
code span.va /* Variable */
150
+
{ color: #f6f5f4; }
151
+
}
+6
-2
src/style.css
+6
-2
src/style.css
···
21
21
:root {
22
22
color-scheme: light dark;
23
23
--color-fg: #000;
24
-
--color-bg: #f2f2f2;
24
+
--color-bg: #fff;
25
25
--color-link: #7d29e2;
26
26
--color-link-visited: #a800ad;
27
27
}
···
113
113
114
114
pre {
115
115
padding: 1rem;
116
-
font-size: 1.1em;
116
+
}
117
+
pre, code {
118
+
font-family: 'Adwaita Mono', 'Fira Code', 'JetBrains Mono', 'Lucida Console', monospace;
119
+
font-size: 0.97em;
120
+
line-height: 1.25;
117
121
}
118
122
:not(.sourceCode) > pre:has(code), div.sourceCode {
119
123
border-radius: 1rem;