Skip to content

Commit 03341e5

Browse files
cdervcderv
authored
Merge pull request #1446 from quarto-dev/revealjs/callout-customize
2 parents dc548a7 + 3883e6e commit 03341e5

File tree

4 files changed

+61
-0
lines changed

4 files changed

+61
-0
lines changed

‎_quarto.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -672,6 +672,7 @@ format:
672672

673673
filters:
674674
- filters/tools-tabset.lua
675+
- filters/color-box.lua
675676

676677
freeze: true
677678

‎docs/presentations/revealjs/themes.qmd‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,34 @@ Here's a list of all Sass variables (and their default values) used by Reveal th
176176
| `$presentation-slide-text-align` | left |
177177
| `$presentation-title-slide-text-align` | center |
178178

179+
### Callouts
180+
181+
+--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
182+
| Variable | Notes |
183+
+==========================+====================================================================================================================================================================+
184+
| `$callout-border-width` | The left border width of callouts. Defaults to `0.3rem`. |
185+
+--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
186+
| `$callout-border-scale` | The border color of callouts computed by shifting the callout color by this amount. Defaults to `0%`. |
187+
+--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
188+
| `$callout-icon-scale` | The color of the callout icon computed by shifting the callout color by this amount. Defaults to `10%`. |
189+
+--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
190+
| `$callout-margin-top` | The amount of top margin on the callout. Defaults to `1rem`. |
191+
+--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
192+
| `$callout-margin-bottom` | The amount of bottom margin on the callout. Defaults to `1rem`. |
193+
+--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
194+
| `$callout-color-<type>` | The colors for the various types of callouts. Defaults: |
195+
| | |
196+
| | | type | default | |
197+
| | |-------------|-------------------------| |
198+
| | | `note` | [`#0d6efd`]{.color-box} | |
199+
| | | `tip` | [`#198754`]{.color-box} | |
200+
| | | `caution` | [`#dc3545`]{.color-box} | |
201+
| | | `warning` | [`#fd7e14`]{.color-box} | |
202+
| | | `important` | [`#ffc107`]{.color-box} | |
203+
| | |
204+
| | Note that style for callout is to have left border using type color, and header background to use a variation of this color. |
205+
+--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
206+
179207
You'll notice that some of the Sass variables use a `presentation-` prefix and some do not. The `presentation-` prefixed variables are specific to presentations, whereas the other variables are the same as ones used for standard Quarto [HTML Themes](/docs/output-formats/html-themes.qmd).
180208

181209
Since all Quarto themes use the same Sass format, you can use a single theme file for both HTML / website documents and presentations.

‎filters/color-box.lua‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Span = function(s)
2+
if not quarto.format.isHtmlOutput() then
3+
return nil
4+
end
5+
if s.classes:includes('color-box') then
6+
local color
7+
if s.attributes['color'] then
8+
quarto.log.output("HERE")
9+
color = s.attributes['color']
10+
s.attributes.color = nil
11+
elseif #s.content == 1 and s.content[1] and s.content[1].t == "Code" and s.content[1].text and s.content[1].text:sub(1, 1) == '#' then
12+
color = s.content[1].text
13+
end
14+
if color then
15+
s.content:insert(1, pandoc.Span('', pandoc.Attr('', { 'color-box' }, { style ="background-color:" .. color .. ";"})))
16+
return pandoc.Span( s.content , { "", { "color-box-container" } })
17+
end
18+
end
19+
end

‎styles.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,3 +337,16 @@ iframe.reveal-demo {
337337
.illustration {
338338
border: 1px solid #dee2e6;
339339
}
340+
341+
span.color-box-container {
342+
display: inline-flex;
343+
align-items: center; /* Align vertically */
344+
}
345+
346+
span.color-box {
347+
display: inline-block;
348+
width: 1em; /* Width of the color box */
349+
height: 1em; /* Height of the color box */
350+
margin-right: 0.2em; /* Space between box and text */
351+
border: 1px solid #000; /* Border color */
352+
}

0 commit comments

Comments
 (0)