Add Quarto code with filename (#2776)

r-lib · Sep 28, 2024 · 2d6903f · 2d6903f
1 parent 0a18bc7
commit 2d6903f
Showing 1 changed file with 85 additions and 0 deletions.
diff --git a/inst/BS5/assets/pkgdown.scss b/inst/BS5/assets/pkgdown.scss
@@ -702,6 +702,91 @@ figure > figcaption.quarto-float-caption-top {
   margin-top: 0.5em;
 }
 
+
+// Code with filename ----------------------------------------------
+// Copied from https://github.com/quarto-dev/quarto-cli/blob/81b2732417c40f562f7f11b20e8f025e55abe3c1/src/resources/formats/html/_quarto-rules-code-filename.scss
+// and selectively copied from https://github.com/quarto-dev/quarto-cli/blob/81b2732417c40f562f7f11b20e8f025e55abe3c1/src/resources/formats/html/_quarto-rules.scss#L284
+
+.template-quarto pre {
+  all: unset;
+  white-space-collapse: preserve;
+  display: block;
+}
+
+.template-quarto pre>code {
+  display: block;
+}
+
+.template-quarto .code-with-filename .code-with-filename-file {
+  margin-bottom: 0;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  padding-left: 0.7em;
+  border: 1px solid #dee2e6;
+  border-radius: .25rem;
+  border-bottom: 0;
+  border-bottom-left-radius: 0%;
+  border-bottom-right-radius: 0%;
+}
+
+.template-quarto .code-with-filename div.sourceCode {
+  margin-top: 0;
+  border-top-left-radius: 0%;
+  border-top-right-radius: 0%;
+}
+
+.template-quarto .code-with-filename .code-with-filename-file pre {
+  margin-bottom: 0;
+}
+
+.template-quarto .code-with-filename .code-with-filename-file {
+  background-color: rgba(219, 219, 219, 0.8);
+}
+
+.template-quarto .quarto-dark .code-with-filename .code-with-filename-file {
+  background-color: #555;
+}
+
+.template-quarto .code-with-filename .code-with-filename-file strong {
+  font-weight: 400;
+}
+
+// code linking (pkgdown style)
+.template-quarto code a:any-link {
+  color: inherit;
+  text-decoration: none;
+}
+.template-quarto code a:hover {
+  color: inherit;
+  text-decoration: underline;
+}
+
+
+.template-quarto div.sourceCode {
+  background-color: rgba(233, 236, 239, .65);
+  border: 1px solid rgba(233, 236, 239, .65);
+  border-radius:.25rem;
+  margin-bottom: 5px;
+}
+
+
+.template-quarto pre.sourceCode {
+  background-color:rgba(0, 0, 0, 0);
+  border: none;
+  font-size: .875em;
+  overflow: visible !important;
+  padding:.4em !important;
+}
+
+.template-quarto div.sourceCode {
+  overflow-y:hidden;
+}
+
+.template-quarto code.sourceCode {
+  padding: .125rem .25rem;
+  word-wrap: break-word;
+}
+
 // mermaid ---------------------------------------------------------
 
 :root {