diff --git a/assets/docs/scss/custom/plugins/chroma/_default.scss b/assets/docs/scss/custom/plugins/chroma/_default.scss index d3870f8e..89e9366a 100644 --- 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); } } \ No newline at end of file diff --git a/assets/docs/scss/custom/plugins/prism/_prism.scss b/assets/docs/scss/custom/plugins/prism/_prism.scss index a83908aa..ba6d06cd 100644 --- 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 index a8c30886..8bc5bf46 100644 --- 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 index 891cced2..8c09ddef 100644 --- 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 index 6e2913c3..7dc0984e 100644 --- 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 index 59f75fdc..d13baff0 100644 --- 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 index a0f4ce36..6a5b0456 100644 --- a/assets/docs/scss/custom/structure/_content.scss +++ b/assets/docs/scss/custom/structure/_content.scss @@ -231,7 +231,7 @@ 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; @@ -239,7 +239,7 @@ i { // 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 index 3fc12bcc..93d73e2f 100644 --- 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 index ea4402eb..c0887d16 100644 --- 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"