Search code examples
htmlcssyamlr-markdownbookdown

How to use HTML/CSS for reusable styled boxes in Bookdown

I would like to create reusable sections for my bookdown project.

What works: I create a style.css including

.titeldefbox{
  display: flex;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  background-color: darkslategray;
  height: 30px;
  color: white;
  border-radius: 10px 10px 0 0;
  padding: 10px 0 10px 0;
}
.defbox{
  background-position: 0px;
  background: linear-gradient(
  315deg,
  hsl(240deg 50% 95%) 0%,
  hsl(158deg 13% 64%) 100%);
  padding: 1em 1em 1em 1em;
  border-radius: 10px;
  position: relative;
}
.svgdefbox{
  width: auto;
  height: 25px;
  padding-left: 1em;
}
.defbox h2{
font-size: 16px;
margin-top: 0px;
width: 100%;
height: 20px;
padding: 5px 0 10px 15px;
}

.defbox p{
  margin-top: 40px;
  padding: 10px 10px 0 0;
}

I call a div span in any .Rmd as

::::: {.defbox}
A **definition** is a statement of the meaning of a term.
:::::

Renders to:

enter image description here

What does not work: A friend of mine designed a titled box with a SVG image (as you see it everywhere, e.g. https://swcarpentry.github.io/r-novice-inflammation/01-starting-with-data/index.html).

enter image description here

This

<div class="defbox">
  <div class="titeldefbox">
  <svg  class="svgdefbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 382.59 429.36"><defs><style>.cls-1{fill:#ffffff;}</style></defs><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_6" data-name="Ebene 6"><g id="definition"><path class="cls-1" d="M81.17,128.33c3.88-2.38,7.76-4.4,11.64-6.29,1.94-1,3.88-1.82,5.82-2.74s3.88-1.7,5.82-2.5a5.39,5.39,0,0,1,2.9,0,23.59,23.59,0,0,0,2.91.1l5.81,0,11.61,0,46.48.18,46.47.18,23.23.09,5.8,2.59c1.93.92,3.87,1.78,5.8,2.77,3.86,1.9,7.73,3.91,11.59,6.23-3.88,2.29-7.76,4.27-11.64,6.14-1.94,1-3.88,1.82-5.82,2.72l-5.82,2.55-23.23-.09-46.47-.18L127.6,140,116,140l-5.81,0a21.76,21.76,0,0,0-2.91.07,5.39,5.39,0,0,1-2.9,0c-1.93-.82-3.87-1.69-5.8-2.55s-3.86-1.79-5.8-2.78C88.9,132.8,85,130.75,81.17,128.33Z"/><path class="cls-1" d="M81.17,192.37c3.88-2.07,7.76-3.82,11.64-5.46,1.94-.85,3.88-1.58,5.82-2.38s3.87-1.48,5.81-2.18a6.36,6.36,0,0,1,2.91.05,25.54,25.54,0,0,0,2.9.09l5.81,0,11.62,0,46.47.18,46.47.18,23.24.09,5.8,2.26c1.93.8,3.86,1.55,5.79,2.4,3.87,1.66,7.74,3.41,11.6,5.43-3.88,2-7.76,3.71-11.64,5.34-1.94.83-3.88,1.57-5.81,2.36L243.78,203l-23.24-.09-46.47-.18-46.47-.18-11.62,0-5.8,0a25.7,25.7,0,0,0-2.91.06,6.18,6.18,0,0,1-2.9,0c-1.94-.71-3.87-1.47-5.8-2.22s-3.87-1.55-5.8-2.42C88.9,196.26,85,194.48,81.17,192.37Z"/><path class="cls-1" d="M81.17,256.42c1.29-1.07,2.59-1.93,3.88-2.91s2.59-1.76,3.89-2.58,2.58-1.58,3.88-2.38,2.59-1.48,3.88-2.18a2.76,2.76,0,0,1,1.94,0,11.34,11.34,0,0,0,1.93.08l3.87,0,7.75,0,31,.11,31,.12,15.49.06,3.86,2.25c1.29.8,2.58,1.55,3.87,2.4q3.85,2.45,7.72,5.41-3.89,2.94-7.76,5.35c-1.3.85-2.59,1.59-3.89,2.38l-3.88,2.21-15.49-.06-31-.12-31-.11-7.74,0-3.88,0a11.33,11.33,0,0,0-1.93.07,2.87,2.87,0,0,1-1.94,0c-1.29-.71-2.57-1.47-3.86-2.22s-2.58-1.55-3.87-2.41-2.57-1.71-3.86-2.61S82.46,257.49,81.17,256.42Z"/><path class="cls-1" d="M320,190.53c2.07-10,4-19.94,5.59-29.95s3.09-20,4.25-30,2-20,2.33-29.83a195.22,195.22,0,0,0-.86-29c-.43-4.64-.62-9.21-1.42-13.5a37.29,37.29,0,0,0-4-11.3,14.79,14.79,0,0,0-6.41-6.31,13.66,13.66,0,0,0-2-.76l-.13,0-.21,0-.41-.12-.83-.21-1.71-.43c-2.31-.56-4.68-1.08-7.09-1.58-9.62-2-19.52-3.61-29.42-5.12s-19.87-2.83-29.85-4.05q-29.92-3.64-60-5.84c-20-1.44-40.11-2.38-60.09-2.49-10-.05-20,.12-29.84.61S78.12,22,68.56,23.39c-4.77.72-9.48,1.6-14,2.72a74.7,74.7,0,0,0-12.67,4.23c-3.8,1.67-7,3.9-8.37,5.77a21.31,21.31,0,0,0-2.4,4.47A57.1,57.1,0,0,0,29,46.68a130.58,130.58,0,0,0-3.09,13.75c-.83,4.75-1.5,9.6-2.08,14.49-1.14,9.78-1.9,19.71-2.46,29.69-1.09,20-1.41,40.07-1.37,60.21.14,40.28,1.7,80.67,4.07,121q1.82,30.24,4.36,60.39c.87,10.05,1.81,20.08,2.89,30.06.55,5,1,10,1.86,14.89.39,2.46.79,4.9,1.11,7.34s.53,4.87.76,7.22a.69.69,0,0,1,0,.2.14.14,0,0,1,0,.07c0,.06,0,.09,0,.14a.9.9,0,0,0,0,.29,2.12,2.12,0,0,0,.4.92,7.2,7.2,0,0,0,1.3,1.32A16.07,16.07,0,0,0,38.8,410a32,32,0,0,0,5.64,2.34A63.21,63.21,0,0,0,51,414.06c9.19,1.89,19.14,2.48,29.08,2.7s20-.22,30.12-.92,20.18-1.73,30.29-3c-9.67,3.2-19.5,5.95-29.44,8.44s-20,4.44-30.28,6a164,164,0,0,1-31.65,1.93,72.89,72.89,0,0,1-8.4-.89,49.33,49.33,0,0,1-8.83-2.24,29.08,29.08,0,0,1-9.39-5.37,22,22,0,0,1-4.25-5,19.48,19.48,0,0,1-1.57-3.17c-.2-.56-.43-1.12-.58-1.69l-.23-.85-.19-.73C15,406.59,14.47,404,14,401.43s-.68-5.15-.94-7.72c-.47-5.14-1.13-10.22-1.67-15.31Q9.8,363.13,8.51,347.91,5.89,317.46,4.11,287C1.71,246.36.14,205.68,0,164.87,0,144.46.28,124,1.4,103.49,2,93.23,2.76,82.94,4,72.58,4.58,67.41,5.3,62.21,6.21,57A151,151,0,0,1,9.8,41.07a78.25,78.25,0,0,1,2.88-8.25A40.13,40.13,0,0,1,17.6,24a33.79,33.79,0,0,1,7.83-7.32,52,52,0,0,1,8.18-4.56A92.93,92.93,0,0,1,49.73,6.71c5.32-1.33,10.59-2.3,15.84-3.1C76.06,2,86.46,1.18,96.82.65s20.67-.69,31-.64c20.57.11,41,1.08,61.43,2.55s40.72,3.46,61,5.93q15.22,1.86,30.42,4.13c10.14,1.54,20.25,3.2,30.49,5.31,2.56.52,5.13,1.09,7.75,1.72l2,.5,1,.26.5.14.58.16a32.88,32.88,0,0,1,14,8.14A37.92,37.92,0,0,1,343.21,37a59.57,59.57,0,0,1,6.28,17.2,78.7,78.7,0,0,1,2.14,16.67c0,2.74-.13,5.45-.34,8.14s-.48,5.34-.8,8c-.63,5.27-1.47,10.47-2.43,15.6-2,10.26-4.45,20.31-7.3,30.21A470.26,470.26,0,0,1,320,190.53Z"/><path class="cls-1" d="M238.48,382.75A25.91,25.91,0,0,1,241,380l5.22-5.25,10.44-10.5,41.75-42,41.74-42,20.46-20.59,0,0,22-22-21.91-21.86-21.52,21.59-.09,0-20.87,21-41.75,42-41.74,42L224.27,353l-5.22,5.25a26.93,26.93,0,0,1-2.69,2.54,6.54,6.54,0,0,0-2.65,2.59c-1,2.52-1.87,5.09-2.8,7.65s-1.79,5.18-2.59,7.87a165.74,165.74,0,0,0-4.38,16.51,165.1,165.1,0,0,0,16.48-4.49c2.69-.81,5.23-1.76,7.85-2.63s5.12-1.87,7.64-2.85A6.65,6.65,0,0,0,238.48,382.75Z"/></g></g></g></svg>
  <h2> Definition </h2>
  </div>
  <p>A 
    <strong> definition </strong>
    is a statement of the meaning of a term.
  </p>
</div>

should render to that

enter image description here

But I fail to implement it in my markdown structure. Either I can use pure css in the YAML header or I can use a entire .html file in the includes option as is often done for a general everywhere-message like this:

output: 
  bookdown::gitbook:
    includes:
      before_body: top_message.html
Solution

  • One possible way to do this is using a little bit of javascript to insert that svg element in every places where the classes .defbox and .titeldefbox are used.

    Now for example, if we wanted to use Definition boxes in our 01-intro.Rmd file, we can use pandoc divs in the following way,

    01-intro.Rmd

    # Hello bookdown 

All chapters start with a first-level heading followed by your chapter title, like the line above. There should be only one first-level heading (`#`) per .Rmd file.


:::: {.defbox}

::: {.titeldefbox}

<h2> Definition </h2>

:::

A **definition** is a statement of the meaning of a term.

::::



## More styled box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique nibh mauris, id ullamcorper massa convallis et. Aliquam pharetra rutrum bibendum. Quisque diam lorem, varius ac tincidunt vel, volutpat et est. 


:::: {.defbox}

::: {.titeldefbox}

<h2> More Definition </h2>

:::

Praesent iaculis sed metus sed imperdiet. Nunc vitae augue bibendum, pulvinar neque id, suscipit justo. Quisque convallis, erat vel consectetur mattis, ante est euismod mauris, at condimentum enim erat id lorem. Phasellus volutpat id sapien a sollicitudin. Maecenas nec hendrerit felis.

::::

    Now notice these divs doesn't contain that tiny little svg icon. We are going to insert those with js in a html file and include that html file with includes: after_body: yaml key in the _output.yml.

    _output.yml

    bookdown::gitbook:
  css: style.css
  includes:
    after_body: custom_def.html

    custome_def.html

    <div class="svg">
  <svg  class="svgdefbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 382.59 429.36"><defs><style>.cls-1{fill:#ffffff;}</style></defs><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_6" data-name="Ebene 6"><g id="definition"><path class="cls-1" d="M81.17,128.33c3.88-2.38,7.76-4.4,11.64-6.29,1.94-1,3.88-1.82,5.82-2.74s3.88-1.7,5.82-2.5a5.39,5.39,0,0,1,2.9,0,23.59,23.59,0,0,0,2.91.1l5.81,0,11.61,0,46.48.18,46.47.18,23.23.09,5.8,2.59c1.93.92,3.87,1.78,5.8,2.77,3.86,1.9,7.73,3.91,11.59,6.23-3.88,2.29-7.76,4.27-11.64,6.14-1.94,1-3.88,1.82-5.82,2.72l-5.82,2.55-23.23-.09-46.47-.18L127.6,140,116,140l-5.81,0a21.76,21.76,0,0,0-2.91.07,5.39,5.39,0,0,1-2.9,0c-1.93-.82-3.87-1.69-5.8-2.55s-3.86-1.79-5.8-2.78C88.9,132.8,85,130.75,81.17,128.33Z"/><path class="cls-1" d="M81.17,192.37c3.88-2.07,7.76-3.82,11.64-5.46,1.94-.85,3.88-1.58,5.82-2.38s3.87-1.48,5.81-2.18a6.36,6.36,0,0,1,2.91.05,25.54,25.54,0,0,0,2.9.09l5.81,0,11.62,0,46.47.18,46.47.18,23.24.09,5.8,2.26c1.93.8,3.86,1.55,5.79,2.4,3.87,1.66,7.74,3.41,11.6,5.43-3.88,2-7.76,3.71-11.64,5.34-1.94.83-3.88,1.57-5.81,2.36L243.78,203l-23.24-.09-46.47-.18-46.47-.18-11.62,0-5.8,0a25.7,25.7,0,0,0-2.91.06,6.18,6.18,0,0,1-2.9,0c-1.94-.71-3.87-1.47-5.8-2.22s-3.87-1.55-5.8-2.42C88.9,196.26,85,194.48,81.17,192.37Z"/><path class="cls-1" d="M81.17,256.42c1.29-1.07,2.59-1.93,3.88-2.91s2.59-1.76,3.89-2.58,2.58-1.58,3.88-2.38,2.59-1.48,3.88-2.18a2.76,2.76,0,0,1,1.94,0,11.34,11.34,0,0,0,1.93.08l3.87,0,7.75,0,31,.11,31,.12,15.49.06,3.86,2.25c1.29.8,2.58,1.55,3.87,2.4q3.85,2.45,7.72,5.41-3.89,2.94-7.76,5.35c-1.3.85-2.59,1.59-3.89,2.38l-3.88,2.21-15.49-.06-31-.12-31-.11-7.74,0-3.88,0a11.33,11.33,0,0,0-1.93.07,2.87,2.87,0,0,1-1.94,0c-1.29-.71-2.57-1.47-3.86-2.22s-2.58-1.55-3.87-2.41-2.57-1.71-3.86-2.61S82.46,257.49,81.17,256.42Z"/><path class="cls-1" d="M320,190.53c2.07-10,4-19.94,5.59-29.95s3.09-20,4.25-30,2-20,2.33-29.83a195.22,195.22,0,0,0-.86-29c-.43-4.64-.62-9.21-1.42-13.5a37.29,37.29,0,0,0-4-11.3,14.79,14.79,0,0,0-6.41-6.31,13.66,13.66,0,0,0-2-.76l-.13,0-.21,0-.41-.12-.83-.21-1.71-.43c-2.31-.56-4.68-1.08-7.09-1.58-9.62-2-19.52-3.61-29.42-5.12s-19.87-2.83-29.85-4.05q-29.92-3.64-60-5.84c-20-1.44-40.11-2.38-60.09-2.49-10-.05-20,.12-29.84.61S78.12,22,68.56,23.39c-4.77.72-9.48,1.6-14,2.72a74.7,74.7,0,0,0-12.67,4.23c-3.8,1.67-7,3.9-8.37,5.77a21.31,21.31,0,0,0-2.4,4.47A57.1,57.1,0,0,0,29,46.68a130.58,130.58,0,0,0-3.09,13.75c-.83,4.75-1.5,9.6-2.08,14.49-1.14,9.78-1.9,19.71-2.46,29.69-1.09,20-1.41,40.07-1.37,60.21.14,40.28,1.7,80.67,4.07,121q1.82,30.24,4.36,60.39c.87,10.05,1.81,20.08,2.89,30.06.55,5,1,10,1.86,14.89.39,2.46.79,4.9,1.11,7.34s.53,4.87.76,7.22a.69.69,0,0,1,0,.2.14.14,0,0,1,0,.07c0,.06,0,.09,0,.14a.9.9,0,0,0,0,.29,2.12,2.12,0,0,0,.4.92,7.2,7.2,0,0,0,1.3,1.32A16.07,16.07,0,0,0,38.8,410a32,32,0,0,0,5.64,2.34A63.21,63.21,0,0,0,51,414.06c9.19,1.89,19.14,2.48,29.08,2.7s20-.22,30.12-.92,20.18-1.73,30.29-3c-9.67,3.2-19.5,5.95-29.44,8.44s-20,4.44-30.28,6a164,164,0,0,1-31.65,1.93,72.89,72.89,0,0,1-8.4-.89,49.33,49.33,0,0,1-8.83-2.24,29.08,29.08,0,0,1-9.39-5.37,22,22,0,0,1-4.25-5,19.48,19.48,0,0,1-1.57-3.17c-.2-.56-.43-1.12-.58-1.69l-.23-.85-.19-.73C15,406.59,14.47,404,14,401.43s-.68-5.15-.94-7.72c-.47-5.14-1.13-10.22-1.67-15.31Q9.8,363.13,8.51,347.91,5.89,317.46,4.11,287C1.71,246.36.14,205.68,0,164.87,0,144.46.28,124,1.4,103.49,2,93.23,2.76,82.94,4,72.58,4.58,67.41,5.3,62.21,6.21,57A151,151,0,0,1,9.8,41.07a78.25,78.25,0,0,1,2.88-8.25A40.13,40.13,0,0,1,17.6,24a33.79,33.79,0,0,1,7.83-7.32,52,52,0,0,1,8.18-4.56A92.93,92.93,0,0,1,49.73,6.71c5.32-1.33,10.59-2.3,15.84-3.1C76.06,2,86.46,1.18,96.82.65s20.67-.69,31-.64c20.57.11,41,1.08,61.43,2.55s40.72,3.46,61,5.93q15.22,1.86,30.42,4.13c10.14,1.54,20.25,3.2,30.49,5.31,2.56.52,5.13,1.09,7.75,1.72l2,.5,1,.26.5.14.58.16a32.88,32.88,0,0,1,14,8.14A37.92,37.92,0,0,1,343.21,37a59.57,59.57,0,0,1,6.28,17.2,78.7,78.7,0,0,1,2.14,16.67c0,2.74-.13,5.45-.34,8.14s-.48,5.34-.8,8c-.63,5.27-1.47,10.47-2.43,15.6-2,10.26-4.45,20.31-7.3,30.21A470.26,470.26,0,0,1,320,190.53Z"/><path class="cls-1" d="M238.48,382.75A25.91,25.91,0,0,1,241,380l5.22-5.25,10.44-10.5,41.75-42,41.74-42,20.46-20.59,0,0,22-22-21.91-21.86-21.52,21.59-.09,0-20.87,21-41.75,42-41.74,42L224.27,353l-5.22,5.25a26.93,26.93,0,0,1-2.69,2.54,6.54,6.54,0,0,0-2.65,2.59c-1,2.52-1.87,5.09-2.8,7.65s-1.79,5.18-2.59,7.87a165.74,165.74,0,0,0-4.38,16.51,165.1,165.1,0,0,0,16.48-4.49c2.69-.81,5.23-1.76,7.85-2.63s5.12-1.87,7.64-2.85A6.65,6.65,0,0,0,238.48,382.75Z"/></g></g></g></svg>
  
</div>


<script>

function add_svg () {
  svg = document.querySelector(".svg svg")
  svg_in = document.querySelectorAll(".defbox .titeldefbox")
  
  for (i = 0; i < svg_in.length; i++) {
    svg_clone = svg.cloneNode(true)
    svg_in[i].insertBefore(svg_clone, svg_in[i].firstElementChild)
  }
}

window.onload = add_svg();

</script>

    And then add these following css rules in the style.css

    style.css

    .titeldefbox {
display: flex;
width: 100%;
left: 0;
top: 0;
position: absolute;
background-color: darkslategray;
height: 50px;
color: white;
border-radius: 10px 10px 0 0;
padding: 10px 0 10px 0;
}

.defbox {
  background-position: 0px;
background: linear-gradient(
  315deg,
  hsl(240deg 50% 95%) 0%,
  hsl(158deg 13% 64%) 100%
);
  padding: 1em 1em 1em 1em;
  border-radius: 10px;
  position: relative;
}

.svgdefbox {
  width: auto;
  height: 25px;
  padding-left: 1em;
}

.defbox h2{
font-size: 16px !important;
margin-top: 0px !important;
width: 100% !important;
height: 20px !important;
padding: 0 0 10px 15px !important;
}

.defbox p{
  margin-top: 40px !important;
  padding: 10px 10px 0 0 !important;
}

    styled boxes in bookdown