feat(server/web): move syntax highlighting backend with Chroma

close #428

go.mod

@@ -15,7 +15,11 @@ require (
 	golang.org/x/exp v0.0.0-20230807204917-050eac23e9de
 )
 
+require github.com/dlclark/regexp2 v1.11.0 // indirect
+
 require (
+	github.com/alecthomas/chroma v0.10.0
+	github.com/alecthomas/chroma/v2 v2.14.0
 	github.com/asaskevich/govalidator v0.0.0-20230301143203-a9d515a09cc2 // indirect
 	github.com/cespare/xxhash/v2 v2.3.0 // indirect
 	github.com/davecgh/go-spew v1.1.1 // indirect

go.sum

@@ -1,3 +1,7 @@
+github.com/alecthomas/chroma v0.10.0 h1:7XDcGkCQopCNKjZHfYrNLraA+M7e0fMiJ/Mfikbfjek=
+github.com/alecthomas/chroma v0.10.0/go.mod h1:jtJATyUxlIORhUOFNA9NZDWGAQ8wpxQQqNSB4rjA/1s=
+github.com/alecthomas/chroma/v2 v2.14.0 h1:R3+wzpnUArGcQz7fCETQBzO5n9IMNi13iIs46aU4V9E=
+github.com/alecthomas/chroma/v2 v2.14.0/go.mod h1:QolEbTfmUHIMVpBqxeDnNBj2uoeI4EbYP4i6n68SG4I=
 github.com/asaskevich/govalidator v0.0.0-20200108200545-475eaeb16496/go.mod h1:oGkLhpf+kjZl6xBf758TQhh5XrAeiJv/7FRz/2spLIg=
 github.com/asaskevich/govalidator v0.0.0-20230301143203-a9d515a09cc2 h1:DklsrG3dyBCFEj5IhUbnKptjxatkF07cF2ak3yi77so=
 github.com/asaskevich/govalidator v0.0.0-20230301143203-a9d515a09cc2/go.mod h1:WaHUgvxTVq04UNunO+XhnAqY/wQc+bxr74GqbsZ/Jqw=
@@ -10,6 +14,9 @@ github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ3
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dlclark/regexp2 v1.4.0/go.mod h1:2pZnwuY/m+8K6iRw6wQdMtk+rH5tNGR1i55kozfMjCc=
+github.com/dlclark/regexp2 v1.11.0 h1:G/nrcoOa7ZXlpoa/91N3X7mM3r8eIlMBBJZvsz/mxKI=
+github.com/dlclark/regexp2 v1.11.0/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
 github.com/go-chi/chi/v5 v5.1.0 h1:acVI1TYaD+hhedDJ3r54HyA6sExp3HfXq7QWEEY/xMw=
 github.com/go-chi/chi/v5 v5.1.0/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
 github.com/go-chi/cors v1.2.1 h1:xEC8UT3Rlp2QuWNEr4Fs/c2EAGVKBwy/1vHx3bppil4=
@@ -46,6 +53,7 @@ github.com/rs/zerolog v1.33.0 h1:1cU2KZkvPxNyfgEmhHAz/1A9Bz+llsdYzklWFzgp0r8=
 github.com/rs/zerolog v1.33.0/go.mod h1:/7mN4D5sKwJLZQ2b/znpjC3/GQWY/xaDXUM0kKWRHss=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
+github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
 github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 golang.org/x/exp v0.0.0-20230807204917-050eac23e9de h1:l5Za6utMv/HsBWWqzt4S8X17j+kt1uVETUX5UFhn2rE=
@@ -60,5 +68,6 @@ gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8
 gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
 gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c/go.mod h1:JHkPIbrfpd72SG/EVd6muEfDQjcINNoR0C8j2r3qZ4Q=
 gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

internal/server/fetch.go

@@ -78,11 +78,19 @@ func (s *Server) StaticDocument(w http.ResponseWriter, r *http.Request) {
 		extension = params[1]
 	}
 
+	highlighted, css, err := util.Highlight(document.Content, extension)
+
+	if err != nil {
+		util.WriteError(w, http.StatusInternalServerError, err)
+		return
+	}
+
 	data := map[string]interface{}{
-		"Lines":     util.CountLines(document.Content),
-		"Content":   document.Content,
-		"Extension": extension,
-		"Analytics": template.HTML(config.Config.Analytics),
+		"Stylesheet":  template.CSS(css),
+		"Content":     document.Content,
+		"Highlighted": template.HTML(highlighted),
+		"Extension":   extension,
+		"Analytics":   template.HTML(config.Config.Analytics),
 	}
 
 	if err := t.Execute(w, data); err != nil {

internal/server/server.go

@@ -124,7 +124,7 @@ func (s *Server) RegisterHeaders() {
 	s.Router.Use(middleware.SetHeader("X-Content-Type-Options", "nosniff"))
 	s.Router.Use(middleware.SetHeader("Referrer-Policy", "no-referrer-when-downgrade"))
 	s.Router.Use(middleware.SetHeader("Strict-Transport-Security", "max-age=31536000; includeSubDomains; preload"))
-	s.Router.Use(middleware.SetHeader("Content-Security-Policy", "default-src 'self'; frame-ancestors 'none'; base-uri 'none'; form-action 'self'; script-src 'self' 'unsafe-inline';"))
+	s.Router.Use(middleware.SetHeader("Content-Security-Policy", "default-src 'self'; frame-ancestors 'none'; base-uri 'none'; form-action 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';"))
 }
 
 func (s *Server) MountStatic() {

internal/server/web/document.html

@@ -17,12 +17,15 @@
         content="Spacebin is a highly-reliable pastebin server, built with Go, that's capable of serving notes, code, or any other documents." />
     <meta property="og:color" content="#e34b4a" />
 
+    <style>{{.Stylesheet}}</style>
+
+
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <link rel="stylesheet" type="text/css" href="/static/normalize.css">
-    <link rel="stylesheet" type="text/css" href="/static/monokai.min.css">
     <link rel="stylesheet" type="text/css" href="/static/global.css">
 
     {{.Analytics}}
+
 </head>
 
 <body>
@@ -63,24 +66,19 @@
 
         <p id="donate-long">
             Keep Spacebin free of ads by
-            <a id="donate-link" href="https://github.com/sponsors/lukewhrit" aria-label="Donate to Spacebin" target="_blank">donating.</a>
+            <a id="donate-link" href="https://github.com/sponsors/lukewhrit" aria-label="Donate to Spacebin"
+                target="_blank">donating.</a>
             💕
         </p>
         <p id="donate-short">
-            <a id="short-donate-link" href="https://github.com/sponsors/lukewhrit" aria-label="Donate to Spacebin" target="_blank">Donate 💕</a>
+            <a id="short-donate-link" href="https://github.com/sponsors/lukewhrit" aria-label="Donate to Spacebin"
+                target="_blank">Donate 💕</a>
         </p>
     </header>
 
     <main>
-        <div id="line-numbers">
-            {{.Lines}}
-        </div>
-        <pre><code class="language-{{.Extension}}">{{.Content}}</code></pre>
+        <pre><code>{{.Highlighted}}</code></pre>
     </main>
-
-    <script src="/static/highlight.min.js"></script>
-    <script>hljs.highlightAll();</script>
-
 </body>
 
-</html>
+</html>

internal/server/web/index.html

@@ -45,7 +45,8 @@
             </svg>
         </a>
 
-        <a id="wiki" href="https://github.com/lukewhrit/spacebin/blob/main/README.md/#-spacebin" aria-label="Spacebin Documentation" target="_blank">
+        <a id="wiki" href="https://github.com/lukewhrit/spacebin/blob/main/README.md/#-spacebin"
+            aria-label="Spacebin Documentation" target="_blank">
             <svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                 stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                 <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
@@ -55,16 +56,18 @@
 
         <p id="donate-long">
             Keep Spacebin free of ads by
-            <a id="donate-link" href="https://github.com/sponsors/lukewhrit" aria-label="Donate to Spacebin" target="_blank">donating.</a>
+            <a id="donate-link" href="https://github.com/sponsors/lukewhrit" aria-label="Donate to Spacebin"
+                target="_blank">donating.</a>
             💕
         </p>
         <p id="donate-short">
-            <a id="short-donate-link" href="https://github.com/sponsors/lukewhrit" aria-label="Donate to Spacebin" target="_blank">Donate 💕</a>
+            <a id="short-donate-link" href="https://github.com/sponsors/lukewhrit" aria-label="Donate to Spacebin"
+                target="_blank">Donate 💕</a>
         </p>
     </header>
 
-    <main>
-        <div id="line-numbers">
+    <main id="with-prompt">
+        <div id="prompt">
             <div>&gt;</div>
         </div>
 

internal/server/web/static/global.css

@@ -4,7 +4,7 @@
     --font-size: 17px;
     --line-height: 1.3;
 
-    --color-line-numbers: #454545;
+    --color-prompt: #7f7f7f;
     --color-links: #91aadf;
     --color-links-dark: #7a98d8;
     --color-foreground: #dedede;
@@ -25,11 +25,14 @@ body {
 }
 
 main {
-    padding: 20px 50px;
-    padding-top: 0;
+    padding-top: 0 !important;
     margin: 0;
 }
 
+main#with-prompt {
+    padding: 20px 50px;
+}
+
 textarea {
     background: transparent;
     border: none;
@@ -44,7 +47,8 @@ textarea {
     display: inline;
 }
 
-textarea:hover, textarea:focus {
+textarea:hover,
+textarea:focus {
     outline: none;
     border: none;
 }
@@ -58,8 +62,8 @@ header {
     gap: 10px;
 }
 
-#line-numbers {
-    color: var(--color-line-numbers);
+#prompt {
+    color: var(--color-prompt);
     z-index: -1000;
     user-select: none;
     position: absolute;
@@ -120,14 +124,16 @@ h1 {
 }
 
 #warning {
-    color: #F97583;
+    color: #f97583;
 }
 
-#donate-long, #donate-short {
+#donate-long,
+#donate-short {
     margin: 0 0 0 auto;
 }
 
-#donate-link:hover, #short-donate-link:hover {
+#donate-link:hover,
+#short-donate-link:hover {
     text-decoration: underline;
 }
 
@@ -144,3 +150,7 @@ h1 {
         display: block;
     }
 }
+
+.chroma {
+    background-color: transparent !important;
+}