How to customize style of a blockquote?

[JeremieLitzler]

Hi,

Can we do the following:

> Important {.warning}
>
> A warning message....

to render like this:

Thanks for your help.

[JeremieLitzler]

Hey,
I have found out that using a shortcode for simple usage can work... but not for multlines or rich content.

To make it complete, I need to render:

> Important {.warning}
>
> A warning message....
> 
> ... With more than one line ...

and

> Important {.warning}
>
> A warning message....
> 
> ... with an image ...
> ![My image](/images/warning.jpg)
> 
> ... or with a link ...
> [A link](https://github.com)

[JeremieLitzler]

To achieve multiline, I only see this in the markdown...

{{< blockcontainer "warning warning--title" "A warning message!" >}}
{{< blockcontainer "warning warning--content" "Content of warning..." >}}

When the shortcode is

<blockquote class="{{ .Get 0 }}">
    {{ .Get 1 }}
  </blockquote>

And you have custom CSS on the classes to make it appear as a single "container" but it isn't.

I could also add N arguments where N+1 and so on are the content. But it won't solve my image and link usecase.

[Lovirr]

I used to do a similar style like this, you can imitate it and add your own codes to make it fit your requirements

Add the following code in data/SVG.toml：

notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 576 512" fill="hsl(0, 65%, 65%)"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6.0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6.0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"/></svg>'
notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(30, 80%, 70%)"><path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/></svg>'
notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(200, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>'
notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(140, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/></svg>'

add file: layouts/shortcodes/notice.html, and add the following code:

{{- $noticeType := .Get 0 -}}
{{- $raw := (markdownify .Inner | chomp) -}}
{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}
{{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon notice-icon") }}
<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
    <div class="notice-title">{{ $icon | safeHTML }}</div>
    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
</div>

Add the following code in assets/scss/shortcodes.scss:

.notice {
    position: relative;
    padding: 1em 1em 2em 2.5em;
    margin-bottom: 1em;
    border-radius: 4px;
  
    p:last-child {
      margin-bottom: 0;
    }

    p{
      margin-left: 20px;
    }
  
    .notice-title {
      position: absolute;
      left: 16px;
      margin-top: 17px;
      font-size: 1.2em;
  
      .notice-icon {
        width: 1.2em;
        height: 1.2em;
      }
    }
  
    &.notice-warning {
      background: hsla(0, 65%, 65%, 0.15);
      border-left: 5px solid hsl(0, 65%, 65%);
    }
  
    &.notice-info {
      background: hsla(30, 80%, 70%, 0.15);
      border-left: 5px solid hsl(30, 80%, 70%);
    }
  
    &.notice-note {
      background: hsla(200, 65%, 65%, 0.15);
      border-left: 5px solid hsl(200, 65%, 65%);
    }
  
    &.notice-tip {
      background: hsla(140, 65%, 65%, 0.15);
      border-left: 5px solid hsl(140, 65%, 65%);
    }
  }

[data-theme="dark"] .notice {
  &.notice-warning {
    background: hsla(0, 25%, 35%, 0.15);
    border-left: 5px solid hsl(0, 25%, 35%);

    .notice-title {
      color: hsl(0, 25%, 35%);
    }
  }

  &.notice-info {
    background: hsla(30, 25%, 35%, 0.15);
    border-left: 5px solid hsl(30, 25%, 35%);

    .notice-title {
      color: hsl(30, 25%, 35%);
    }
  }

  &.notice-note {
    background: hsla(200, 25%, 35%, 0.15);
    border-left: 5px solid hsl(200, 25%, 35%);

    .notice-title {
      color: hsl(200, 25%, 35%);
    }
  }

  &.notice-tip {
    background: hsla(140, 25%, 35%, 0.15);
    border-left: 5px solid hsl(140, 25%, 35%);

    .notice-title {
      color: hsl(140, 25%, 35%);
    }
  }
}

at last,to use these custom styles in markdown:

{{< notice notice-warning >}}
text
<img src="...">
{{< /notice >}}

• you can replace the 'warning' with 'tip', 'note', or 'info'.

• if you don't like the icon, you can go to tabler icons to look for the icon you like.

• and there are other similar custom styles in my post, if you are able to read chinese articles.

[JeremieLitzler]

Hi @Lovirr

That's awesome !

The only issue I see is the images: I have a 404 when I use the shortcode like this:

{{< blockcontainer notice-warning "A warning message!">}}

Blah blah blah.

![Alt text](images/myimage.jpg)
{{< /blockcontainer >}}

I have tried to put the image in the static/images and the subfolder images with my posts, but I think, the shortcode render as absolute the URL.

How can we dynamically generate the images url to be /p/my-post/images/myimage.jpg in a shortcode?

Maybe, it has to do with

{{- $raw := (markdownify .Inner | chomp) -}}
{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}

Can you explain those lines please?

thanks for the additional help :)

[CaiJimmy]

Try replacing:

- {{- $raw := (markdownify .Inner | chomp) -}}
+ {{- $raw := (.Page.RenderString .Inner | chomp) -}}

[JeremieLitzler]

That's it! Thanks @CaiJimmy

[JeremieLitzler]

@Lovirr @CaiJimmy

I'd love to understand those lines 👍
`

<!-- line 1 -->
{{- $raw := (markdownify .Inner | chomp) -}}

<!-- line 2 -->
{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}

<!-- line 3 -->
{{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}

Would you have a minute per line to describe what it does?

Thanks a million.

[Lovirr]

I got the style of the blockquote from this repositories and custom it. but actually, i don't know much about these codes, maybe you can turn to the author for help