Markdown Style Modules (markdown)

Page Style Module (page)

Defines the style for the page container for Markdown content. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.markdown {
  line-height: 1.6;

  // remove padding at the beginning of page
  > :first-child {
    margin-top: 0;
  }
}

This applies to all of the Markdown content on a page. It sets the line height to 1.6 to ensure the site is readable and removes the top margin from the first element in the page.

You can overwrite this definition for your own site or theme by creating the file styles/markdown/_page.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Headings Style Module (headings)

Defines styles for headings in Markdown content. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.markdown {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: normal;
    line-height: 1;
    margin-top: 1.5em;
    margin-bottom: $padding-large;

    a.anchor {
      opacity: 0;
      font-size: 0.75em;
      vertical-align: middle;
      text-decoration: none;
    }

    &:hover a.anchor,
    a.anchor:focus {
      opacity: initial;
    }
  }

  h4,
  h5,
  h6 {
    font-weight: bolder;
  }

  h5 {
    font-size: 0.875em;
  }

  h6 {
    font-size: 0.75em;
  }
}

Headings Defaults #

font-weight: normal;
line-height: 1;
margin-top: 1.5em;
margin-bottom: $padding-large;

a.anchor {
  opacity: 0;
  font-size: 0.75em;
  vertical-align: middle;
  text-decoration: none;
}

&:hover a.anchor,
a.anchor:focus {
  opacity: initial;
}

Smaller Headings #

h4,
h5,
h6 {
  font-weight: bolder;
}

h5 {
  font-size: 0.875em;
}

h6 {
  font-size: 0.75em;
}

Overwriting #

You can overwrite this definition for your own site or theme by creating the file styles/markdown/_headings.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Links Style Module (links)

Defines the styles for links in Markdown content. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.markdown {
  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
    &:visited {
      color: var(--color-visited-link);
    }
  }
}

This applies to any links in Markdown content. It removes the default text decoration for links, adds an underline when a site visitor hovers on a link, and sets the color for visited links based on the theme mode.

You can overwrite this definition for your own site or theme by creating the file styles/markdown/_links.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Bold Style Module (bold)

Defines the bolding behavior styles for Markdown content. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.markdown {
  b,
  optgroup,
  strong {
    font-weight: bolder;
  }
}

This applies to strongly emphasized content as well as content in a b tag or optgroup, setting the font weight for those elements to one step bolder than the text around them.

You can overwrite this definition for your own site or theme by creating the file styles/markdown/_bold.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Paragraphs Style Module (paragraphs)

Defines the style for paragraphs in Markdown content. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.markdown {
  p {
    word-wrap:break-word;
  }
}

This applies to p elements in the Markdown content, ensuring they wrap on word breaks and not in the middle of a word.

You can overwrite this definition for your own site or theme by creating the file styles/markdown/_paragraphs.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Images Style Module (images)

Defines the style for images in Markdown content. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.markdown {
  img {
    max-width: 100%;
    height: auto;
  }
}

This applies to img elements in Markdown content. It sets the maximum width to the width of the container and the height to automatically scale to the width.

You can overwrite this definition for your own site or theme by creating the file styles/markdown/_images.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Code Style Module (code)

Defines styles for inline and blocks of code in Markdown content. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.markdown {
  code {
    padding: 0 $padding-small;
    background: var(--gray-200);
    border-radius: $border-radius;
    font-size: 0.875em;
  }

  pre {
    padding: $padding-large;
    background: var(--gray-100);
    border-radius: $border-radius;
    overflow-x: auto;

    code {
      padding: 0;
      background: none;
    }
  }

  // Special case for highlighted code with line numbers
  .highlight table tr {
    td:nth-child(1) pre {
      margin: 0;
      padding-inline-end: 0;
    }
    td:nth-child(2) pre {
      margin: 0;
      padding-inline-start: 0;
    }
  }
}

Code Defaults #

code {
  padding: 0 $padding-small;
  background: var(--gray-200);
  border-radius: $border-radius;
  font-size: 0.875em;
}

Code Blocks #

pre {
  padding: $padding-large;
  background: var(--gray-100);
  border-radius: $border-radius;
  overflow-x: auto;

  code {
    padding: 0;
    background: none;
  }
}

Code Blocks with Line Numbers #

.highlight table tr {
  td:nth-child(1) pre {
    margin: 0;
    padding-inline-end: 0;
  }
  td:nth-child(2) pre {
    margin: 0;
    padding-inline-start: 0;
  }
}

Overwriting #

You can overwrite this definition for your own site or theme by creating the file styles/markdown/_code.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Blockquotes Style Module (blockquotes)

Defines the style for blockquotes in Markdown. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.markdown {
  blockquote {
    margin: $padding-large 0;
    padding: $padding-medium $padding-large $padding-medium ($padding-large - $padding-small); //to keep total left space 16dp

    border-inline-start: $padding-small solid var(--gray-200);
    border-radius: $border-radius;

    :first-child {
      margin-top: 0;
    }
    :last-child {
      margin-bottom: 0;
    }
  }
}

This applies to blockquote elements and their children in Markdown content.

You can overwrite this definition for your own site or theme by creating the file styles/markdown/_blockquotes.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Tables Style Module (tables)

Defines the style for tables in Markdown content. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.markdown {
  table {
    overflow: auto;
    display: block;
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: $padding-large;
    margin-bottom: $padding-large;

    tr th,
    tr td {
      padding: $padding-medium $padding-large;
      border: $padding-minimal solid var(--gray-200);
    }

    tr:nth-child(2n) {
      background: var(--gray-100);
    }
  }
}

This applies to table elements and their children in Markdown content.

Table Container #

overflow: auto;
display: block;
border-spacing: 0;
border-collapse: collapse;
margin-top: $padding-large;
margin-bottom: $padding-large;

Cells #

tr th,
tr td {
  padding: $padding-medium $padding-large;
  border: $padding-minimal solid var(--gray-200);
}

Rows #

tr:nth-child(2n) {
  background: var(--gray-100);
}

Overwriting #

You can overwrite this definition for your own site or theme by creating the file styles/markdown/_tables.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Lists Style Module (lists)

Defines styles for definition, ordered, and unordered lists in Markdown content. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.markdown {
  ul,
  ol {
    padding-inline-start: $padding-large * 2;
  }

  dl {
    dt {
      font-weight: bolder;
      margin-top: $padding-large;
    }

    dd {
      margin-inline-start: 0;
      margin-bottom: $padding-large;
    }
  }
}

This applies to ordered and unordered lists in markdown as well as definition lists.

Ordered and Unordered Lists #

ul,
ol {
  padding-inline-start: $padding-large * 2;
}

Definition Lists #

dl {
  dt {
    font-weight: bolder;
    margin-top: $padding-large;
  }

  dd {
    margin-inline-start: 0;
    margin-bottom: $padding-large;
  }
}

Overwriting #

You can overwrite this definition for your own site or theme by creating the file styles/markdown/_lists.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Rulers Style Module (rulers)

Defines the style for rulers in Markdown content. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.markdown {
  hr {
    height: $padding-minimal;
    border: none;
    background: var(--gray-200);
  }
}

This applies to hr elements in Markdown content, as added with ---.

You can overwrite this definition for your own site or theme by creating the file styles/markdown/_rulers.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Figure Style Module (figure)

Defines the style for figures in Markdown. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.markdown {
  figure {
    margin: $padding-large 0;
    figcaption p {
      margin-top: 0;
    }
  }
}

This applies to figure elements in page content, as added by the built-in figure shortcode or Platen’s art markup.

It adds vertical padding to the figure, using the value defined in theme.variables.basic_scss.padding-large and sets the horizontal padding to 0.

It also removes the top margin from paragraphs in the figure’s caption.

You can overwrite this definition for your own site or theme by creating the file styles/markdown/_figure.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.

Inner Style Module (inner)

Defines the style for nested Markdown content. By default, the only setting for this property is enabled, which defaults to true. If you set enabled to false, this style isn’t applied to the site.

With enabled set to true, Platen applies the following style to the site:

.markdown-inner {
  // Util class to remove extra margin in nested markdown content
  > :first-child {
    margin-top: 0;
  }
  > :last-child {
    margin-bottom: 0;
  }
}

This applies to markdown nested in normal markdown content through Platen’s special markup, such as:

• The columns markup’s codeblock definition
• The tabs markup’s codeblock definition
• The details markup’s codeblock definition
• The section list markup’s’ codeblock definition for the section’s summary

It removes the top margin from the first element and the bottom margin from the last element to let that content fit better inside the containers.

You can overwrite this definition for your own site or theme by creating the file styles/markdown/_inner.scss in your assets folder, which defaults to assets in your project root.

For more information on authoring SCSS, see the learning guide.