fix: the <code> render error

assets/css/dark.css

@@ -19,6 +19,7 @@
         --pre-color: #f8f8f2;
         --pre-bg-color: #292b2d;
         --pre-border-color: rgba(175, 184, 193, 0.3);
+        --kbd-bg-color: #404347;
 
         --bq-color: #ccc;
         --hr-color: #333;
@@ -57,6 +58,7 @@ html[data-theme='dark'] {
     --pre-color: #f8f8f2;
     --pre-bg-color: #292b2d;
     --pre-border-color: rgba(175, 184, 193, 0.3);
+    --kbd-bg-color: #404347;
 
     --bq-color: #ccc;
     --hr-color: #333;

assets/css/light.css

@@ -19,6 +19,7 @@
     --pre-color: rgb(31, 35, 40);
     --pre-bg-color: #eff1f2;
     --pre-border-color: #e1e5e9;
+    --kbd-bg-color: #f7f7f7;
 
     --bq-color: #ccc;
     --hr-color: #ccc;
@@ -56,6 +57,7 @@ html[data-theme="light"] {
   --pre-color: rgb(31, 35, 40);
   --pre-bg-color: #eff1f2;
   --pre-border-color: #e1e5e9;
+  --kbd-bg-color: #f7f7f7;
   
   --bq-color: #ccc;
   --hr-color: #ccc;

assets/css/main.css

@@ -58,7 +58,8 @@ main {
 
     margin-top: 1em;
     margin-bottom: 1em;
-    padding: 0.5em 1em; /* top & bottom, left & right */
+    padding: 0.5em 1em;
+    /* top & bottom, left & right */
 
     border: 1px solid var(--card-border-color);
     border-radius: var(--card-border-radius);
@@ -157,18 +158,15 @@ table {
 }
 
 
-th, td {
+th,
+td {
     padding: 0.5em 1em;
     border: 1px double var(--table-border-color);
 }
 
-
 /* Code */
-pre {
-    max-width: 100%;
-    overflow: auto;
-    /* margin-top: 0; */
-    /* margin-bottom: 0; */
+mark {
+    border-radius: 4px;
 }
 
 code,
@@ -177,18 +175,49 @@ kbd {
     color: var(--pre-color);
     background-color: var(--pre-bg-color);
     font-family: 'Menlo', 'Courier New', 'Consolas', monospace;
-    font-size: 0.90em;
+    font-size: 14.4px; /* 18px * 0.6 */
     line-height: 154%;
     border-radius: 6px;
     border: 1px solid var(--pre-border-color);
-    padding: 0.1em 0.3em; /* top, bottom */
-    /* top, left, bottom, right */
+    overflow: auto;
 }
 
-pre code, pre kbd {
+/* <code> tag */
+code {
+    font-size: 14.4px; /* 18px * 0.6 */
+    padding: 0.1em 0.3em;
+}
+
+pre {
+    padding: 0.3em;
+}
+
+/* <kbd> inside <p> */
+/* <kbd> inside <pre> */
+/* p kbd,
+pre kbd {
+    background-color: transparent;
+    border: none;
+} */
+p kbd,
+pre kbd,
+p kbd kbd,
+pre kbd kbd {
+    font-size: 14.4px; /* 18px * 0.6 */
+    background-color: var(--kbd-bg-color);
+    border: 1px solid var(--pre-border-color);
+    border-width: 1px 2px 2px 1px;
+    padding: 0.1em 0.3em;
+    margin-left: 0.2em;
+    margin-right: 0.2em;
+}
+
+/* ```python``` like */
+pre code {
     color: inherit;
     background-color: inherit;
     border: none;
+    padding: 0em;
 }
 
 /* Styles */
@@ -710,7 +739,8 @@ code.has-jax {
     visibility: hidden;
 }
 
-.pagination-item a:hover, .pagination-item a:focus {
+.pagination-item a:hover,
+.pagination-item a:focus {
     border-bottom: 0;
 }
 
@@ -738,13 +768,15 @@ code.has-jax {
     justify-content: space-between;
 }
 
-ul.language-select, ul.footer-menu {
+ul.language-select,
+ul.footer-menu {
     padding-left: 0;
     list-style: none;
     display: flex;
 }
 
-ul.language-select > li, ul.footer-menu > li {
+ul.language-select>li,
+ul.footer-menu>li {
     margin-right: 1em;
 }
 
@@ -764,6 +796,7 @@ ul.language-select > li, ul.footer-menu > li {
     position: relative;
     overflow: auto;
 }
+
 .highlight pre {
     padding-right: 75px;
 }
@@ -787,8 +820,8 @@ ul.language-select > li, ul.footer-menu > li {
     background-color: #777;
     min-width: 25px;
     text-align: center;
-    border-radius: 5px;
 }
+
 .highlight-copy-btn:hover {
     transition-duration: .1s;
     background-color: #666;
@@ -804,12 +837,18 @@ ul.language-select > li, ul.footer-menu > li {
 
 /* Others */
 .noselect {
-    -webkit-touch-callout: none; /* iOS Safari */
-      -webkit-user-select: none; /* Safari */
-       -khtml-user-select: none; /* Konqueror HTML */
-         -moz-user-select: none; /* Firefox */
-          -ms-user-select: none; /* Internet Explorer/Edge */
-              user-select: none; /* Non-prefixed version, currently
+    -webkit-touch-callout: none;
+    /* iOS Safari */
+    -webkit-user-select: none;
+    /* Safari */
+    -khtml-user-select: none;
+    /* Konqueror HTML */
+    -moz-user-select: none;
+    /* Firefox */
+    -ms-user-select: none;
+    /* Internet Explorer/Edge */
+    user-select: none;
+    /* Non-prefixed version, currently
                                     supported by Chrome and Opera */
 }
 
@@ -851,17 +890,47 @@ ul.language-select > li, ul.footer-menu > li {
     }
 }
 
-{{ range site.Params.customCSS }}
-    {{ $custom := resources.Get . }}
-    {{ $custom.Content }}
-{{ end }}
+    {
+        {
+        range site.Params.customCSS
+    }
+}
+
+    {
+        {
+        $custom : =resources.Get .
+    }
+}
+
+    {
+        {
+        $custom.Content
+    }
+}
+
+    {
+        {
+        end
+    }
+}
+
+    {
+        {
+        if site.Params.isso.enabled
+    }
+}
 
-{{ if site.Params.isso.enabled }}
 #isso-thread .textarea {
     color: #000;
 }
+
 #isso-thread .isso-feedlink {
     position: relative;
     z-index: 1;
 }
-{{ end }}
+
+    {
+        {
+        end
+    }
+}

exampleSiteMultilingual/content/posts/advanced copy.md

@@ -0,0 +1,58 @@
++++
+author = "Hugo Authors"
+title = "Usage of code, pre, kbd"
+date = "2024-04-09"
+description = "Guide to advanced usage of Anubis2"
+tags = [
+    "emoji",
+]
++++
+
+
+## \<code\>
+
+<code>Direct Code</code>
+
+`A verrrrrryyyyy llloooonnnggg coooodeeee`
+
+`code` `is` `here`
+
+```plain
+multiline
+code
+here
+```
+
+```typescript
+interface User {
+  id: number
+  firstName: string
+  lastName: string
+  role: string
+}
+ 
+function updateUser(id: number, update: Partial<User>) {
+  const user = getUser(id)
+  const newUser = { ...user, ...update }
+  saveUser(id, newUser)
+}
+```
+
+## \<pre\>
+
+<pre>pre text</pre>
+<pre>pre text</pre>
+<pre>pre text</pre>
+
+## \<kbd\>
+
+
+<p>Press <kbd>CTRL</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
+
+<p>Press <kbd>CMD</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>
+
+Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
+
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+
+<pre>Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.</pre>