Blocks types with image (important, warning, ...)

Question

I would like to have blocks with a image on the left. I start using the package in RStudio, but even if I use the type tag it does not work.

I think the style that comes with the package does not provide this feature. Is that right?

Answer 1

try to copy the custom blocks

you can use google chrome to open the page press Ctrl+Shift+I

choose source and navigate to the style.css

you can also download the same pictures here easily

Style.css

.rmdcaution, .rmdimportant, .rmdnote, .rmdtip, .rmdwarning {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  background: #f5f5f5 5px center/3em no-repeat;
}
.rmdcaution {
  background-image: url("../images/caution.png");
}
.rmdimportant {
  background-image: url("../images/important.png");
}
.rmdnote {
  background-image: url("../images/note.png");
}
.rmdtip {
  background-image: url("../images/tip.png");
}
.rmdwarning {
  background-image: url("../images/warning.png");
}
p.caption {
  color: #777;
  margin-top: 10px;
}
p code {
  white-space: inherit;
}
pre {
  word-break: normal;
  word-wrap: normal;
}
pre code {
  white-space: inherit;
}
p.flushright {
  text-align: right;
}
blockquote > p:last-child {
  text-align: right;
}
blockquote > p:first-child {
  text-align: inherit;
}
.header-section-number {
  padding-right: .2em;
  font-weight: 500;
}
.level1 .header-section-number {
  display: inline-block;
  border-bottom: 3px solid;
}
.level1 h1 {
  border-bottom: 1px solid;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}
h1.title {
  font-weight: 700;
}
.book .book-body .page-wrapper .page-inner section.normal strong {
  font-weight: 500;
}