A beginner: How to render callouts?

[Curovearth]

Hi there,

To be honest, I am not very well versed with ruby gem. I managed to play with Just the docs but the only part where I am stuck at the current stage is callout not being rendered.
As I was going searching through the discussions and issues,

• I updated my _config.yml with remote_theme: just-the-docs/just-the-docs@v0.4.0.rc3
  part of _config.yml is

callouts_level: quiet # or loud
callouts:
  highlight:
    color: yellow
  important:
    title: Important
    color: blue
  new:
    title: New
    color: green
  note:
    title: Note
    color: purple
  warning:
    title: Warning
    color: red

• To add, I am using github pages for my project.

Could you please help me out, please?

[mattxwang]

Hey @Curovearth, can you send us a link to your repository and/or the code you're using to actually render the callout?

[Curovearth]

Hey @mattxwang . Thanks for replying me back.
Here you go: https://github.com/BioInsperobotics/BIPR

[pdmosses]

@Curovearth Thanks for posting the link to your repo.

I updated my _config.yml with remote_theme: just-the-docs/just-the-docs@v0.4.0.rc3

Your Gemfile includes:

gem "just-the-docs", "0.4.0.rc3"
# gem "just-the-docs", github: "pdmosses/just-the-docs", branch: "callouts"
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
# uncomment the line below. To upgrade, run `bundle update github-pages`.
# gem "github-pages", group: :jekyll_plugins
# If you have any plugins, put them here!

jekyll-remote-theme is a plugin, included by the github-pages gem. If you uncomment the penultimate line above, the theme layout should appear after rebuilding your site locally.

But there's another issue, which is the reason the callouts still don't appear correctly. Your home page includes:

# BIPR aka BioInspired Perception and Robotics

---
{: .warning } 
> This website is under active construction. 

{: .note } This website is under active construction. 

The kramdown docs for Block Boundaries states:

Some block-level elements have to start and/or end on so called block boundaries, as stated in their documentation. There are two cases where block boundaries come into play:

• If a block-level element has to start on a block boundary, it has to be preceded by either a blank line, an EOB marker, a block IAL or it has to be the first element.

• If a block-level element has to end on a block boundary, it has to be followed by either a blank line, an EOB marker, a block IAL or it has to be the last element.

If you insert a blank line before {: .warning } :

---

{: .warning } 
> This website is under active construction. 

that callout should render as intended. (The theme docs for Callouts should be updated to warn about the need for blank lines before the Block IAL.)

And if you replace {: .note } This ... by:

{: .note }
This ...

that one should work too.

A local screenshot:

[Curovearth]

Thankyou so much for the help!