[[anonymous]]

I tried to insert a callout box by inserting directly html code in my publii markdown text however, my chance did not work. Is it possible to insert a callout box ?

Here is what I tried :

<p class ="callout warning">my paragraph</p>

 

[Bob]

Markdown is markdown, to use HTML into your post use WYSIWYG or the Block editor.

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[[anonymous]]

Insane question : can we mix them somehow ? (or in the future ?)

I’m using a markdown editor before importing in publii for publication. My editor support callout boxes, even if it’s not a standard. It’s really useful on a long post. Is there a way to “convert” my text in the publii editor from markdown to html to add those callout boxes ? Thanks for your help !

[Tomasz Dziuda]

Hi noapmtl,

I have checked your case and you are able to put HTML inside markdown – it is just possible without any special syntax.

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[[anonymous]]

Hi Tomasz,

Thanks for checking it, I appreciate it. Maybe it’s a bug of the prerelease version then ? Could you precise what you meant by “without any special syntax” ?

Thanks !

[Tomasz Dziuda]

I have just put the HTML inside the editor – it is even highlighted:

https://imgur.com/a/QL7eZhu

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[[anonymous]]

Well I’m doing exactly the same, it does highlight it correctly, but it does not render the callout box 🙁

[Tomasz Dziuda]

Are you looking on the full post content or on the excerpt?

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[[anonymous]]

full post content

[[anonymous]]

It’s strange, I just checked the source code of the full post, the html code is correct. Tried with safari and firefox, does not render the call out box both of them.

[Tomasz Dziuda]

So if the HTML is correct then your problem is not with Publii but with some external CSS/JS.

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[[anonymous]]

I had a katex extension that I just removed for the sake of the experience. The result is the same, HTML is correct, but the rendering is incorrect. It’s a fresh installation, no other extensions, with the Simple V2.2.0.0 theme. Do you think the problem is not related to Publii ?

[Tomasz Dziuda]

If the HTML is correct then the problem with display must be on your side. Editor and Publii can affect only output HTML.

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[[anonymous]]

Ok, I’ll investigate, thanks for the help.

[[anonymous]]

Ok, so here are the results. As a noob, I thought callout box were standards. It appears that it is not. I checked in the CSS of the Simple theme V2.2.0.0, I did not find something that refers to callout box or alert. So if anyone wants to achieve callout box, here is a solution :

In Publii>Tools>Custom CSS, you add the following code, courtesy of Bootstrap :

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
.alert-heading {
  color: inherit;
}
.alert-link {
  font-weight: 700;
}
.alert-dismissible {
  padding-right: 4rem;
}
.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}
.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}
.alert-primary hr {
  border-top-color: #9fcdff;
}
.alert-primary .alert-link {
  color: #002752;
}
.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}
.alert-secondary hr {
  border-top-color: #c8cbcf;
}
.alert-secondary .alert-link {
  color: #202326;
}
.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
.alert-success hr {
  border-top-color: #b1dfbb;
}
.alert-success .alert-link {
  color: #0b2e13;
}
.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}
.alert-info hr {
  border-top-color: #abdde5;
}
.alert-info .alert-link {
  color: #062c33;
}
.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}
.alert-warning hr {
  border-top-color: #ffe8a1;
}
.alert-warning .alert-link {
  color: #533f03;
}
.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.alert-danger hr {
  border-top-color: #f1b0b7;
}
.alert-danger .alert-link {
  color: #491217;
}
.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}
.alert-light hr {
  border-top-color: #ececf6;
}
.alert-light .alert-link {
  color: #686868;
}
.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}
.alert-dark hr {
  border-top-color: #b9bbbe;
}
.alert-dark .alert-link {
  color: #040505;
}

Now, if you want to insert a callout box, from the editor, you wrap your paragraph in a html tag, for example <p></p> with the desired callout box as a class. For example, if I want a blue-ish callout box arround my paragraph, I add in the editor :

<p class="alert alert-primary">
  My paragraph
</p>

and it works \o/.

 

If you want some other kind of callout box, here is the bootstrap callout box related documentation :

https://getbootstrap.com/docs/4.4/components/alerts/

Enjoy !

[[anonymous]]

However, it does remove any markdown formatting that is within the callout box 🙁 I’ll keep investigate

[[anonymous]]

u/Thomasz, do you know if there is a place where I can see how the markdown to html “translation” works behind the scene ? Thanks

[Tomasz Dziuda]

@noapmtl – I suppose that inside HTML you have to use HTML and Markdown syntax is not parsed inside HTML tags as it could lead to a parsing issues 🙂

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[Author]

Posts