callout box with publii + markdown
- This topic has 17 replies, 3 voices, and was last updated 3 years, 7 months ago by .
-
AuthorPosts
-
April 2, 2020 at 12:24 am #2287
[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>
April 2, 2020 at 4:45 am #2289Bob
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!April 2, 2020 at 7:51 pm #2291[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 !
April 9, 2020 at 2:36 pm #2366Tomasz 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!April 9, 2020 at 2:43 pm #2367[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 !
April 9, 2020 at 2:46 pm #2368Tomasz Dziuda
I have just put the HTML inside the editor – it is even highlighted:
--
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!April 9, 2020 at 2:50 pm #2371[anonymous]
Well I’m doing exactly the same, it does highlight it correctly, but it does not render the callout box 🙁
April 9, 2020 at 3:12 pm #2380Tomasz 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!April 9, 2020 at 3:18 pm #2381[anonymous]
full post content
April 9, 2020 at 3:29 pm #2382[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.
April 9, 2020 at 4:41 pm #2386Tomasz 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!April 9, 2020 at 4:47 pm #2387[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 ?
April 9, 2020 at 6:39 pm #2388Tomasz 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!April 9, 2020 at 6:51 pm #2389[anonymous]
Ok, I’ll investigate, thanks for the help.
April 9, 2020 at 10:19 pm #2396[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 !
April 9, 2020 at 10:26 pm #2397[anonymous]
However, it does remove any markdown formatting that is within the callout box 🙁 I’ll keep investigate
April 9, 2020 at 10:35 pm #2398[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
April 11, 2020 at 10:59 am #2409Tomasz 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! -
AuthorPosts
- You must be logged in to reply to this topic.