asciidoctor-html5s

asciidoctor-html5s copied to clipboard

I'm learning AsciiDoc and Asciidoctor and I'm in the midst of styling my admonitions. I want to use text rather than an image or icon for each admonition title-label. asciidoctor-html5s automatically puts a colon after the admonition text, e.g.:

NOTE:
a little note

What is a good way to remove the colon (:) after NOTE (and CAUTION, IMPORTANT, TIP, WARNING) if I do not want to recompile this extension? I do not know Ruby and do not have my system set up for Ruby development. Possible solutions might involve:

• doing something in my CSS to remove the trailing colon
• editing some file or files on my system that asciidoctor-html5s will pick up when it is run (but I'd rather not have to maintain any such edit on all my devices)

It seems that the colon happens because of line 3 in asciidoctor-html5s/data/templates/admonition.html.slim:

- capture
  h6.block-title class=('label-only' unless title?)
    span.title-label ="#{local_attr :textlabel}: "
    =title
  = html_tag_if !blocks?, :p
    =content
- if admonition_aside?
  aside.admonition-block id=id class=[(attr :name), role] role=admonition_aria
    - yield_capture
- else
  section.admonition-block id=id class=[(attr :name), role] role=admonition_aria
    - yield_capture

Thank you for any tips or suggestions!

I want to use text rather than an image or icon for each admonition title-label.

Then just hide the title-label using CSS. That’s how it’s supposed to be styled. The title-label is in the template only to provide an understandable output when you don’t have custom CSS.

For example I design admonition block like this:

.block-title .title-label {
  display: none;
}

.admonition-block {
  border-left: solid thick;
  margin: 1em 0 2em 0;
  padding: 0.5em 1em;
  padding-left: 5em;
  background-color: var(--light-bg-color);
  background-size: 3em 3em;
  background-repeat: no-repeat;
  background-position: 1em 50%;
  min-height: 5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  clear: both;

  & > * {
    margin: 0.5em 0;
  }

  &.noclear {
    clear: none;
  }

  &.note {
    border-color: var(--main-color);
    background-image: url('./images/icons/note-large.svg');
  }
}

Thanks for posting your admonition CSS @jirutka. I'm doing a lot experiments with my Asciidoc stylesheets and I wonder if you could include your entire asciidoctor-html5s CSS or SCSS files in a repository, maybe this repository? I (and probably others) could then use that as a starting point for my own asciidoctor-html5s.css file. Thank you!

The problem is that I still don’t have a complete stylesheet, only some parts that I needed. :( In one project it’s very close to completeness, we have to just find some spare time to separate them and publish.