Org html export: make src blocks collapsable
This commit is contained in:
parent
a3f0de1153
commit
5f0b3bbba1
32
config.org
32
config.org
|
@ -4635,6 +4635,38 @@ Suffice to say I've snatched it, with a few of my own tweaks applied.
|
|||
The TOC and theme toggle both use ~position: fixed~, and for some strange reason
|
||||
Chrome seems to be treating this as ~position: absolute~.
|
||||
#+end_warning
|
||||
***** Collapsable src and example blocks
|
||||
By wrapping the ~<pre>~ element in a ~<details>~ block, we can obtain collapsable
|
||||
blocks with no CSS, though we will toss a little in anyway to have this looking
|
||||
somewhat spiffy.
|
||||
|
||||
#+NAME: Src blocks
|
||||
#+BEGIN_SRC emacs-lisp
|
||||
(defadvice! org-html-src-block-collapsable (orig-fn src-block contents info)
|
||||
"Wrap the usual <pre> block in a <details>"
|
||||
:around #'org-html-src-block
|
||||
(let* ((properties (cadr src-block))
|
||||
(lang (plist-get properties :language))
|
||||
(name (plist-get properties :name)))
|
||||
(format "<details class='code' open><summary%s>%s</summary>%s</details>"
|
||||
(if name " class='named'" "")
|
||||
(if (not name) lang (format "<span class='name'>%s</span> %s" name lang))
|
||||
(funcall orig-fn src-block contents info))))
|
||||
#+END_SRC
|
||||
|
||||
#+NAME: Exampl, fixed width, and property blocks
|
||||
#+BEGIN_SRC emacs-lisp
|
||||
(after! org
|
||||
(defun org-html-block-collapsable (orig-fn block contents info)
|
||||
"Wrap the usual block in a <details>"
|
||||
(concat "<details class='code' open><summary></summary>"
|
||||
(funcall orig-fn block contents info)
|
||||
"</details>"))
|
||||
|
||||
(advice-add 'org-html-example-block :around #'org-html-block-collapsable)
|
||||
(advice-add 'org-html-fixed-width :around #'org-html-block-collapsable)
|
||||
(advice-add 'org-html-property-drawer :around #'org-html-block-collapsable))
|
||||
#+END_SRC
|
||||
***** Make verbatim different to code
|
||||
Since we have =verbatim= and ~code~, let's use =verbatim= for key strokes.
|
||||
#+BEGIN_SRC emacs-lisp
|
||||
|
|
|
@ -65,6 +65,37 @@ li {
|
|||
}
|
||||
}
|
||||
|
||||
// folding
|
||||
|
||||
details.code {
|
||||
summary {
|
||||
position: relative;
|
||||
left: -2px;
|
||||
padding-left: 10px;
|
||||
padding-botton: 4px;
|
||||
margin-left: -10px;
|
||||
z-index: 1;
|
||||
@include light-meta;
|
||||
.name {
|
||||
font-size: 14px;
|
||||
color: $text-medium;
|
||||
}
|
||||
}
|
||||
summary::marker {
|
||||
color: $back-medium;
|
||||
}
|
||||
&[open] summary {
|
||||
color: transparent;
|
||||
margin-bottom: -32px;
|
||||
}
|
||||
&[open] summary.named {
|
||||
margin-bottom: -26px;
|
||||
}
|
||||
&:not([open]) summary {
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Palette copied from blog
|
||||
// ------------------------
|
||||
// foreground: #655370
|
||||
|
|
|
@ -1139,6 +1139,36 @@ li code {
|
|||
li p code {
|
||||
font-size: 15px; }
|
||||
|
||||
details.code summary {
|
||||
position: relative;
|
||||
left: -2px;
|
||||
padding-left: 10px;
|
||||
padding-botton: 4px;
|
||||
margin-left: -10px;
|
||||
z-index: 1;
|
||||
font-family: "Open Sans";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
line-height: 1.9;
|
||||
color: var(--text-light); }
|
||||
details.code summary .name {
|
||||
font-size: 14px;
|
||||
color: var(--text-medium); }
|
||||
|
||||
details.code summary::marker {
|
||||
color: var(--back-medium); }
|
||||
|
||||
details.code[open] summary {
|
||||
color: transparent;
|
||||
margin-bottom: -32px; }
|
||||
|
||||
details.code[open] summary.named {
|
||||
margin-bottom: -26px; }
|
||||
|
||||
details.code:not([open]) summary {
|
||||
margin-bottom: -16px; }
|
||||
|
||||
.example,
|
||||
.src {
|
||||
color: var(--code-foreground); }
|
||||
|
|
Loading…
Reference in a new issue