add: code highghlight

fix: code blocks style
therealzaybee · Jul 29, 2023 · 927b858 · 927b858
1 parent 8dfa026
commit 927b858
Show file tree

Hide file tree

Showing 8 changed files with 164 additions and 21 deletions.
diff --git a/assets/built/index.css b/assets/built/index.css
@@ -2098,25 +2098,25 @@ figcaption strong {
   color: rgba(0,0,0,0.8);
 }
 
-.gh-canvas :not(pre) code {
-  vertical-align: middle;
-  padding: 0.15em 0.4em 0.15em;
-  border: #e1eaef 1px solid;
-  font-weight: 400 !important;
-  font-size: 0.9em;
-  line-height: 1em;
-  color: #dc0050;
-  background: #f0f6f9;
-  border-radius: 0.25em;
+/* .gh-canvas :not(pre) code {
+    vertical-align: middle;
+    padding: 0.15em 0.4em 0.15em;
+    border: #e1eaef 1px solid;
+    font-weight: 400 !important;
+    font-size: 0.9em;
+    line-height: 1em;
+    color: #dc0050;
+    background: #f0f6f9;
+    border-radius: 0.25em;
 }
 
 .gh-canvas > pre {
-  overflow: scroll;
-  padding: 16px 20px;
-  background: rgba(255,255,255,0.8);
-  border-radius: 5px;
-  box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
-}
+    overflow: scroll;
+    padding: 16px 20px;
+    background: rgba(255,255,255,0.8);
+    border-radius: 5px;
+    box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
+} */
 
 .kg-embed-card {
   display: flex;
@@ -2744,6 +2744,20 @@ body.dark {
   max-width: 100%
 }
 
+:not(pre)>code[class*=language-],pre[class*=language-]{
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(1 22 39 / var(--tw-bg-opacity)) !important;
+}
+
+:is(.dark :not(pre)>code[class*=language-]),:is(.dark pre[class*=language-]){
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(39 40 34 / var(--tw-bg-opacity)) !important;
+}
+
+:not(pre)>code[class*=language-],pre[class*=language-] {
+  border-radius: 8px;
+}
+
 :is(.dark .dark\:prose-invert){
   --tw-prose-body: var(--tw-prose-invert-body);
   --tw-prose-headings: var(--tw-prose-invert-headings);

diff --git a/assets/built/index.js b/assets/built/index.js
diff --git a/assets/built/index.js.map b/assets/built/index.js.map
diff --git a/assets/css/ghost/content.css b/assets/css/ghost/content.css
@@ -136,7 +136,7 @@ figcaption strong {
     color: rgba(0,0,0,0.8);
 }
 
-.gh-canvas :not(pre) code {
+/* .gh-canvas :not(pre) code {
     vertical-align: middle;
     padding: 0.15em 0.4em 0.15em;
     border: #e1eaef 1px solid;
@@ -154,7 +154,7 @@ figcaption strong {
     background: rgba(255,255,255,0.8);
     border-radius: 5px;
     box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
-}
+} */
 
 .kg-embed-card {
     display: flex;

diff --git a/assets/css/index.css b/assets/css/index.css
@@ -183,3 +183,8 @@ body.dark {
     margin: 0 auto;
     max-width: 100%
 }
+
+:not(pre)>code[class*=language-],pre[class*=language-] {
+    @apply !bg-[#011627] dark:!bg-[#272822];
+    border-radius: 8px;
+}
diff --git a/assets/css/prism.css b/assets/css/prism.css