Skip to Content

Wyam: Bootstrap Fun

After reading this great post by wekempf it made me think about block qoutes and how it can help me deliver a better block qoute experience. wekempf also posted an awesome cheatsheet for Markdig, the markdown engine for Wyam, here. Markdig provides a lot of additional functionaly that is just nice to have, I am grateful someone documented it in an easy to understand format. So I decided to have a little fun with block qoutes and a few other random bits.

Standard Block Qoutes

In markdown using the following:

Code:

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
>
> &mdash; <cite>Source Title<cite>

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

— Source Title

Other options

Bootstrap has lots of fun classes and with the ability to place a div and style it anyway that you want you can do the following to spruce it up.

Well:

:::{.well}
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
>
> &mdash; <cite>Source Title<cite>
:::

Well Result:

:::{.well}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

— Source Title :::

And don't worry, we can get extremely crazy.

Panel:

:::{.panel .panel-primary}
:::{.panel-body}
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
> 
> &mdash; <cite>Source Title<cite>
:::
:::

Panel Result:

:::{.panel .panel-primary} :::{.panel-body}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

— Source Title ::: :::

This just sparked my interest and thought I would see how far I could take it. Hope someone finds this useful.

Thanks,

Jamie

If you enjoy the content then consider buying me a coffee.