markdown: use comrak syntect (#393)

* markdown: use comrak syntect

* css: make the code samples look better

It ain't perfect, but it's probably good enough to start with:
https://media.discordapp.net/attachments/188796211543801856/885244826180808754/20210908_15h26m30s_grim.png

Signed-off-by: Christine Dodrill <me@christine.website>
Co-authored-by: Christine Dodrill <me@christine.website>

Cargo.toml

@@ -11,7 +11,7 @@ repository = "https://github.com/Xe/site"
 [dependencies]
 color-eyre = "0.5"
 chrono = "0.4"
-comrak = "0.12"
+comrak = "0.12.1"
 envy = "0.4"
 estimated_read_time = "1"
 futures = "0.3"

css/gruvbox-dark.css

@@ -36,7 +36,6 @@
 
 .gruvbox-dark pre {
 	background-color: #1d2021;
-	padding: 0;
 	border: none
 }
 

css/hack.css

@@ -30,8 +30,6 @@ fieldset {
   margin: 0;
 }
 pre {
-  padding: 2rem;
-  margin: 1.75rem 0;
   background-color: #fff;
   border: 1px solid #ccc;
   overflow: auto;

css/shim.css

@@ -37,3 +37,8 @@ img {
 .conversation-chat {
     align-self: center;
 }
+
+pre {
+    padding-left: 1em;
+    padding-right: 1em;
+}

src/app/markdown.rs

@@ -1,10 +1,19 @@
 use crate::templates::Html;
 use color_eyre::eyre::{Result, WrapErr};
 use comrak::nodes::{Ast, AstNode, NodeValue};
-use comrak::{format_html, markdown_to_html, parse_document, Arena, ComrakOptions};
+use comrak::plugins::syntect::SyntectAdapter;
+use comrak::{
+    format_html_with_plugins, markdown_to_html_with_plugins, parse_document, Arena, ComrakOptions,
+    ComrakPlugins,
+};
+use lazy_static::lazy_static;
 use std::cell::RefCell;
 use url::Url;
 
+lazy_static! {
+    static ref SYNTECT_ADAPTER: SyntectAdapter<'static> = SyntectAdapter::new("base16-mocha.dark");
+}
+
 pub fn render(inp: &str) -> Result<String> {
     let mut options = ComrakOptions::default();
 
@@ -20,6 +29,9 @@ pub fn render(inp: &str) -> Result<String> {
     let arena = Arena::new();
     let root = parse_document(&arena, inp, &options);
 
+    let mut plugins = ComrakPlugins::default();
+    plugins.render.codefence_syntax_highlighter = Some(&*SYNTECT_ADAPTER);
+
     iter_nodes(root, &|node| {
         let mut data = node.data.borrow_mut();
         match &mut data.value {
@@ -33,10 +45,10 @@ pub fn render(inp: &str) -> Result<String> {
                 node.detach();
                 let mut message = vec![];
                 for child in node.children() {
-                    format_html(child, &options, &mut message)?;
+                    format_html_with_plugins(child, &options, &mut message, &plugins)?;
                 }
                 let message = std::str::from_utf8(&message)?;
-                let mut message = markdown_to_html(message, &options);
+                let mut message = markdown_to_html_with_plugins(message, &options, &plugins);
                 crop_letters(&mut message, 3);
                 message.drain((message.len() - 5)..);
                 let mood = without_first(u.path());
@@ -57,7 +69,7 @@ pub fn render(inp: &str) -> Result<String> {
     })?;
 
     let mut html = vec![];
-    format_html(root, &options, &mut html).unwrap();
+    format_html_with_plugins(root, &options, &mut html, &plugins).unwrap();
 
     String::from_utf8(html).wrap_err("post is somehow invalid UTF-8")
 }

templates/blogpost.rs.html

@@ -147,6 +147,4 @@
             @}
         @}
 </script>
-
-<script src="https://cdn.christine.website/file/christine-static/prism/prism.js"></script>
 @:footer_html()

templates/header.rs.html

@@ -59,7 +59,6 @@ la budza pu cusku lu
         <link rel="stylesheet" href="/css/hack.css" />
         <link rel="stylesheet" href="/css/gruvbox-dark.css" />
         <link rel="stylesheet" href="/css/shim.css" />
-        <link rel="stylesheet" href="https://cdn.christine.website/file/christine-static/prism/prism.css" />
         @if Utc::now().month() == 12 || Utc::now().month() == 1 || Utc::now().month() == 2 { <link rel="stylesheet" href="/css/snow.css" /> }
         <link rel="manifest" href="/static/manifest.json" />