Support customize pre color

README.md

@@ -118,6 +118,10 @@ footer-template = "templates/footer.html"
 highlight_code = true
 # custom highligh theme
 highlight_theme = "ayu-light"
+# custom pre block code color, only works if `highlight_code` is disabled
+pre_code_color = "#333"
+# custom pre block background color, only works if `highlight_code` is disabled
+pre_bg_color = "#eee"
 
 # Issue 1
 [[issue]]

src/entity/markdown.rs

@@ -1,30 +1,46 @@
-use serde::Deserialize;
+use serde::{Deserialize, Serialize};
 
-#[derive(Debug, Deserialize, Clone)]
+#[derive(Debug, Serialize, Deserialize, Clone)]
 #[serde(rename_all(deserialize = "snake_case"))]
 pub struct MarkdownConfig {
     #[serde(default = "MarkdownConfig::default_highlight_code")]
     pub highlight_code: bool,
     #[serde(default = "MarkdownConfig::default_highlight_theme")]
     pub highlight_theme: String,
+    #[serde(default = "MarkdownConfig::default_pre_code_color")]
+    pub pre_code_color: String,
+    #[serde(default = "MarkdownConfig::default_pre_bg_color")]
+    pub pre_bg_color: String,
 }
 
 impl Default for MarkdownConfig {
     fn default() -> Self {
         Self {
             highlight_code: true,
             highlight_theme: Self::default_highlight_theme(),
+            pre_code_color: Self::default_pre_code_color(),
+            pre_bg_color: Self::default_pre_code_color(),
         }
     }
 }
 
 impl MarkdownConfig {
     const DEFAULT_HIGHLIGHT_THEME: &'static str = "monokai";
+    const DEFAULT_PRE_CODE_COLOR: &'static str = "#61676c";
+    const DEFAULT_PRE_BG_COLOR: &'static str = "#f5f5f5";
 
     fn default_highlight_theme() -> String {
         Self::DEFAULT_HIGHLIGHT_THEME.to_string()
     }
 
+    fn default_pre_code_color() -> String {
+        Self::DEFAULT_PRE_CODE_COLOR.to_string()
+    }
+
+    fn default_pre_bg_color() -> String {
+        Self::DEFAULT_PRE_BG_COLOR.to_string()
+    }
+
     fn default_highlight_code() -> bool {
         true
     }

src/entity/zine.rs

@@ -205,6 +205,7 @@ impl Entity for Zine {
     fn render(&self, mut context: Context, dest: &Path) -> Result<()> {
         context.insert("theme", &self.theme);
         context.insert("site", &self.site);
+        context.insert("markdown_config", &self.markdown_config);
 
         // Render all authors pages.
         let authors = self.authors();

tailwind.config.js

@@ -30,6 +30,11 @@ module.exports = {
                         strong: {
                             fontWeight: '500',
                         },
+                        pre: {
+                            borderRadius: 0,
+                            color: 'var(--pre-code-color)',
+                            backgroundColor: 'var(--pre-bg-color)',
+                        },
                         blockquote: {
                             color: "#7c8088",
                             borderLeftWidth: '2px',

templates/base.jinja

@@ -20,6 +20,8 @@
                 --main-color: {{ theme.main_color }};
                 --link-color: {{ theme.link_color }};
                 --secondary-color: {{ theme.secondary_color }};
+                --pre-code-color: {{ markdown_config.pre_code_color }};
+                --pre-bg-color: {{ markdown_config.pre_bg_color }};
             }
         </style>
     </head>