commit 8f486e65243ea95525f303c69d92473648f5b9a7
parent 3415e4fa1b2b1b58330861ad4a4e29ded42b3e84
Author: Lou Woell <lou.woell@posteo.de>
Date: Mon, 11 Mar 2024 20:44:29 +0100
Make `code` shortcode work with chroma
Diffstat:
4 files changed, 25 insertions(+), 15 deletions(-)
diff --git a/assets/css/code.scss b/assets/css/code.scss
@@ -11,22 +11,13 @@
}
input[type="checkbox"]:checked {
- ~ pre,
- ~ .code-toolbar pre {
+ ~ div,
+ ~ .highlight pre {
height: 0;
padding: 0;
border-top: none;
}
- ~ .code-toolbar {
- padding: 0;
- border-top: none;
-
- .toolbar {
- display: none;
- }
- }
-
~ label .collapsable-code__toggle:after {
content: attr(data-label-expand);
}
@@ -78,7 +69,4 @@
}
}
- .code-toolbar {
- margin: 0;
- }
}
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -14,5 +14,6 @@
@import "terms";
@import "gist";
+@import "code";
@import "highlight";
diff --git a/exampleSite/content/showcase.md b/exampleSite/content/showcase.md
@@ -14,6 +14,27 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum met
Nulla libero turpis, lacinia vitae cursus ut, auctor dictum nisl. Fusce varius felis nec sem ullamcorper, at convallis nisi vestibulum. Duis risus odio, porta sit amet placerat mollis, tincidunt non mauris. Suspendisse fringilla, `odio a dignissim pharetra`, est urna sollicitudin urna, eu scelerisque magna ex vitae tellus.
+{{< code language="css" title="Really cool snippet" id="1" expand="Show" collapse="Hide" isCollapsed="true" >}}
+pre {
+ background: #1a1a1d;
+ padding: 20px;
+ border-radius: 8px;
+ font-size: 1rem;
+ overflow: auto;
+
+ @media (--phone) {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ }
+
+ code {
+ background: none !important;
+ color: #ccc;
+ padding: 0;
+ font-size: inherit;
+ }
+}
+{{< /code >}}
```common-lisp
(defun test (str)
diff --git a/layouts/shortcodes/code.html b/layouts/shortcodes/code.html
@@ -8,7 +8,7 @@
{{ if .Get "title" }}<span class="collapsable-code__title">{{ .Get "title" | markdownify }}</span>{{ end }}
<span class="collapsable-code__toggle" data-label-expand="{{ .Get "expand" | default "△" }}" data-label-collapse="{{ .Get "collapse" | default "▽" }}"></span>
</label>
- <pre {{ if .Get "language" }}class="language-{{ .Get "language" }}" {{ end }}><code>{{ .Inner | string }}</code></pre>
+ {{ transform.Highlight (trim .Inner "\r\n") (.Get "language")}}
</div>
{{ else }}
{{ errorf "If you want to use the \"collapsable code\" shortcode, you need to pass a mandatory \"language\" param. The issue occured in %q (%q)" .Page.File .Page.Permalink }}