How do I format poetry discussion redux

Share & showcase
2

One more variation:

Use standard markdown for most text but place the body of the poem in a code block. The following CSS will format the code block as normal text except that it will leave whitespace as entered (e.g. preformatted).

  • The two different selectors for reading mode affect different formatting commands, which I’ve broken out into two blocks.
  • Font-size is needed to prevent text from shrinking.
  • The font-size tag works in both selectors. Relative font sizes (em) stack their effect, while fixed sizes (px) do not.
  • The code block markers add vertical space in editing mode. This happens with normal formatting as well, but it is less noticeable because of the block background.
/* Editing mode */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
    font-family: Optima;  /* Set to any desired font stack */
    font-size: 1em;
    text-align: left;
    background: none;
}

/* Reading mode */
.markdown-rendered pre code {
    font-family: Optima;
    font-size: 1em; /* Relative sizes stack across both selectors. */
	color: black;  /* Will inherit body text color if not set */
}

.markdown-rendered pre {
    font-size: 1em;
    text-align: left;
    background: none;
}
1 Like