♻️ refactor css for prismjs themes feature (#76)

colinwilson · Sep 17, 2023 · 983ce81 · 983ce81
2 parents dcdf654 + d2d79f9
commit 983ce81
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 166 deletions.
diff --git a/assets/docs/scss/custom/plugins/chroma/_default.scss b/assets/docs/scss/custom/plugins/chroma/_default.scss
@@ -5,7 +5,9 @@
 }
 
 .docs-content .main-content pre {
+    background-color: var(--code-block-bg) !important;
     code {
         color: #f5fbff;
+        background: var(--code-block-bg);
     }
 }
diff --git a/assets/docs/scss/custom/plugins/prism/_prism.scss b/assets/docs/scss/custom/plugins/prism/_prism.scss
@@ -1,6 +1,58 @@
 /* PrismJS 1.29.0 */
 
- pre[data-line] {
+// Fit codeblock container to contents
+// .prism-codeblock {
+//     width: fit-content;
+//     max-width: 100%;
+// }
+
+code {
+    color: var(--text-default);
+}
+
+.docs-content .main-content pre {
+    background-color: var(--prism-code-bg) !important;
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
+    border: none !important;
+    font-family: $font-family-monospace;
+    font-size: 0.8rem;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+
+    scrollbar-width: thin;
+    scrollbar-color: var(--prism-code-scrollbar-thumb-color) var(--prism-code-bg);
+
+    &::-webkit-scrollbar {
+        height: 5px;
+        background: var(--prism-code-bg);
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: var(--prism-code-scrollbar-thumb-color);
+    }
+}
+
+pre[data-line] {
      position: relative;
      padding: 0 !important;
  }

diff --git a/assets/docs/scss/custom/plugins/prism/themes/_lotusdocs.scss b/assets/docs/scss/custom/plugins/prism/themes/_lotusdocs.scss
@@ -18,54 +18,10 @@
     --prism-code-scrollbar-thumb-color: var(--gray-600);
 }
 
-// Fit codeblock container to contents
-// .prism-codeblock {
-//     width: fit-content;
-//     max-width: 100%;
-// }
-
-code {
-    color: var(--text-default);
-}
-
  code[class*="language-"],
  pre[class*="language-"] {
      color: #f5fbff !important;
      background: var(--prism-code-bg) !important;
-     border: none !important;
-     font-family: $font-family-monospace;
-     font-size: 0.8rem;
-     text-align: left;
-     white-space: pre;
-     word-spacing: normal;
-     word-break: normal;
-     word-wrap: normal;
-     line-height: 1.5;
-
-     -moz-tab-size: 4;
-     -o-tab-size: 4;
-     tab-size: 4;
-
-     -webkit-hyphens: none;
-     -moz-hyphens: none;
-     -ms-hyphens: none;
-     hyphens: none;
-
-     -webkit-font-smoothing: antialiased;
-     -moz-osx-font-smoothing: grayscale;
-     text-rendering: optimizeLegibility;
-
-     scrollbar-width: thin;
-     scrollbar-color: var(--prism-code-scrollbar-thumb-color) var(--prism-code-bg);
-
-     &::-webkit-scrollbar {
-         height: 5px;
-         background: var(--prism-code-bg);
-     }
-
-     &::-webkit-scrollbar-thumb {
-         background: var(--prism-code-scrollbar-thumb-color);
-     }
  }
 
 /* Code blocks */

diff --git a/assets/docs/scss/custom/plugins/prism/themes/_lucario.scss b/assets/docs/scss/custom/plugins/prism/themes/_lucario.scss
@@ -25,50 +25,11 @@
     --prism-copy-btn-bg-hover-color: var(--white);
 }
 
-code {
-    color: var(--text-default);
-}
-
 code[class*="language-"],
 pre[class*="language-"] {
     color: var(--prism-code-color);
-    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+    // text-shadow: 0 1px rgba(0, 0, 0, 0.3);
     background: var(--prism-code-bg) !important;
-    border: none !important;
-    font-family: $font-family-monospace;
-    font-size: 0.8rem;
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-
-    line-height: 1.5;
-
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-
-    -webkit-font-smoothing: antialiased;
-     -moz-osx-font-smoothing: grayscale;
-     text-rendering: optimizeLegibility;
-
-     scrollbar-width: thin;
-     scrollbar-color: var(--prism-code-scrollbar-thumb-color) var(--prism-code-bg);
-
-     &::-webkit-scrollbar {
-         height: 5px;
-         background: var(--prism-code-bg);
-     }
-
-     &::-webkit-scrollbar-thumb {
-         background: var(--prism-code-scrollbar-thumb-color);
-     }
 }
 
 /* Code blocks */

diff --git a/assets/docs/scss/custom/plugins/prism/themes/_solarized-light.scss b/assets/docs/scss/custom/plugins/prism/themes/_solarized-light.scss
@@ -50,49 +50,10 @@ green     #859900
     --prism-copy-btn-bg-hover-color: var(--white);
 }
 
-code {
-    color: var(--text-default);
-}
-
 code[class*="language-"],
 pre[class*="language-"] {
 	color: var(--prism-code-color); /* base00 */
     background: var(--prism-code-bg) !important;
-    border: none !important;
-	font-family: $font-family-monospace;
-	font-size: 0.8rem;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-
-	line-height: 1.5;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-
-    -webkit-font-smoothing: antialiased;
-     -moz-osx-font-smoothing: grayscale;
-     text-rendering: optimizeLegibility;
-
-     scrollbar-width: thin;
-     scrollbar-color: var(--prism-code-scrollbar-thumb-color) var(--prism-code-bg);
-
-     &::-webkit-scrollbar {
-         height: 5px;
-         background: var(--prism-code-bg);
-     }
-
-     &::-webkit-scrollbar-thumb {
-         background: var(--prism-code-scrollbar-thumb-color);
-     }
 }
 
 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,

diff --git a/assets/docs/scss/custom/plugins/prism/themes/_twilight.scss b/assets/docs/scss/custom/plugins/prism/themes/_twilight.scss
@@ -27,48 +27,10 @@ https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+cli
     --prism-copy-btn-bg-hover-color: var(--white);
 }
 
-code {
-    color: var(--text-default);
-}
-
 code[class*="language-"],
 pre[class*="language-"] {
     color: var(--prism-code-color);
     background: var(--prism-code-bg) !important;
-    border: none !important;
-    font-family: $font-family-monospace;
-    font-size: 0.8rem;
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: 1.5;
-
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-
-    scrollbar-width: thin;
-    scrollbar-color: var(--prism-code-scrollbar-thumb-color) var(--prism-code-bg);
-
-    &::-webkit-scrollbar {
-        height: 5px;
-        background: var(--prism-code-bg);
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: var(--prism-code-scrollbar-thumb-color);
-    }
 }
 
 pre[class*="language-"],

diff --git a/assets/docs/scss/custom/structure/_content.scss b/assets/docs/scss/custom/structure/_content.scss
@@ -231,15 +231,15 @@ i {
 
 .docs-content .main-content pre {
     margin: 0;
-    background-color: var(--code-block-bg) !important;
+    // background-color: var(--code-block-bg) !important;
     border-radius: 4px;
     padding: $code-block-padding-top;
 
     code {
         // color: #f5fbff;
         font-size: 0.8rem;
         display: block;
-        background: var(--code-block-bg);
+        // background: var(--code-block-bg);
         border: none;
         overflow-x: auto;
         line-height: 1.5;

diff --git a/assets/docs/scss/style.scss b/assets/docs/scss/style.scss
@@ -56,11 +56,11 @@ $code-block-padding-top: {{ if eq .Site.Params.docs.prism true -}}0{{ else }}1.2
 
 // Plugins
 
-// Prism
+// Prism / Chroma
 {{- if eq .Site.Params.docs.prism true }}
 @import {{ printf "'%s%s'" "custom/plugins/prism/themes/" (.Site.Params.docs.prismTheme | default "lotusdocs") }}; // current prism theme
 @import "custom/plugins/prism/prism";
-{{- else -}}
+{{- else }}
 @import "custom/plugins/chroma/default";
 {{- end -}}
 

diff --git a/exampleSite/hugo.toml b/exampleSite/hugo.toml
@@ -79,6 +79,8 @@ defaultContentLanguage = 'en'
 
         prism           = true                                # enable syntax highlighting via Prism
 
+        prismTheme      = "solarized-light"                           # (optional) - Set theme for PrismJS. Options include: lotusdocs (default), solarized-light, twilight, lucario
+
         # gitinfo
         repoURL         = "https://github.com/colinwilson/lotusdocs.dev"  # Git repository URL for your site [support for GitHub, GitLab, and BitBucket]
         repoBranch      = "release"