Wyam: Bootstrap Fun

Published on Monday, January 9, 2017

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:

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:

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