From 21fe5c6688cba502f4c84cadbf9d94d84f801b30 Mon Sep 17 00:00:00 2001 From: ekzyis Date: Tue, 14 Nov 2023 04:16:50 +0100 Subject: [PATCH] Use syntaxhighlighting package i can now use ```sql or ```python and it will automatically have syntax highlighting --- blog/20230821-wireguard-packet-forwarding.md | 8 +- go.mod | 2 + go.sum | 4 + html/template/head.html | 1 + public/desert.css | 34 ++++++ public/doxy.css | 64 ++++++++++ public/sons-of-obsidian.css | 118 +++++++++++++++++++ public/sunburst.css | 46 ++++++++ syntax.go | 8 ++ 9 files changed, 281 insertions(+), 4 deletions(-) create mode 100644 public/desert.css create mode 100644 public/doxy.css create mode 100644 public/sons-of-obsidian.css create mode 100644 public/sunburst.css diff --git a/blog/20230821-wireguard-packet-forwarding.md b/blog/20230821-wireguard-packet-forwarding.md index 12dba50..76b8a3c 100644 --- a/blog/20230821-wireguard-packet-forwarding.md +++ b/blog/20230821-wireguard-packet-forwarding.md @@ -205,7 +205,7 @@ We will inspect this traffic on 10.172.16.1 (the router) and 10.172.16.6 (the pi On the pinging machine, we will get the following output for the virtual network interface [[2]](#ft-2): -```tcpdump +``` $ tcpdump -tni wg0 tcpdump: verbose output suppressed, use -v[v]... for full protocol decode listening on wg0, link-type RAW (Raw IP), snapshot length 262144 bytes @@ -223,7 +223,7 @@ IP 10.172.16.25 > 10.172.16.6: ICMP echo reply, id 19, seq 5, length 64 and this for the physical network interface (filtered by UDP packets from/to port 51913): -```tcpdump +``` $ tcpdump -tni enp3s0 'udp and port 51913' tcpdump: verbose output suppressed, use -v[v]... for full protocol decode listening on enp3s0, link-type EN10MB (Ethernet), snapshot length 262144 bytes @@ -241,7 +241,7 @@ IP 139.144.78.247.51913 > 192.168.178.146.51941: UDP, length 128 On the router, we get this output for the virtual network interface: -```tcpdump +``` $ tcpdump -tni wg0 tcpdump: verbose output suppressed, use -v[v]... for full protocol decode listening on wg0, link-type RAW (Raw IP), snapshot length 262144 bytes @@ -269,7 +269,7 @@ IP 10.172.16.25 > 10.172.16.6: ICMP echo reply, id 21, seq 5, length 64 and this for the physical network interface _(public IP addresses of end devices redacted)_: -```tcpdump +``` $ tcpdump -tni eth0 'udp and port 51913' tcpdump: verbose output suppressed, use -v[v]... for full protocol decode listening on eth0, link-type EN10MB (Ethernet), snapshot length 262144 bytes diff --git a/go.mod b/go.mod index 619669f..10f20af 100644 --- a/go.mod +++ b/go.mod @@ -9,6 +9,8 @@ require ( github.com/andybalholm/cascadia v1.3.2 // indirect github.com/gomarkdown/markdown v0.0.0-20230716120725-531d2d74bc12 // indirect github.com/namsral/flag v1.7.4-pre // indirect + github.com/sourcegraph/annotate v0.0.0-20160123013949-f4cad6c6324d // indirect + github.com/sourcegraph/syntaxhighlight v0.0.0-20170531221838-bd320f5d308e // indirect github.com/tdewolff/parse/v2 v2.6.7 // indirect golang.org/x/net v0.14.0 // indirect ) diff --git a/go.sum b/go.sum index cfeb71e..0cb60ad 100644 --- a/go.sum +++ b/go.sum @@ -7,6 +7,10 @@ github.com/gomarkdown/markdown v0.0.0-20230716120725-531d2d74bc12 h1:uK3X/2mt4tb github.com/gomarkdown/markdown v0.0.0-20230716120725-531d2d74bc12/go.mod h1:JDGcbDT52eL4fju3sZ4TeHGsQwhG9nbDV21aMyhwPoA= github.com/namsral/flag v1.7.4-pre h1:b2ScHhoCUkbsq0d2C15Mv+VU8bl8hAXV8arnWiOHNZs= github.com/namsral/flag v1.7.4-pre/go.mod h1:OXldTctbM6SWH1K899kPZcf65KxJiD7MsceFUpB5yDo= +github.com/sourcegraph/annotate v0.0.0-20160123013949-f4cad6c6324d h1:yKm7XZV6j9Ev6lojP2XaIshpT4ymkqhMeSghO5Ps00E= +github.com/sourcegraph/annotate v0.0.0-20160123013949-f4cad6c6324d/go.mod h1:UdhH50NIW0fCiwBSr0co2m7BnFLdv4fQTgdqdJTHFeE= +github.com/sourcegraph/syntaxhighlight v0.0.0-20170531221838-bd320f5d308e h1:qpG93cPwA5f7s/ZPBJnGOYQNK/vKsaDaseuKT5Asee8= +github.com/sourcegraph/syntaxhighlight v0.0.0-20170531221838-bd320f5d308e/go.mod h1:HuIsMU8RRBOtsCgI77wP899iHVBQpCmg4ErYMZB+2IA= github.com/tdewolff/minify/v2 v2.12.8 h1:Q2BqOTmlMjoutkuD/OPCnJUpIqrzT3nRPkw+q+KpXS0= github.com/tdewolff/minify/v2 v2.12.8/go.mod h1:YRgk7CC21LZnbuke2fmYnCTq+zhCgpb0yJACOTUNJ1E= github.com/tdewolff/parse/v2 v2.6.7 h1:WrFllrqmzAcrKHzoYgMupqgUBIfBVOb0yscFzDf8bBg= diff --git a/html/template/head.html b/html/template/head.html index dc03778..789302d 100644 --- a/html/template/head.html +++ b/html/template/head.html @@ -6,6 +6,7 @@ + diff --git a/public/desert.css b/public/desert.css new file mode 100644 index 0000000..3723668 --- /dev/null +++ b/public/desert.css @@ -0,0 +1,34 @@ +/* desert scheme ported from vim to google prettify */ +pre.prettyprint { display: block; background-color: #333 } +pre .nocode { background-color: none; color: #000 } +pre .str { color: #ffa0a0 } /* string - pink */ +pre .kwd { color: #f0e68c; font-weight: bold } +pre .com { color: #87ceeb } /* comment - skyblue */ +pre .typ { color: #98fb98 } /* type - lightgreen */ +pre .lit { color: #cd5c5c } /* literal - darkred */ +pre .pun { color: #fff } /* punctuation */ +pre .pln { color: #fff } /* plaintext */ +pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag - lightyellow */ +pre .atn { color: #bdb76b; font-weight: bold } /* attribute name - khaki */ +pre .atv { color: #ffa0a0 } /* attribute value - pink */ +pre .dec { color: #98fb98 } /* decimal - lightgreen */ + +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */ +li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } +/* Alternate shading for lines */ +li.L1,li.L3,li.L5,li.L7,li.L9 { } + +@media print { + pre.prettyprint { background-color: none } + pre .str, code .str { color: #060 } + pre .kwd, code .kwd { color: #006; font-weight: bold } + pre .com, code .com { color: #600; font-style: italic } + pre .typ, code .typ { color: #404; font-weight: bold } + pre .lit, code .lit { color: #044 } + pre .pun, code .pun { color: #440 } + pre .pln, code .pln { color: #000 } + pre .tag, code .tag { color: #006; font-weight: bold } + pre .atn, code .atn { color: #404 } + pre .atv, code .atv { color: #060 } +} diff --git a/public/doxy.css b/public/doxy.css new file mode 100644 index 0000000..f328738 --- /dev/null +++ b/public/doxy.css @@ -0,0 +1,64 @@ +/* Doxy pretty-printing styles. Used with prettify.js. */ + +pre .str, code .str { color: #fec243; } /* string - eggyolk gold */ +pre .kwd, code .kwd { color: #8470FF; } /* keyword - light slate blue */ +pre .com, code .com { color: #32cd32; font-style: italic; } /* comment - green */ +pre .typ, code .typ { color: #6ecbcc; } /* type - turq green */ +pre .lit, code .lit { color: #d06; } /* literal - cherry red */ +pre .pun, code .pun { color: #8B8970; } /* punctuation - lemon chiffon4 */ +pre .pln, code .pln { color: #f0f0f0; } /* plaintext - white */ +pre .tag, code .tag { color: #9c9cff; } /* html/xml tag (bluey) */ +pre .htm, code .htm { color: #dda0dd; } /* html tag light purply*/ +pre .xsl, code .xsl { color: #d0a0d0; } /* xslt tag light purply*/ +pre .atn, code .atn { color: #46eeee; font-weight: normal;} /* html/xml attribute name - lt turquoise */ +pre .atv, code .atv { color: #EEB4B4; } /* html/xml attribute value - rosy brown2 */ +pre .dec, code .dec { color: #3387CC; } /* decimal - blue */ + +a { + text-decoration: none; +} +pre.prettyprint, code.prettyprint { + font-family:'Droid Sans Mono','CPMono_v07 Bold','Droid Sans'; + font-weight: bold; + font-size: 9pt; + background-color: #0f0f0f; + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + -o-border-radius: 8px; + -ms-border-radius: 8px; + -khtml-border-radius: 8px; + border-radius: 8px; +} /* background is black (well, just a tad less dark ) */ + +pre.prettyprint { + width: 95%; + margin: 1em auto; + padding: 1em; + white-space: pre-wrap; +} + +pre.prettyprint a, code.prettyprint a { + text-decoration:none; +} +/* Specify class=linenums on a pre to get line numbering; line numbers themselves are the same color as punctuation */ +ol.linenums { margin-top: 0; margin-bottom: 0; color: #8B8970; } /* IE indents via margin-left */ +li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } +/* Alternate shading for lines */ +li.L1,li.L3,li.L5,li.L7,li.L9 { } + +/* print is mostly unchanged from default at present */ +@media print { + pre.prettyprint, code.prettyprint { background-color: #fff; } + pre .str, code .str { color: #088; } + pre .kwd, code .kwd { color: #006; font-weight: bold; } + pre .com, code .com { color: #0c3; font-style: italic; } + pre .typ, code .typ { color: #404; font-weight: bold; } + pre .lit, code .lit { color: #044; } + pre .pun, code .pun { color: #440; } + pre .pln, code .pln { color: #000; } + pre .tag, code .tag { color: #b66ff7; font-weight: bold; } + pre .htm, code .htm { color: #606; font-weight: bold; } + pre .xsl, code .xsl { color: #606; font-weight: bold; } + pre .atn, code .atn { color: #c71585; font-weight: normal; } + pre .atv, code .atv { color: #088; font-weight: normal; } +} diff --git a/public/sons-of-obsidian.css b/public/sons-of-obsidian.css new file mode 100644 index 0000000..7d24f3b --- /dev/null +++ b/public/sons-of-obsidian.css @@ -0,0 +1,118 @@ +/* + * Derived from einaros's Sons of Obsidian theme at + * http://studiostyl.es/schemes/son-of-obsidian by + * Alex Ford of CodeTunnel: + * http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme + */ + +.str +{ + color: #EC7600; +} +.kwd +{ + color: #93C763; +} +.com +{ + color: #66747B; +} +.typ +{ + color: #678CB1; +} +.lit +{ + color: #FACD22; +} +.pun +{ + color: #F1F2F3; +} +.pln +{ + color: #F1F2F3; +} +.tag +{ + color: #8AC763; +} +.atn +{ + color: #E0E2E4; +} +.atv +{ + color: #EC7600; +} +.dec +{ + color: purple; +} +pre.prettyprint +{ + border: 0px solid #888; +} +ol.linenums +{ + margin-top: 0; + margin-bottom: 0; +} +.prettyprint { + background: #000; +} +li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 +{ + color: #555; + list-style-type: decimal; +} +li.L1, li.L3, li.L5, li.L7, li.L9 { + background: #111; +} +@media print +{ + .str + { + color: #060; + } + .kwd + { + color: #006; + font-weight: bold; + } + .com + { + color: #600; + font-style: italic; + } + .typ + { + color: #404; + font-weight: bold; + } + .lit + { + color: #044; + } + .pun + { + color: #440; + } + .pln + { + color: #000; + } + .tag + { + color: #006; + font-weight: bold; + } + .atn + { + color: #404; + } + .atv + { + color: #060; + } +} diff --git a/public/sunburst.css b/public/sunburst.css new file mode 100644 index 0000000..ae06306 --- /dev/null +++ b/public/sunburst.css @@ -0,0 +1,46 @@ +/* Pretty printing styles. Used with prettify.js. */ +/* Vim sunburst theme by David Leibovic */ + +pre .str, code .str { color: #65B042; } /* string - green */ +pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */ +pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */ +pre .typ, code .typ { color: #89bdff; } /* type - light blue */ +pre .lit, code .lit { color: #3387CC; } /* literal - blue */ +pre .pun, code .pun { color: #fff; } /* punctuation - white */ +pre .pln, code .pln { color: #fff; } /* plaintext - white */ +pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */ +pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */ +pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */ +pre .dec, code .dec { color: #3387CC; } /* decimal - blue */ + +pre.prettyprint, code.prettyprint { + background-color: #000; + border-radius: 8px; +} + +pre.prettyprint { + width: 95%; + margin: 1em auto; + padding: 1em; + white-space: pre-wrap; +} + + +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */ +li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } +/* Alternate shading for lines */ +li.L1,li.L3,li.L5,li.L7,li.L9 { } + +@media print { + pre .str, code .str { color: #060; } + pre .kwd, code .kwd { color: #006; font-weight: bold; } + pre .com, code .com { color: #600; font-style: italic; } + pre .typ, code .typ { color: #404; font-weight: bold; } + pre .lit, code .lit { color: #044; } + pre .pun, code .pun { color: #440; } + pre .pln, code .pln { color: #000; } + pre .tag, code .tag { color: #006; font-weight: bold; } + pre .atn, code .atn { color: #404; } + pre .atv, code .atv { color: #060; } +} diff --git a/syntax.go b/syntax.go index 4d82379..58a382c 100644 --- a/syntax.go +++ b/syntax.go @@ -6,10 +6,12 @@ import ( "strings" "github.com/PuerkitoBio/goquery" + "github.com/sourcegraph/syntaxhighlight" ) func SyntaxHighlighting(element *goquery.Selection) { if element.HasClass("language-diff") { + // syntaxhighlight does not support diff so we run our custom code in that case text := strings.Split(element.Text(), "\n") p1 := regexp.MustCompile(`^\+ `) p2 := regexp.MustCompile(`^- `) @@ -22,5 +24,11 @@ func SyntaxHighlighting(element *goquery.Selection) { } } element.SetHtml(strings.Join(text, "\n")) + return } + formatted, err := syntaxhighlight.AsHTML([]byte(element.Text())) + if err != nil { + panic(err) + } + element.SetHtml(string(formatted)) }