Sign in

callout box with publii + markdown

  • This topic has 17 replies, 3 voices, and was last updated 1 year, 3 months ago by .
Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #2287
    noapmtl

    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>

     

    #2289
    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!

    #2291
    noapmtl

    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 !

    #2366
    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!

    #2367
    noapmtl

    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 !

    #2368
    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!

    #2371
    noapmtl

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

    #2380
    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!

    #2381
    noapmtl

    full post content

    #2382
    noapmtl

    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.

    #2386
    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!

    #2387
    noapmtl

    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 ?

    #2388
    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!

    #2389
    noapmtl

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

    #2396
    noapmtl

    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 !

    #2397
    noapmtl

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

    #2398
    noapmtl

    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

    #2409
    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!

Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.