New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Markdown Fieldtype Preview Rendering #554

pmeissner opened this Issue Mar 21, 2016 · 2 comments


None yet
4 participants

pmeissner commented Mar 21, 2016

Steps to reproduce

  1. Insert a header (### Header Lorim Ipsum) or a table into a markdown fieldtype
  2. Press preview

Expected behaviour

  • The headers should have hierarchal size and weight to them.
  • The tables should render as tables.

Actual behaviour

  • The headers look like body copy.
  • Tables don't render at all.

Server configuration

  • Mac OS 10.11.3
  • PHP 5.6.10
  • Statamic Beta 20

One other thought. A possible toggle in the markdown fieldtype configuration page could be — monospace typeface. Markdown tables look wacky without a monospace font. Edge case — and probably not worth it but just throwing it out there.


This comment has been minimized.

rrelmy commented Jan 18, 2017

We use this style inside an addon css file to format the markdown preview.

.markdown-fieldtype .markdown-preview {
    font: 1em/1.5em sans-serif;
    color: #2B2B2B;

.markdown-fieldtype .markdown-preview blockquote {
    margin: 0 1.5em 1.5em 0;

.markdown-fieldtype .markdown-preview a {
    text-decoration: underline;
    color: #1E5BA2;

.markdown-fieldtype .markdown-preview p {
    margin: 0 0 1.5em 0;

.markdown-fieldtype .markdown-preview li ul,
.markdown-fieldtype .markdown-preview li ol {
    margin: 0 1.5em;

.markdown-fieldtype .markdown-preview ul,
.markdown-fieldtype .markdown-preview ol {
    margin: 0 1.5em 1.5em 0;

.markdown-fieldtype .markdown-preview ul {
    list-style-type: disc;

.markdown-fieldtype .markdown-preview ol {
    list-style-type: decimal;

.markdown-fieldtype .markdown-preview ol ol {
    list-style: upper-alpha;

.markdown-fieldtype .markdown-preview ol ol ol {
    list-style: lower-roman;

.markdown-fieldtype .markdown-preview ol ol ol ol {
    list-style: lower-alpha;

.markdown-fieldtype .markdown-preview h1,
.markdown-fieldtype .markdown-preview h2,
.markdown-fieldtype .markdown-preview h3,
.markdown-fieldtype .markdown-preview h4,
.markdown-fieldtype .markdown-preview h5,
.markdown-fieldtype .markdown-preview h6,
.markdown-fieldtype .markdown-preview strong {
    font-weight: bold;

.markdown-fieldtype .markdown-preview h1 {
    font-size: xx-large;
.markdown-fieldtype .markdown-preview h2 {
    font-size: x-large;
.markdown-fieldtype .markdown-preview h3 {
    font-size: large;
.markdown-fieldtype .markdown-preview h4,
.markdown-fieldtype .markdown-preview h5,
.markdown-fieldtype .markdown-preview h6 {
    font-size: medium;

.markdown-fieldtype .markdown-preview li {
    color: #333;
    line-height: 1;
    margin-bottom: .25em

.markdown-fieldtype .markdown-preview blockquote p:last-child {
    margin-bottom: 0

.markdown-fieldtype .markdown-preview hr {
    margin: 1em 0 1.5em!important

.markdown-fieldtype .markdown-preview img {
    max-width: 100%

This comment has been minimized.


jackmcdade commented Jan 18, 2017

Thanks for that @rrelmy, will be in 2.5.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment