Dynamically generate syntax highlighting

This also changes theme to something with better contrast

Author: RealOrangeOne

.gitignore

@@ -4,3 +4,4 @@ _site
 .jekyll-metadata
 .bundle
 node_modules/
+_sass/_syntax-highlighting.scss

Rakefile

@@ -34,11 +34,16 @@ end
 
 task :submodules => ['_sass/brand/.git']
 
-task :dev => [:dependencies, :submodules] do
+task :styles => [:dependencies] do
+  highlight_css = `bundle exec rougify style github`.strip()
+  File.write("_sass/_syntax-highlighting.scss", highlight_css)
+end
+
+task :dev => [:dependencies, :submodules, :styles] do
   sh('bundle exec jekyll serve --host 0.0.0.0 --drafts --config _config.yml,_dev.yml')
 end
 
-task :build => [:dependencies, :submodules] do
+task :build => [:dependencies, :submodules, :styles] do
   sh('bundle exec jekyll build --config _config.yml')
 end
 

_includes/head.html

@@ -17,6 +17,7 @@
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link rel="stylesheet" href="{{ '/css/main.css' | prepend: site.baseurl }}">
+  <link rel="stylesheet" href="{{ '/css/syntax-highlight.css' | prepend: site.baseurl }}">
 
   {% if page.extra_css %}
     {% for css_file in page.extra_css %}

_sass/_syntax-highlighting.scss

@@ -33,8 +33,8 @@
   }
 }
 
-.highlight {
-  padding: 1rem;
+pre.highlight {
+  padding: 1.5rem;
 }
 
 .centered-content {