Monday, June 3, 2019

CSS for Markdown captions


My caption goes here
This tip told me how to create a caption in Markdown. If you follow an image by a line with emphasis.

For example
![Alt Text](https://image url)
*The caption goes here*
and then add this to the stylesheet, you'll get a nice caption.
/* for image caption */
img + br + em {
    font-style: normal;
    display: inherit;
    text-align: center;
    font-size: 90%;
}

Fixing images with a Markdown here hack

When I use Markdown Here to render a markdown into a blog post this change to the image size makes it fill the container in which it’s placed.
/*
 * NOTE:
 * - The use of browser-specific styles (-moz-, -webkit-) should be avoided.
 *   If used, they may not render correctly for people reading the email in
 *   a different browser than the one from which the email was sent.
 * - The use of state-dependent styles (like a:hover) don't work because they
 *   don't match at the time the styles are made explicit. (In email, styles
 *   must be explicitly applied to all elements -- stylesheets get stripped.)
 */

/* This is the overall wrapper, it should be treated as the `body` section. */
.markdown-here-wrapper {
}

/** Added this so that images are automatically full width  **/
img{
width: 100%;
}