highlightjs_theme

_config.yml

@@ -321,6 +321,7 @@ style:
     background: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp
   codeblock:
     scrollbar: 4px
+    highlightjs_theme: https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.5.0/build/styles/atom-one-dark.min.css
 
 default:
   avatar: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/avatar/round/3442075.svg

layout/_partial/head.ejs

@@ -82,6 +82,11 @@ function og_args() {
     <%- favicon_tag(config.favicon) %>
   <% } %>
 
+  <% if (config.highlight && config.highlight.enable == true && config.highlight.hljs == true) { %>
+    <%- css(theme.style.codeblock.highlightjs_theme) %>
+  <% } %>
+
+
   <% if (config.inject && config.inject.head){ %>
     <% (config.inject.head||[]).forEach(function(item){ %>
       <%- item %>

source/css/_common/highlight.styl

@@ -78,6 +78,17 @@ article.md .highlight
 table:not([class])
   border-collapse: collapse
 
+
+article.md pre
+  >.caption
+    color: var(--text-p3)
+  >.hljs
+    padding: 1rem
+    border-radius: $border-block
+    border: 1px solid var(--block-border)
+    line-height: 1.5
+    box-sizing: border-box
+
 article.md .highlight
   .code
     vertical-align: top