Markdown

Markdown Style Modules (markdown)

Defines the map of Markdown-specific SCSS style modules for the theme. The existing value is a map of styles that are loaded first for the theme and set defaults for the presentation.

You can add new keys or replace the values for existing ones. You don’t need to keep the full list of all styles in your own configuration file. Only specify the values you want to add or replace.

JSON Schema

Definition
{
  "$id": "https://platen.io/schemas/platen/site/theme/styles/markdown/schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "Defines the map of Markdown-specific SCSS style modules for the theme.\n\nhttps://platen.io/schemas/platen/site/theme/styles/markdown/",
  "patternProperties": {
    ".": {
      "$ref": "https://platen.io/schemas/platen/site/theme/styles/defined/schema.json"
    }
  },
  "properties": {
    "blockquotes": {
      "description": "Defines the style for blockquotes in Markdown.\n\nhttps://platen.io/schemas/platen/site/theme/styles/markdown/#blockquotes",
      "title": "Blockquotes Style Module",
      "type": "object"
    },
    "bold": {
      "description": "Defines the bolding behavior styles for Markdown content.\n\nhttps://platen.io/schemas/platen/site/theme/styles/markdown/#bold",
      "title": "Bold Style Module",
      "type": "object"
    },
    "code": {
      "description": "Defines styles for inline and blocks of code in Markdown content.\n\nhttps://platen.io/schemas/platen/site/theme/styles/markdown/#code",
      "title": "Code Style Module",
      "type": "object"
    },
    "figure": {
      "description": "Defines the style for figures in Markdown.\n\nhttps://platen.io/schemas/platen/site/theme/styles/markdown/#figure",
      "title": "Figure Style Module",
      "type": "object"
    },
    "headings": {
      "description": "Defines styles for headings in Markdown content.\n\nhttps://platen.io/schemas/platen/site/theme/styles/markdown/#headings",
      "title": "Headings Style Module",
      "type": "object"
    },
    "images": {
      "description": "Defines the style for images in Markdown content.\n\nhttps://platen.io/schemas/platen/site/theme/styles/markdown/#images",
      "title": "Images Style Module",
      "type": "object"
    },
    "inner": {
      "description": "Defines the style for nested Markdown content.\n\nhttps://platen.io/schemas/platen/site/theme/styles/markdown/#inner",
      "title": "Inner Style Module",
      "type": "object"
    },
    "links": {
      "description": "Defines the styles for links in Markdown content.\n\nhttps://platen.io/schemas/platen/site/theme/styles/markdown/#links",
      "title": "Links Style Module",
      "type": "object"
    },
    "lists": {
      "description": "Defines styles for definition, ordered, and unordered lists in Markdown content.\n\nhttps://platen.io/schemas/platen/site/theme/styles/markdown/#lists",
      "title": "Lists Style Module",
      "type": "object"
    },
    "page": {
      "description": "Defines the style for the page container for Markdown content.\n\nhttps://platen.io/schemas/platen/site/theme/styles/markdown/#page",
      "title": "Page Style Module",
      "type": "object"
    },
    "paragraphs": {
      "description": "Defines the style for paragraphs in Markdown content.\n\nhttps://platen.io/schemas/platen/site/theme/styles/markdown/#paragraphs",
      "title": "Paragraphs Style Module",
      "type": "object"
    },
    "rulers": {
      "description": "Defines the style for rulers in Markdown content.\n\nhttps://platen.io/schemas/platen/site/theme/styles/markdown/#rulers",
      "title": "Rulers Style Module",
      "type": "object"
    },
    "tables": {
      "description": "Defines the style for tables in Markdown content.\n\nhttps://platen.io/schemas/platen/site/theme/styles/markdown/#tables",
      "title": "Tables Style Module",
      "type": "object"
    }
  },
  "title": "Markdown Style Modules",
  "type": "object"
}

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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:

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.

Careful!

Note that if you create this file, it entirely overwrites the default from the theme.

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

Pattern Properties

Defined Style Module (pattern-any)

All existing style modules, and any style module you add, must define the enabled property at a minimum. This allows theme developers and site maintainers to toggle individual style modules on and off. You can add other key-values pairs to control how the style module behaves, if you want. Those values will be available to the module when it’s processed as a template.

For more information, see Defined Style Module

Edit this page